使用mpvue開發小程序須要注意和了解的知識點

1、實例生命週期

除了Vue自己的生命週期處，mpvue還兼容了小程序的生命週期，這部分生命週期的鉤子來源於微信小程序的Page,除特殊狀況外，不建議使用小程序的生命週期鉤子。

app 部分：

• onLaunch，初始化
• onShow，當小程序啓動，或從後臺進入前臺顯示
• onHide，當小程序從前臺進入後臺

page 部分：

• onLoad，監聽頁面加載
• onShow，監聽頁面顯示
• onReady，監聽頁面初次渲染完成
• onHide，監聽頁面隱藏
• onUnload，監聽頁面卸載
• onPullDownRefresh，監聽用戶下拉動做
• onReachBottom，頁面上拉觸底事件的處理函數
• onShareAppMessage，用戶點擊右上角分享
• onPageScroll，頁面滾動
• onTabItemTap, 當前是 tab 頁時，點擊 tab 時觸發 （mpvue 0.0.16 支持）

用法示例：

new Vue({
  data: {
    a: 1
  },
  created () {
    // `this` 指向 vm 實例
    console.log('a is: ' + this.a)
  },
  onShow () {
    // `this` 指向 vm 實例
    console.log('a is: ' + this.a, '小程序觸發的 onshow')
  }
})
// => "a is: 1"

注意點：

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 等

2、模板語法

不支持 純-HTML

小程序裏全部的 BOM／DOM 都不能用，也就是說 v-html 指令不能用。

不支持部分複雜的 JavaScript 渲染表達式

咱們會把 template 中的 {{}} 雙花括號的部分，直接編碼到 wxml 文件中，因爲微信小程序的能力限制(數據綁定)，因此沒法支持複雜的 JavaScript 表達式。

目前能夠使用的有 + - * % ?: ! == === > < [] .，剩下的還待完善。

不支持過濾器

渲染部分會轉成 wxml ，wxml 不支持過濾器，因此這部分功能不支持。

不支持函數

不支持在 template 內使用 methods 中的函數。

列表渲染

全支持 官方文檔：列表渲染

只是須要注意一點，嵌套列表渲染，必須指定不一樣的索引！

<!-- 在這種嵌套循環的時候， index 和 itemIndex 這種索引是必須指定，且別名不能相同，正確的寫法以下 -->
<template>
    <ul v-for="(card, index) in list">
        <li v-for="(item, itemIndex) in card">
            {{item.value}}
        </li>
    </ul>
</template>

事件處理器

在 input 和 textarea 中 change 事件會被轉爲 blur 事件。

踩坑注意：

• 列表中沒有的原生事件也能夠使用例如 bindregionchange 事件直接在 dom 上將bind改成@
  @regionchange,同時這個事件也很是特殊，它的 event type 有 begin 和 end
  兩個，致使咱們沒法在handleProxy 中區分究竟是什麼事件，因此你在監聽此類事件的時候同時監聽事件名和事件類型既

  <map @regionchange="functionName" @end="functionName" @begin="functionName"><map>

• 小程序能力所致，bind 和 catch 事件同時綁定時候，只會觸發 bind ,catch 不會被觸發，要避免踩坑。

• 事件修飾符

  - .stop 的使用會阻止冒泡，可是同時綁定了一個非冒泡事件，會致使該元素上的 catchEventName 失效！

  • .prevent 能夠直接幹掉，由於小程序裏沒有什麼默認事件，好比submit並不會跳轉頁面
  • .capture 支持 1.0.9
  • .self 沒有能夠判斷的標識
  • .once 也不能作，由於小程序沒有 removeEventListener, 雖然能夠直接在 handleProxy 中處理，但很是的不優雅，違背了原意，暫不考慮
• 其餘 鍵值修飾符 等在小程序中壓根沒鍵盤，因此。。。

3、組件

有且只能使用單文件組件（.vue 組件）的形式進行支持。其餘的諸如：動態組件，自定義 render，和<script type="text/x-template"> 字符串模版等都不支持。緣由很簡單，由於咱們要預編譯出 wxml。

詳細的不支持列表：

• 暫不支持在組件引用時，在組件上定義 click 等原生事件、v-show（可用 v-if 代替）和 class style 等樣式屬性(例：<card class="class-name"> </card> 樣式是不會生效的)，由於編譯到wxml，小程序不會生成節點，建議寫在內部頂級元素上。
• Slot（scoped 暫時還沒作支持）
• 動態組件
• 異步組件
• inline-template
• X-Templates
• keep-alive
• transition
• class
• style

小程序組件

mpvue 能夠支持小程序的原生組件，好比： picker,map 等，須要注意的是原生組件上的事件綁定，須要以 vue 的事件綁定語法來綁定，如 bindchange="eventName" 事件，須要寫成 @change="eventName"

示例代碼：

<picker mode="date" :value="date" start="2015-09-01" end="2017-09-01" @change="bindDateChange">
    <view class="picker">
      當前選擇: {{date}}
    </view>
</picker>

4、常見問題

1. 如何獲取小程序在 page onLoad 時候傳遞的 options

在全部 頁面 的組件內能夠經過 this.$root.$mp.query 進行獲取。

2. 如何獲取小程序在 app onLaunch/onShow 時候傳遞的 options

在全部的組件內能夠經過 this.$root.$mp.appOptions 進行獲取。

3. 如何捕獲 app 的 onError

因爲 onError 並非完整意義的生命週期，因此只提供一個捕獲錯誤的方法，在 app 的根組件上添加名爲 onError 的回調函數便可。以下：

export default {
   // 只有 app 纔會有 onLaunch 的生命週期
   onLaunch () {
       // ...
   },

   // 捕獲 app error
   onError (err) {
       console.log(err)
   }
}

願你成爲終身學習者