使用mpVue構建小程式

ShariseMo發表於2018-05-03
Vue

原理

mpVue是使用vue.js來開發小程式的一個前端框架。框架基於vue.js核心，改寫了vue.js的runtime和compiler實現，使其可以執行在小程式環境中。

  • mpvue 保留了 vue.runtime 核心方法，無縫繼承了 Vue.js 的基礎能力
  • mpvue-template-compiler 提供了將 vue 的模板語法轉換到小程式的 wxml 語法的能力
  • 修改了 vue 的建構配置，使之構建出符合小程式專案結構的程式碼格式： json/wxml/wxss/js 檔案

好處

使用 mpvue 開發小程式，你將在相比開發原生小程式技術體系的基礎上獲取到這樣一些能力：

  • 徹底的元件化開發能力：提高程式碼複用性   【比較大的一個好處是構建元件方便很多】
  • 完整的 Vue.js 開發體驗  【對於本來熟悉vue.js的開發者來說會更容易上手】
  • 方便的 Vuex 資料管理方案：方便構建複雜應用  【這個其實跟小程式原生的globalData有點相類似，筆者覺得globalData或者setStorage()可能更好用】
  • 快捷的 webpack 構建機制：自定義構建策略、開發階段 hotReload  
  • 支援使用 npm 外部依賴 【目前有很多外掛都沒有小程式版本的，用npm依賴還是比較方便的，但是要注意可能支援性不一定很好】
  • 使用 Vue.js 命令列工具 vue-cli 快速初始化專案  【小程式本身的初始化專案也比較快】
  • H5 程式碼轉換編譯成小程式目的碼的能力
  • 可以使用sass，less等css擴充套件語言，提高樣式書寫效率

生命週期

1、原生小程式生命週期

App()

onLaunchFunction生命週期函式--監聽小程式初始化當小程式初始化完成時，會觸發 onLaunch（全域性只觸發一次）
onShowFunction生命週期函式--監聽小程式顯示當小程式啟動，或從後臺進入前臺顯示，會觸發 onShow
onHideFunction生命週期函式--監聽小程式隱藏當小程式從前臺進入後臺，會觸發 onHide
onErrorFunction錯誤監聽函式當小程式發生指令碼錯誤，或者 api 呼叫失敗時，會觸發 onError 並帶上錯誤資訊
onPageNotFoundFunction頁面不存在監聽函式當小程式出現要開啟的頁面不存在的情況，會帶上頁面資訊回撥該函式，詳見下文
其他Any開發者可以新增任意的函式或資料到 Object 引數中，用 this 可以訪問


全域性的 getApp() 函式可以用來獲取到小程式例項。

// other.js
var app= getApp()
console.log(app.globalData) // I am global data複製程式碼

Page() 函式用來註冊一個頁面。接受一個 object 引數，其指定頁面的初始資料、生命週期函式、事件處理函式等。

object 引數說明：

屬性型別描述
dataObject頁面的初始資料
onLoadFunction生命週期函式--監聽頁面載入
onReadyFunction生命週期函式--監聽頁面初次渲染完成
onShowFunction生命週期函式--監聽頁面顯示
onHideFunction生命週期函式--監聽頁面隱藏
onUnloadFunction生命週期函式--監聽頁面解除安裝
onPullDownRefreshFunction頁面相關事件處理函式--監聽使用者下拉動作
onReachBottomFunction頁面上拉觸底事件的處理函式
onShareAppMessageFunction使用者點選右上角轉發
onPageScrollFunction頁面滾動觸發事件的處理函式
onTabItemTapFunction當前是 tab 頁時，點選 tab 時觸發
其他Any開發者可以新增任意的函式或資料到 object 引數中，在頁面的函式中用 this 可以訪問
2、vue.js生命週期

使用mpVue構建小程式

3、mpVue的生命週期

同 vue，不同的是我們會在小程式 onReady 後，再去觸發 vue mounted 生命週期

  • beforeCreate
  • created
  • beforeMount
  • mounted
  • beforeUpdate
  • updated
  • activated
  • deactivated
  • beforeDestroy
  • destroyed

除了 Vue 本身的生命週期外，mpvue 還相容了小程式生命週期，這部分生命週期鉤子的來源於微信小程式的 Page， 除特殊情況外，不建議使用小程式的生命週期鉤子。

注意點：

  1. 不要在選項屬性或回撥上使用箭頭函式，比如 created: () => console.log(this.a) 或 vm.$watch('a', newValue => this.myMethod())。因為箭頭函式是和父級上下文繫結在一起的，this 不會是如你做預期的 Vue 例項，且 this.a 或 this.myMethod 也會是未定義的。

  2. 微信小程式的頁面的 query 引數是通過 onLoad 獲取的，mpvue 對此進行了優化，直接通過 this.$root.$mp.query 獲取相應的引數資料，其呼叫需要在 onLoad 生命週期觸發之後使用，比如 onShow 等



相關文章