總結微信小程序開發中遇到的坑

總結微信小程序開發中遇到的坑,一些坑你得一個一個的跳啊,/(ㄒoㄒ)/~~

1,頁面跳轉和參數傳遞實例

首先說一下我遇到的需求
有一個個人消息頁面,裏面的數據都是後端返回的,返回的數據大體以下,有一個是數據url是要控制跳轉到哪一個頁面,多是tab頁面也多是非tab頁面,可是微信小程序中跳轉到tab和非tab頁面用的api不是同一個,可是在頁面中渲染確定是要用到循環的,難道要再多個參數來判斷是跳轉到tab頁面仍是非tab頁面?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

[ { "id": 2121, "title": "test", "body": "test", "url": "url", "pic": "pic", "created_at": "2017-07-01 12:34:56" }, { "id": 2122, "title": "test", "body": "test", "url": "url", "pic": "pic", "created_at": "2017-07-01 12:34:56" }, ]

• 後通常的小程序中我用的框架是wepy,底部的tab組件就是我本身寫的,沒有用到小程序本身提供的那一個,由於咱們還要實現一個需求,有消息時,底部tab會出現小紅點,還有如下彈窗要把底部tab覆蓋掉,這些需求若是用小程序提供的那一個tab組件的話根本實現不了;並且不用wepy框架的話,本身作一個tab實現的過程很噁心,小程序雖然實現了組件化,可是它實現的組件化bong不想vue和react那樣實現的是真正的組件化,你須要哪一個組件就直接import進來,小程序的組件化實現可查看官方文檔,js,css和html都是要分別引入的
• 本身實現的tab頁面總體是一個非tab頁面,全部整個小程序中就不存在絕對的tab頁面,因此用navigator這個組件,想要跳轉到tab頁面能夠經過在url上拼接參數

1 2 3 4 5 6

<view class= "mesList" wx: for= "{{unReadList}}" wx:key= "unique"> <navigator url= "/pages/index?tab=0" hover- class= "none" > <text>{{item.body}}< /text> <view class="messageTime">{{item.created_at}}</view> < /navigator> </view>

而後再index頁面的onload中判斷顯示哪一個tab

1 2 3 4 5 6

onLoad(options) { if (options && options.tab) { this.tab = parseInt(options.tab); this.$apply(); } }

 

2,微信小程序受權處理

• 微信小程序提示受權彈窗,若是用戶第一次點擊拒絕以後,一段時間將不會再次彈出來,而後用戶又不知道什麼緣由用不了小程序,這是個很糟糕的用戶體驗,咱們應該優雅的處理這種狀況
• 採用的解決方法參考

3, 登陸問題的處理

• 兩個登陸接口,一個get,判斷是否已經還須要登陸,若是返回true,則須要登陸,若是返回false,則不須要登陸
• 若是返回true,則須要去請求更一個post的登陸接口,這時,你須要獲取第一個get請求的返回信息中的session,以後每次請求求都須要帶上他
• 在返回true的時候還須要作一件事兒,就是把返回信息中的session存儲到storage,即調用setStorage,而後在以後每次請求數據的時候在headers里加上這個字段

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29

  function getStorage(key) { return new Promise( function (resolve, reject) { // 先判斷本地數據存儲有沒有cookie wx.getStorage({ key: key, success: function (res) { resolve(res.data); }, fail: function (res) { resolve( null); }, }); }); } function setStorage(key, value) { return new Promise( function (resolve, reject) { wx.setStorage({ key: key, data: value, success: function (res) { // TODO: 不知道返回什麼 resolve(res.data); }, fail: function (res) { reject(res.errMsg); }, }); }); }

4,wx.getStorage安卓手機上返回的錯誤信息是getStorage:fail,ios,getStorage:fail data not found

• 在判斷一些api返回的錯誤信息時,最好不要經過判斷具體的錯誤信息來處理錯誤

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

  function getStorage(key) { return new Promise( function (resolve, reject) { // 先判斷本地數據存儲有沒有cookie wx.getStorage({ key: key, success: function (res) { resolve(res.data); }, fail: function (res) { resolve( null); // 下面註釋的部分即爲剛開始犯的錯誤,致使有可能ios或安卓或部分機型顯示不出數據 // if (res.errMsg == 'getStorage:fail' || res.errMsg == 'getStorage:fail data not found') { // console.log('沒有cookie'); // resolve(null); // } else { // console.log('這是一個問題'); // reject(res.errMsg); // } }, }); }); }

5,小程序解決異步

• 若是項目中沒有用到babal,小程序自己的支持只支持到es6的語法,因此解決異步的問題就不能使用es7的async和await,只能使用promise來解決異步,可是每一個api上都進行一次封裝(以下),這種作法太噁心了

  1 2 3 4 5 6 7 8 9 10 11 12

  function login() { return new Promise( function (resolve, reject) { wx.login({ success: function (res) { resolve(res); }, fail: function (res) { reject(res.errMsg); }, }); }); }

• 基於微信的API的prototype上進行了promise的封裝

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

  function promiseify(func) { return (args = {}) => { return new Promise( (resolve, reject) => { func.call(wx, Object.assign(args, { success: resolve, fail: reject, })); }) } } for ( const key in wx) { if ( Object.prototype.hasOwnProperty.call(wx, key) && typeof wx[key] === 'function') { wx[ `_${key}`] = promiseify(wx[key]); } }

6,怎麼保證在調用其餘接口以前已經調用過登陸的接口了

• 我採用執行隊列的方式來解決,問題能夠簡化爲有兩個按鈕,點擊第一個按鈕輸出這是第幾回輸出d1,可是必須在點擊完d2以後,isPrint變爲true時,才容許輸出,在isPrint爲false的時候點擊d1,須要把要輸出的內容暫時存儲起來,等isPrint變爲true時,暫存起來的輸出如今才能夠輸出出來

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34

  // html <div class= "first">按鈕一< /div> <div class="second">按鈕二</div> // js const d1 = document.querySelector( '.first'); const d2 = document.querySelector( '.second'); let count = 0; // 用來記錄第幾回輸出 let isPrint = false; // 是否容許輸出 let arr = []; // 聲明一個數組,用來存儲   function clickCount() { count++; console.log( '這是第' + count + '次輸出d1'); } d1.onclick = function () { console.log(isPrint); console.log(arr); if (isPrint) { if (arr.length === 0) { clickCount(); } else { for ( let i = 0, len = arr.length; i < len; i++) { arr[i](); } } } else { arr.push(clickCount); console.log( '不容許輸出'); } }; d2.onclick = function () { isPrint = true; console.log(isPrint); }

6,小程序問題

• 不支持跳轉外部連接
• text能夠解析/n,
• 目前不支持識別圖中二維碼，
• 背景圖片不能用本地圖片，
• wx.navigateTo須要跳轉的應用內非 tabBar 的頁面的路徑
• wx.switchTab跳轉到tabBar頁面，
• wx.showToast(),icon只支持success和loading,可是支持image,且image優先級高於icon
• tabBar頁面A navigatorTo 到頁面B，而後B switchTab 到A，這裏A會執行onShow()；
  可是我再從A跳到B再switchTab回來，A就不會再執行onShow()了，

7,總結

• 有時候在開發者工具上測試時是沒有問題的,可是真機測試卻有問題,全部開發過程當中必定要在多個不一樣型號的手機上測試;不少時候IOS和安卓api返回的信息不一樣
• 在手機上打開調試的時候是好的,可是關閉調試後就會出現各類bug,遇到這種狀況必定要一步步的去排查緣由

8,後採用wepy重構小程序遇到的一些坑

wepy文檔
1，Q: 怎麼在page組件和component組件中回去到getApp(),就是app裏面定義的函數,經過this.$parent只能拿到數據，拿不到方法?
A:能夠在this.$parent的_proto上拿到方法,即this.$parent.onLogin
2, Q:怎麼實現按需加載
A:在compoent組件中自定義生命週期函數,並手動觸發

jpg 改 rar