一、寫在前面：
.....最近在寫一個微信小程序項目，在看完官方微信小程序開發文檔后，有一種直接想“放棄”的念頭；
.....使用微信小程序原生框架可以快速，方便，簡潔的搭建項目，同時微信提供了新的一套‘語義化’標記語言wxml,以及獨立出來的wxss樣式表，並且js的交互邏輯支持ES6的語法，包括使用Promise等；除去框架本身之外，小程序還提供了一些常用的組件，包括Picker,slider，canvas,form表單等，能極大的提高開發者的效率，豐富的API完全能滿足工作需求，如果你在沒有接觸類似 VUE 等MVVM主流前端框架之前，微信小程序原生框架無疑是最佳選擇；
......但是，使用過vue后，你會發現小程序原生框架的數據綁定方式非常“臃腫”，代碼編寫不優雅簡潔，語義化標簽以及豐富的屬性設置會大大增加學習成本，另一方面微信小程序開發者工具的IDE表現也總是差強人意，反應遲鈍，wxml,wxss,js之間來回切換不流暢，導致開發效率低下......
......由於以上種種，我開始尋找新的框架編寫小程序項目，首先找到的框架是圈內較熱門的wepy，其次就是最近才發布的mpvue;
簡介
......wepy 是騰訊開源的一套語法接近vue.js，快速開發小程序的框架，開源的較早，網上有很多資源，也有一些大廠使用。可想而知，原生小程序框架在設計上還是有一定的缺陷
......mpvue也就是今天要介紹的主角，是美團開源的一套快速開發小程序的前端框架，__按官網說可以實現小程序與H5界面使用一套代碼，mpvue 繼承自 Vue.js。並且，其技術規范和語法特點與 Vue.js 保持一致。對毫無小程序開發經驗的同學來說無疑是大大的福利。mpvue官網
二、優勢比較
值得注意的是，mpvue提供vuex進行數據狀態管理，能滿足復雜應用狀態管理需求，這是其他框架都不具備的！
三、新建項目
- 通過 Vue.js 命令行工具 vue-cli，你只需在終端窗口輸入幾條簡單命令，即可快速創建和啟動一個帶熱重載、保存時靜態檢查、內置代碼構建功能的小程序項目
- 創建完之后，在命令行執行：
npm run dev
編譯成功后，用微信開發者工具打開webpack打包后的dist文件，即可進行開發了； - 項目文件結構：
小提示：
安裝mpvue項目利用vue-cli腳手架工具，選擇了對應的mpvue的模板，在安裝過程中，cli腳手架工具會提醒您是否需要安裝Vuex，，我建議您根據項目需求確認是否添加該配置，因為這里安裝Vuex，工具根據vue模板會幫你自動搭建依賴關系並且轉義后兼容小程序，如果您想在項目開發中添加Vux就要注意了，在安裝過程中極有可能報錯，由於mpvue開源時間較短，參考資料也很有限，為了避免不必要的麻煩，建議在搭建項目時就安裝Vuex。
四、生命周期比較
vue生命周期
- beforeCreate————————在實例初始化之后，數據觀測事件配置之前被調用
- created ————————在實例創建完成后被立即調用
- beforeMount ————————在掛載開始之前被調用
- mounted ————————el 被新創建的 vm.$el 替換掛載到實例上去之后調用該鈎子
- beforeUpdate
- updated
- activated ————————keep-alive 組件激活時調用。
- deactivated
- beforeDestroy
- destroyed
注意：vue的create,mounted等生命周期鈎子函數只執行一次，當組件創建並被掛載到DOM上以后，就不會執行了；
小程序生命周期
app 部分：
- onLaunch，初始化
- onShow，當小程序啟動，或從后台進入前台顯示
- onHide，當小程序從前台進入后台
page 部分：
- onLoad，監聽頁面加載
- onShow，監聽頁面顯示
- onReady，監聽頁面初次渲染完成
- onHide，監聽頁面隱藏
- onUnload，監聽頁面卸載
- onPullDownRefresh，監聽用戶下拉動作
- onReachBottom，頁面上拉觸底事件的處理函數
- onShareAppMessage，用戶點擊右上角分享
- onPageScroll，頁面滾動
- onTabItemTap, 當前是 tab 頁時，點擊 tab 時觸發 （mpvue 0.0.16 支持）
五、使用總結
（1）生命周期鈎子函數
mpvue團隊建議開發者在mpvue中盡可能的不使用小程序的生命周期，實際工作中使用小程序的生命周期鈎子函數也無大礙，有的程序員為了減少頁面初始化時盡快的請求到服務器端的數據，故意將ajax請求寫在onShow鈎子函數里，而不是vue 的 mounted函數里；
我們來看看這樣一個需求，下圖所示的頁面
（2）路由
在mpvue中沒有繼續延用vue路由的寫法，而是繼承小程序的一套解決方案，在工作中我們經常通過路由來傳遞參數，比如下面代碼所示：
//在index頁面，我們想跳轉到apply頁面，並傳遞id參數
let id = 10
const url = '/pages/apply/main?id=' + id
wx.navigateTo({ url})
小程序方法獲取id
// 在apply.vue頁面中
onLoad (options) {
let id = options.id
}
//注意：必須是在onLoad鈎子函數往后的生命周期中獲取
onShow (options) {
let id = options.id
}