Taro小程序开发总结

 

 

---

1、onReachBottom的使用

onReachBottom （原生的上拉加载），在子组件components里面是不支持的，必须在父级的pages下才能够起作用

 

2、onShareAppMessage的使用

onShareAppMessage （分享组件），同样的在子组件里面也是不执行的，必须放在父级的pages下才能够起作用

 

3、canvasToTempFilePath的使用

canvasToTempFilePath （canvas生成图片），用Taro使用开发canvas，在 draw() 回调里调用该方法才能保证图片导出成功， Taro.canvasToTempFilePath({}, this)（然并卵），查看文档之后只能Taro.canvasToTempFilePath({}, this.$scope)

4、border色值的使用

小程序border的颜色值，对rgba的支持度不是很好，如果是列表的话，则会出现很多样式问题；采用boxshadow代替也会影响性能，只有采用十二进制的颜色

 

5、小程序自定义头部

小程序自定义头部 分为安卓和ios机型（iphone X）, 根据 Taro.getSystemInfoSync().statusBarHeight的高度进行判断，注意在微信低版本的小于7.0 以下也会有问题的需要做好兼容

 

6、父子组件传值注意事项

父子组件传值，在子组件componentDidMount钩子拿不到props和更新组件可以在shouldComponentUpdate

场景：

1、有时在render中拿到props中的数据时有时候多次 undefined ，我们可以在componentWillReceiveProps来处理props的数据，也可以直接setState, 不会引起过多的render，也不会死循环（componentWillReceiveProps() 在已经装载的组件接收到新属性前调用。若你需要更新状态响应属性改变，你可能需对比 this.props 和 nextProps 并在该方法中使用 this.setState() 处理状态改变）

2、有时候并不需要更新组件，则需要用shouldComponentUpdate（nextProps, nextState）钩子函数中处理

7、小程序列表图片加载失败处理方法

errorFunction: function (event) {console.log(event)var index = event.currentTarget.dataset.indexvar img = 'branchList['+index+'].branch_photo'this.setData({[img]: '/pages/resource/img/loading.gif'})}