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源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。