微信小程序陷阱集锦

微信小程序
Posted by Chris Lu on 2017-12-06

开发微信小程序主要依赖官方的开发文档，但是有很多陷阱得靠经验积累。到目前已经做了三个小程序了，本文记录开发中遇到的一些问题，持续更新。
更新时间：2018-03-13

一、组件

  1. scroll-view组件高度设置为100%，不能触发上拉刷新和下拉加载事件。

  2. textarea组件

    • 文字会浮到顶层；
    • 不能设置tap；
    • IOS中placeholder不能超过两行； 2018-03-12
    • IOS中文字会下一截
    • textarea组件上方不可以有高度会变化的区域，否则会导致textarea不能跟随页面一起滚动。

  3. 获取 input组件 中的内容时，请同时绑定input事件和blur事件。

    • 若只绑定input事件，某些机型的中文输入法选中中文字的时候不会触发input事件，导致数据采集错误。
    • 若只绑定blur事件，则会因为3.5的问题导致数据采集错误。

  4. input组件文字设置为靠右时，光标会聚焦在文字的左侧。

  5. 动态设置web-view组件的src属性时，需要给一个wx:if的指令，否则会导致白屏。估计是src只会初始化一次。

二、API

  1. 请小心使用showNavigationBarLoading，因为hideNavigationBarLoading有可能会无效（猜测是因为接口响应太快，hide的时候还没有show完毕）。

  2. onShareAppMessage在IOS上正常，但在Android上有很多问题

    • 成功回调总会有shareTickets；
    • 打开聊天界面中的分享卡片，无论是给个人还是群，场景值定为1044；
    • app.js中onLoad、onShow的options里不一定携带 shareTicket。

  3. A是一个tabbar页面，A的title通过setNavigationBarTitle动态设置。首次进入页面时title正常，跳转到别的页面再返回到A页，IOS中A页面的title就变成了A.json里的值。

  4. 在一个tabbar页面中调用switchTab跳到当前页，不会触发onLoad、onShow。

  5. 操作storage的API，无论同步或异步，都有大概率失败抛出异常，因此建议操作storage时捕获异常，多次调用。

三、事件

  1. 事件的触发顺序

    • 单击（tap） touchstart–>touchend–>tap
    • 长按（longtap） touchstart–>longtap–>touchend–>tap
      官方推荐使用longpress（1.5.0）代替

  2. 页面第一次打开时，请注意onLoad中有异步事件，onShow中有期望同步处理的情况，因为执行onLoad后就会马上执行onShow。

  3. 页面第一次打开时，开发工具中onShow只调用1次，真机上会调用2次。

  4. A是tabBar的一页，B不是tabBar的一页，在A->B->A的过程中，B->A过程使用wx.switchTab(Object) 不会调用onShow，使用wx.navigateBack()会调用onShow。

  5. 开发者工具中先触发input组件的blur再触发按钮的click，真机中则是先触发按钮的click再触发input组件的blur

四、样式

  1. 自定义组件最外层fixed定位无效。

  2. 页面的第一个组件设置margin-top 和 最后一个组件的margin-bottom无效。

  3. 同一个组件上overflow-x和overflow-y不可以设置为不同值，后一个会覆盖前一个的效果。

五、文档没有的事

  1. 为了体验效果更好，会在http请求数据前showToast，结束后hideToast，若接口响应很快会因为hide时候还没有show完毕，导致toast不能正常关闭，反而影响体验。所以是否需要数据加载中的toast提示，要根据接口响应速度酌情考虑。

  2. 经过测试发现，reLaunch接口支持路由传参数，慎重使用。

  3. 做页面刷新时，若是刷新普通页面使用redirectTo，若刷新tabbar页面需要使用reLaunch。

  4. 分享出去的页面onLoad中做reLaunch跳转，安卓环境第一次有效，第二次则会报错：reLaunch:fail can not invoke reLaunch in background。 正确做法应该是将跳转逻辑放到onReady中。

  5. wx.openSetting方法会调起授权设置页面，此时小程序在后台运行，如果在wx.openSetting的成功回调中调用reLaunch，安卓环境下回报错：reLaunch:fail can not invoke reLaunch in background。

  6. 模板传参方式不局限于文档中的方式，可以有；

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <!-- 若item是obj的一个属性，total是一个基本数据类型 -->
    <template is="tplName" data="{{...obj, info: obj.item, total}}">
    <template name="tplName">
      <!-- 1. ...obj像ES6的解构一样，可以直接使用其内部的属性 -->
      <view>{{item.name}}</view>
      <!-- 2. info: obj.item 指定一个参数名 -->
      <view>{{info.name}}</view>
      <!-- 3. 直接使用传入的参数做为参数名 -->
      <view>{{total}}</view>
    </template>

  7. 自定义组件中slot标签的样式会同时受到自定义组件内外样式的影响。

  8. WXML节点信息错误做法：

    1
    2
    3
    const $control = wx.createSelectorQuery().select('#control')
    $control.boundingClientRect(巴拉).exec()  
    $control.boundingClientRect(叮当).exec() // 叮当的时候就会巴拉

    正确做法：

    1
    2
    3
    const $control = wx.createSelectorQuery().select('#control').boundingClientRect()
    $control.exec(巴拉)   
    $control.exec(叮当)

    注意：boundingClientRect回调方法接受的第一个参数类型是对象（object），exec回调方法接受的第一个参数是对象数组（object array）。