Mpvue接入微信小程序指南
Mpvue，即使用vue的開發模式結合微信小程序api來開發微信小程序，好處是免去了學習原生小程序語法的時間，提高開發效率和保持框架一致性可複用。但mpvue自身也存在一些缺陷和vue對比的些許差異，所以從以下幾個方面說明mpvue接入微信小程序的流程。
- 安裝以及引入
（1）安裝參考：http://mpvue.com/mpvue/，流程和安裝vue一樣
（2）目錄結構
目錄結構也沒什麼要說的，結構和採用vue-cli3.0生成的項目類似。需要注意的就是 static目錄，mpvue項目的靜態資源（圖片、圖標、第三方sdk、json數據等）都應該放在這個項目中。因爲在編譯成微信小程序的過程中，static會原封不動的放在 微信小程序 static目錄下，這樣就減少了編譯時間和減少出錯的機率。
（3）微信開發者工具
①下載微信開發者工具
https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
此工具可高效開發微信小程序和公衆號項目
②引入項目
可新建也可以引入，這裏我選導入項目。 
Appid可以使用已經註冊號的小程序，如果沒有註冊，可以使用測試號，但測試號會少一部分功能，比如上傳代碼。開發前先需要管理員在小程序後臺加入開發者名單（測試號不需要）
- 開發
開發模式和現有的vue開發流程一樣，需要注意的就是 生命週期部分，搞清楚了生命週期，開發基本就沒什麼問題了。
- 技術棧
mpvue+vuex+fly.js+storage(緩存)
-
- 爲了保證代碼可遷移可複用性，不用微信自帶的wx.request()做ajax請求，而是採用fly.js http請求庫，這樣就可以在其他h5或者web端複用。
https://www.jianshu.com/p/99915695267a
-
- 小程序 的ui框架目前足夠使用，就不需要引入額外的ui框架 ，比如weui，如需使用再安裝。
https://mpcomponent.github.io/mpvue-weui/guide/
-
- 緩存，直接調用api即可
- 生命週期
生命週期部分，具體先看一下這篇文章
https://blog.csdn.net/qq_35430000/article/details/99710462
小程序生命週期 onLoad、onShow等生命週期夠用，可拋棄vue原有生命週期。
總結一點：使用mpvue開發，採用vue的開發方式，使用小程序的生命週期。
缺點：mpvue生命週期有一個缺陷，舉個例子：當前頁面表單填充的內容 在下個頁面點擊返回後依然存在，也就是說 頁面的data沒有銷燬，這時候需要手動去初始化和清空數據。
這個缺陷在 mpvue issue上面有提到：
https://github.com/Meituan-Dianping/mpvue/issues/140
- 微信小程序api調用
因mpvue是適應微信小程序的框架，所以mpvue是可以識別 微信 wx變量的，小程序所有的api 都可以通過wx進行調用，需要注意的就是 要使用變量接收vue實例 this
Api：https://developers.weixin.qq.com/miniprogram/dev/api/
- 打包環境區分
可以看到在mpvue package.json中不但可以打包微信小程序，還對頭條、百度、支付寶等小程序有支持，這裏不涉及這些產品，紅框部分直接刪除，然後設置我們需要的變量 dev sit uat prd等。
因NODE_ENV在一些配置中已經使用，爲了減少編譯出錯，另外設置變量WX_ENV作爲服務器環境的區分，dev.env.js 和prod.env.js的區分如下
- 引入第三方sdk，以引入騰訊地圖 sdk爲例
https://lbs.qq.com/qqmap_wx_jssdk/index.html
申請祕鑰，下載對應sdk 等等。
- 把第三方包放在 static 目錄下
- 需要在微信小程序管理後臺加入 騰訊地圖的信任名單合法域名，不設置這一步，小程序會報非法域名。https://mp.weixin.qq.com/wxamp/home/guide?token=905227300&lang=zh_CN
- 需要注意的是，微信小程序正式環境貌似只支持https請求，所以原來http需要進行升級。所以在開發階段，可以在詳情的本地設置中，勾選不校驗合法域名、https
- 微信小程序屏幕適配
微信小程序採用自適應的 單位 rpx,750rpx正好就是一個屏幕寬度。用的時候大概是原來 px的一半左右，比如原來 20px字體，在小程序中需要 40rpx，大概適用。
- 版本發佈
微信小程序提供了一整套代碼發佈審覈上線的流程，只需等待審覈通過即可。
（1）dev sit uat prd進行打包。
通過在package.json設置的命令進行wx 的打包，wx即爲微信。
最後發現會在dist –>wx微信目錄下已經打包好了對應的微信小程序包，wx目錄即爲mpvue解析轉換成小程序語言的最終目錄。
（2）代碼上傳，點擊上傳按鈕，設置版本號和備註
（3）代碼上傳完畢後，可以在小程序管理後臺看到上傳的版本，這時可以對上傳的版本進行操作，可以提升爲體驗版或者正式版。https://mp.weixin.qq.com/wxamp/home/guide?token=905227300&lang=zh_CN
值得注意的是，每次上傳版本，都會覆蓋原來已上傳的開發版本。
體驗版二維碼可直接微信掃碼查看
