mpvue寫小程序初體驗

為什麼是mpvue

使用小程序原生語言寫小程序也有一年多了，最初涉及的都是些小規模項目，但隨著項目日益擴大，原生小程序帶來的問題越來越多

1.編寫每個頁面都需要來回切換3個文件

2.小程序官方編輯器經常卡死、空白、各種bug

3.引用的第三方組件更新迭代混亂

4.小程序本身語法侷限，很多時髦功能不支持

5.和h5幾乎沒有任何關係，轉成h5幾乎不可能

因此我開始考慮採用其他流行框架，查一查主要就是wepy和mpvue了，之所以選用mpvue，第一是最近自己正好在研究vue，第二是mpvue生態圈相對成熟一些。

使用體驗

編輯器自然是萬年最愛的Sublimetext 3 ，裝一些vue高亮插件、html排版插件即可

由於不熟悉這個框架，我並沒有從0新建項目，而是從github中選擇了一個最簡單的案例clone了下來，然後刪掉它的pages，開始寫自己的page

隨機就遇到一些問題，由於小程序和vue接口存在大量區別，導致原本很多方法無法使用。

最後查了半天採用如下方案：

flyio作為網絡請求庫

自己寫了個global來簡單替代小程序globaldata，下方會給出代碼

ui框架採用vant小程序版，該框架mpvue完全支持

比較坑爹的是小程序開發工具會隨著每次保存刷新，因此經常保存幾個文件刷新好幾遍，儘量一次性保存全部：command+option+s

Vue體驗最好的還是組件化，雖然小程序本身也支持組件化，但是體驗還是有差距，但是“瑜不掩瑕”，mpvue還不算成熟，還有很多坑，官方已經聲明瞭一些，如：不支持複雜js表達式、不支持filter，除此之外，個人在開發過程中還遇到一些問題：

頁面緩存問題

同一頁面多次加載的時候會殘留上一次數據，即頁面不會destroy，這個問題非常驗證，github上已經有無數討論，目前我採用手動清空數據的方法，勉強解決，方法就是在每個頁面加入如下代碼（比較蠢，也可以採用github上某位大神寫的框架，但由於版本差異我沒敢用）

const dataArr = []
export default {
 onLoad() {
 Object.assign(this.$data, this.$options.data())
 dataArr.push({ ...this.$data })
 },
 onUnload() {
 dataArr.pop()
 const dataNum = dataArr.length
 if (!dataNum) return
 Object.assign(this.$data, dataArr[dataNum - 1])
 },
}

上面提到的globaldata問題

當然可以用vuex做，只是我不是很熟悉這個，也不想搞那麼費勁，畢竟我只想儲存下用戶信息

在utils文件夾中新建和一個js

再在main.js中增加兩句代碼

這樣，在任意一個頁面都可以用

this.$global.token //訪問和修改這些全局的值了 

總結

項目順利完成，vant的組件效果還不錯。mpvue除了頁面切換這個大坑外，其餘體驗還算不錯，後續會繼續採用，期待框架作者早日更新。小程序定製vx: arsenetech