01.onReachBottom的使用
onReachBottom (原生的上拉加载),在子组件components里面是不支持的,必须在父级的pages下才能够起作用
02.onShareAppMessage的使用
onShareAppMessage (分享组件),同样的在子组件里面也是不执行的,必须放在父级的pages下才能够起作用
03.canvasToTempFilePath的使用
canvasToTempFilePath (canvas生成图片),用Taro使用开发canvas,在 draw() 回调里调用该方法才能保证图片导出成功, Taro.canvasToTempFilePath({}, this)(然并卵),查看文档之后只能Taro.canvasToTempFilePath({}, this.$scope)
04.border色值的使用
小程序border的颜色值,对rgba的支持度不是很好,如果是列表的话,则会出现很多样式问题;采用boxshadow代替也会影响性能,只有采用十二进制的颜色
05.小程序自定义头部
小程序自定义头部 分为安卓和ios机型(iphone X), 根据 Taro.getSystemInfoSync().statusBarHeight的高度进行判断,注意在微信低版本的小于7.0 以下也会有问题的需要做好兼容
代码语言:javascript复制获取机型的高度
{
'iPhone': 64,
'iPhoneX': 88,
'Android': 68,
'samsung': 72
}
// 导航栏总高度 & 占位块高度
placeHoder = totalBar = {
'iPhone': 64,
'iPhoneX': 88,
'Android': 68,
'samsung': 72
}
// 时间、信号等工具栏的高度
toolBar = systermInfo.statusBarHeight
// 页面title栏的高度
titleBar = totalBar - toolBar
根据下列方法来获取定位值
var data = wx.getMenuButtonBoundingClientRect()
console.log('菜单按键宽度:',data.width)
console.log('菜单按键高度:',data.height)
console.log('菜单按键上边界坐标:',data.top)
console.log('菜单按键右边界坐标:',data.right)
console.log('菜单按键下边界坐标:',data.bottom)
console.log('菜单按键左边界坐标:',data.left)
06.父子组件传值注意事项
父子组件传值,在子组件componentDidMount钩子拿不到props和更新组件可以在shouldComponentUpdate
场景:
代码语言:javascript复制1、有时在render中拿到props中的数据时有时候多次 undefined ,我们可以在componentWillReceiveProps来处理props的数据,也可以直接setState, 不会引起过多的render,也不会死循环
(componentWillReceiveProps() 在已经装载的组件接收到新属性前调用。若你需要更新状态响应属性改变,你可能需对比 this.props 和 nextProps 并在该方法中使用 this.setState() 处理状态改变)
2、有时候并不需要更新组件,则需要用shouldComponentUpdate(nextProps, nextState)钩子函数中处理
07.小程序列表图片加载失败处理方法
onShareAppMessage (分享组件),同样的在子组件里面也是不执行的,必须放在父级的pages下才能够起作用
代码语言:javascript复制errorFunction: function (event) {
console.log(event)
var index = event.currentTarget.dataset.index
var img = 'branchList[' index '].branch_photo'
this.setData({
[img]: '/pages/resource/img/loading.gif'
})
}