微信小程序開發框架對比及mpvue實際使用總結

首先轉載一張對比圖片：

項目名稱：澳客競彩（2018世界盃的一個活動）

mpvue官網：http://mpvue.com/

mpvue使用總結： 

1. 頁面跳轉，不能使用vue-router，用vx自帶跳轉，路徑使用絕對路徑。有最大跳轉頁面的限制，5個仍是10個的忘了。

wx.redirectTo({

url: '/pages/ask-card/main'

})

2. 圖片地址引用使用絕對路徑, 不能使用es6的模版字符串語法（``），圖片如需高度自適應，需在img標籤後加 mode="widthFix"

<div :style="{backgroundImage: 'url(' + imgUrl + 'static/card-' + (!item.count ? 'gray/s_' : 'color/s_') + item.id + '.png)'}" alt="" class="group-item-card"></div>

3. wx.request 不返回Promise對象

4. 微信小程序提供的原生事件，須要改寫綁定方式，如‘bindregionchange’

<map @regionchange="functionName" @end="functionName" @begin="functionName"><map>

5. mpvue@1.0.11版本 目前沒法將父組件的值直接用於子組件slot中，須要挨個傳字符串（見home/index.vue），傳對象或數組沒法取到（即沒法根據父組件數據循環子組件元素）

6. mpvue@1.0.11版本 每一個page頁面的created，和mounted方法都會在小程序首次執行的時候被執行，因此每一個page中用onLoad或者onShow等小程序原生方法調用。

7. 經過`this.$root.$mp.query`能夠得到url參數。/pages/home/main?url=/pages/home/index

8. 運行時，程序有錯可是控制檯不會報錯的。

9. mpvue@1.0.11版本 目前不能使用vue的filter

10. 每一個頁面都是獨立的vue實例頁面，相似整個項目就是一個多頁面應用

11. page部分增長onload，onshow等事件

12. 不要在選項屬性或回掉使用箭頭函數

13. 不支持v-html， 在{{}}裏不能用過於複雜的表達式，不支持filter，不支持classObject，styleObject

14. 不支持組件上使用class和style綁定

15. 列表渲染必須指定不一樣的索引值

16. 事件修飾符沒用

17. 組件限制不少，看文檔，建議直接用小程序組件

18. 精簡data,props,computed數據，不要長列表。建議使用v-model.lazy方式

小程序特性：

1. 小程序可喚起小程序，但不是任何小程序均可以喚起的，只能打開同一公衆號下關聯的小程序

2. App和小程序可互相喚起

3. 小程序跟公衆號不同，它不能分享到朋友圈，只能分享給好友，或者是微信羣。

4. 公衆號裏能夠有小程序入口

5. 小程序裏支持web-view組件

6. 小程序的本地存儲有同步和異步兩種方式，異步方式有回調方法

7. 小程序中不能操做dom,即不能使用document

 

** 前提：2018年6月開始，小程序的獲取用戶信息的受權不容許js直接調用，須要用戶手動本身點擊才能彈出受權頁面。

 

關於項目路由的方案：主要是針對分享後的入口設計

1. 全部頁面分享的pash都統一爲index首頁， 用query來區分指向。

程序入口只有index首頁，index頁來管理用戶登陸，受權等操做，成功後根據query來跳轉對應頁面

 

優勢：統一控制，方便管理

缺點：多了一個index頁面

 

2. 不一樣頁面分享各自的path，App入口判斷受權邏輯，但App沒提供阻止小程序執行的功能，也就是沒法阻止小程序直接進入到分享的path頁面。

當發現無受權或登陸過時了，就須要redirectTo到一個受權頁或彈層進行從新受權再使用

 

優勢：能夠少一個index頁

缺點：頁面會跳閃，控制不方便

 

因爲用戶受權必須用戶本身點，因此最後採用方案1。

把index做爲一個引導頁來設計，首次進入正好也能看到活動介紹，而後用戶本身點擊進入活動，實際就是受權獲取用戶信息再進入。

以後再進入時，index就能直接獲取到信息，也就是一閃而過，用戶也不會再看到index頁了。

 

 

關於登陸認證的方案：

1.  被動校驗： api過濾器：經過正常業務api的接口調用返回統一錯誤碼，進行判斷，而後跳轉去登陸

2. 主動校驗：頁面攔截器：針對每一個頁面的onshow，校驗是否登陸

3. 主動校驗：api攔截器：先校驗登陸，成功後繼續調用正常業務api。

 

項目比較小，並且每次進入項目都會在index頁裏判斷登陸，因此中途登陸認證的這塊邏輯就沒作。