Taro小程序开发总结

“ 关注前端开发社区，回复 '领取资源'，免费领取Vue，小程序，Node Js，前端开发用的插件以及面试视频等学习资料，让咱们一块儿学习，一块儿进步”javascript

01前端

—java

onReachBottom的使用ios

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

02canvas

—小程序

onShareAppMessage的使用微信

onShareAppMessage （分享组件），一样的在子组件里面也是不执行的，必须放在父级的pages下才可以起做用app

03iphone

—

canvasToTempFilePath的使用

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

—

border色值的使用

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

—

小程序自定义头部

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

获取机型的高度 { '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)

—

父子组件传值注意事项

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

场景：

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

—

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

onShareAppMessage （分享组件），一样的在子组件里面也是不执行的，必须放在父级的pages下才可以起做用

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'})}

近期

Vue开发技巧

瞅啥啊，老铁！还不赶忙进去咱的你们庭，麻烦支持一下帅编！

本文分享自微信公众号 - 前端开发社区（pt1173179243）。
若有侵权，请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一块儿分享。