mpvue-編寫微信小程序總結

---

1、寫在前面：

.....最近在寫一個微信小程序項目，在看完官方微信小程序開發文檔後，有一種直接想「放棄」的念頭；
.....使用微信小程序原生框架能夠快速，方便，簡潔的搭建項目，同時微信提供了新的一套‘語義化’標記語言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官網_

---

2、優點比較

值得注意的是，mpvue提供vuex進行數據狀態管理，能知足複雜應用狀態管理需求，這是其餘框架都不具有的！

3、新建項目

1. 經過 Vue.js 命令行工具 vue-cli，你只需在終端窗口輸入幾條簡單命令，便可快速建立和啓動一個帶熱重載、保存時靜態檢查、內置代碼構建功能的小程序項目
2. 建立完以後，在命令行執行：
   npm run dev
   編譯成功後，用微信開發者工具打開webpack打包後的dist文件，便可進行開發了；
3. 項目文件結構：
   
   ------------

小提示：

安裝mpvue項目利用vue-cli腳手架工具，選擇了對應的mpvue的模板，在安裝過程當中，cli腳手架工具會提醒您是否須要安裝Vuex，，我建議您根據項目需求確認是否添加該配置，由於這裏安裝Vuex，工具根據vue模板會幫你自動搭建依賴關係而且轉義後兼容小程序，若是您想在項目開發中添加Vux就要注意了，在安裝過程當中極有可能報錯，因爲mpvue開源時間較短，參考資料也頗有限，爲了不沒必要要的麻煩，建議在搭建項目時就安裝Vuex。

4、生命週期比較

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 支持）

這是生命週期的調用關係和順序圖。

5、使用總結

（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
}