小程序——踩坑

• 在小程序中携带中文参数的跳转乱码 ( 涉及到扫小程序码的，有非英文字符最好转码 )

问题：正常的路由跳转不会复现乱码，但是从其他场景进入小程序时（如从转发的小程序入口进入，会出现乱码情况）会给你惊喜

解决：在使用参数前，单独对中文字符进行转码，比如我需要使用到options中的shopName，就对它转码

if (options.shopName){
  wx.setNavigationBarTitle({ title: decodeURIComponent(options.shopName) })
}

• 小程序在适配时，安卓 5.1 及以下的版本在URL请求路径中，不可以插入空格，安卓5.1 以上会智能转换，返回数据报错为

解决：确保路径中不要插入乱七八糟的字符或者是空格

• 生成小程序码，传的sence参数的长度有限制，应该尽量简短
• 调用this.setData 方法时，如果写入的参数值为null，开发者工具不会报错，但是真机测试的时候，部分机型会报错

解决：在调用该方法之前，先判断写入的参数是否为null

当用户跳转的页面不存在时，为了优化用户体验，可以在app.js文件中设置默认跳转，以解决 404错误

onPageNotFound(res) {
    wx.switchTab({
      url: '/pages/index/index',
    })
},

• 使用钩子函数 onReachBottom 可以监听页面（最外面的view）是够滚动到底部

onReachBottom:function(){},

• 小程序在XHTML组件中自定义属性时，属性名不支持驼峰命名，小程序会把大写自动转换成小写。如在组件中定义 data-imgUrl ，在event参数中的currentTarget属性中的dataset属性中得到的属性名为imgurl
• 在使用scroll-view组件横向滚动时，除了需要打开scroll-x属性，在scroll-view的样式中需要设置不换行

scroll-view{
    white-space: nowrap;
}

• 在设置 scroll-view 组件的 scroll-into-view 属性时，需要在 onRead 生命周期中 setData 一下 id，才能实现滚动到可视区域

监听全局变量的改变

在app.js全局js文件中，定义监听函数

//app.js
App({
  //接收一个回调函数，在监听到数据变化的时候，通过回调函数去更新数据
  watch: function (method) {
    var obj = this.globalData;
    Object.defineProperty(obj, "name", {
      configurable: true,
      enumerable: true,
      set: function (value) {
        this._name = value;
        method(value);
      },
      get: function () {
        // 调用getApp().globalData.name的时候，这里就会执行。
        return this._name
      }
    })
  },
  globalData: {
    userInfo: null,
    _name: 'primitive'
  }
})


//在index.js文件中调用监听函数
Page({
  onLoad: function (options) {
    let that = this;
    console.log(getApp().globalData._name)
    // 在这里用定时器模拟网络请求的过程
    setTimeout(function () {
      getApp().globalData.name = 'requestBack'
    }, 1000)
    getApp().watch(that.watchBack)
  },
  watchBack: function (name) {
    console.log('this.name==' + name)
  }
})

• 从后台加载完包含图片地址的数据，渲染过程会再次根据路径获取图片地址，可以使用 bindload 属性侦听图片渲染在什么时候完成（配合 wx.showLoading()使用，效果更佳）

  <image src="{{imgUrl}}/image/{{item.img}}" 
  catchtap="previewImage" data-imgurl='{{imgUrl}}/image/{{item.img}}' bindload="onImageLoad"></image>