快速瞭解 mpvue 開發小程序

1、概念

mpvue是 美團修改了 Vue.js的 runtime和 compiler使其能夠運行在小程序環境中，從而引入了整套 Vue.js開發體驗的小程序框架。

2、優化細節

一、實例生命週期

不一樣於vue的是咱們會在小程序 onReady 後，再去觸發 vue mounted 生命週期

除了 Vue 自己的生命週期外（詳細的 vue 生命週期文檔請看生命週期鉤子），mpvue 還兼容了小程序生命週期，這部分生命週期鉤子的來源於微信小程序的 Page， 除特殊狀況外，不建議使用小程序的生命週期鉤子。

二、模板語法

幾乎全支持 官方文檔：模板語法，但須要注意的是：

（1）組件：因爲要預編譯出 wxml，只能使用單文件組件（.vue 組件）的形式進行支持，不支持：動態組件，異步組件，自定義 render，inline-template，X-Templates，<script type="text/x-template">字符串模版，Slot（scoped 暫時還沒作支持）。

（2）不要在選項屬性或回調上使用箭頭函數，.eg：

//箭頭函數是和父級上下文綁定在一塊兒的，this 不會是如你作預期的 Vue 實例，且 this.a 或 this.myMethod 也會是未定義的
created: () => console.log(this.a)
vm.$watch('a', newValue => this.myMethod())

（3） 頁面內能夠經過 this.$root.$mp.query（須要在 onLoad生命週期觸發以後使用）獲取小程序在 page onLoad 時候傳遞的 options（如：query參數等）。組件內經過** this.$root.$mp.appOptions**獲取小程序在 app的 onLaunch/onShow 時候傳遞的 options，.eg：

//pages/list/index.vue
methods:{
      toNewsDetail(item) {
        let url = `/pages/newsDetail/main?newsId=${item.id}`;
        wx.navigateTo({url})
      }
}

//pages/detail/index.vue

  onReady() {
      this.getNewsDetail({
        id: this.$root.$mp.query.newsId//獲取URL傳來的參數
      });
  },

（4）mpvue 能夠支持小程序的原生組件，建議開發過程當中直接使用 微信小程序：表單組件，.eg：

<picker mode="date" :value="date" start="2015-09-01" end="2017-09-01" @change="bindDateChange"><!--須要注意的是原生組件上的事件綁定，須要以 vue 的事件綁定語法來綁定，如 bindchange="eventName" 事件，須要寫成 @change="eventName"-->
    <view class="picker">
      當前選擇: {{date}}
    </view>
</picker>

（5）列表渲染，嵌套列表渲染，必須指定不一樣的索引。示例：

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

（6）事件處理器

• 列表中沒有的原生事件也可使用例如 bindregionchange 事件直接在 dom 上將bind改成@ @regionchange,同時這個事件也很是特殊，它的 event type 有 begin 和 end 兩個，致使咱們沒法在handleProxy中區分究竟是什麼事件，因此你在監聽此類事件的時候同時監聽事件名和事件類型既 <map @regionchange="functionName" @end="functionName" @begin="functionName"><map>
• bind 和 catch 事件（.stop阻止冒泡）同時綁定時，只觸發 bind ,catch 不會被觸發。
• 小程序裏沒有鍵盤事件(鍵盤修飾符)，默認(.prevent)事件，removeEventListener(.once)事件，.self沒有能夠判斷的標識
• .capture（ 1.0.9支持）使用捕獲

// 事件映射表，左側爲 WEB 事件，右側爲 小程序 對應事件
{
    click: 'tap',
    touchstart: 'touchstart',
    touchmove: 'touchmove',
    touchcancel: 'touchcancel',
    touchend: 'touchend',
    tap: 'tap',
    longtap: 'longtap',
    input: 'input',
    change: 'change',//在 input 和 textarea 中 change 事件會被轉爲 blur 事件
    submit: 'submit',
    blur: 'blur',
    focus: 'focus',
    reset: 'reset',
    confirm: 'confirm',
    columnchange: 'columnchange',
    linechange: 'linechange',
    error: 'error',
    scrolltoupper: 'scrolltoupper',
    scrolltolower: 'scrolltolower',
    scroll: 'scroll'
}

（7）由於編譯到 wxml，小程序不會生成節點，暫不支持在組件上定義 click 等原生事件、v-show（可用 v-if 代替）和 class、 style 等樣式屬性。

<!--不生效，建議寫在內部頂級元素上-->
<card class="class-name"> </card>
<card :style="{height:10+'px'}"> </card>
<card @click="clickFun"> </card>
<card v-show="showIf"> </card>//可用 v-if 代替

（8）不支持在 template 內使用 部分複雜的 JavaScript 渲染表達式，methods 中的函數，過濾器，v-html指令。咱們會把 template 中的 {{}}雙花括號的部分，直接編碼到 wxml 文件中，因爲微信小程序的能力限制(數據綁定)，因此沒法支持複雜的 JavaScript 表達式。目前可使用的有 + - * % ?: ! == === > < [] .，剩下的還待完善。

<!-- 這種就不支持，建議寫 computed -->
<p>{{ message.split('').reverse().join('') }}</p>

<!-- 但寫在 @event 裏面的表達式是都支持的，由於這部分的計算放在了 vdom 裏面 -->
<ul>
    <li v-for="item in list">
        <div @click="clickHandle(item, index, $event)">{{ item.value }}</p>
    </li>
</ul>

（9）不支持keep-alive、transition

（10）不支持 官方文檔：Class 與 Style 綁定中的 classObject和 styleObject語法。能夠用 computed 方法生成 class 或者 style 字符串，從性能考慮，建議不要過分使用

<template>
    <!-- 支持 -->
    <div class="container" :class="computedClassStr"></div>
    <div class="container" :class="{active: isActive}"></div>

    <!-- 不支持 -->
    <div class="container" :class="computedClassObject"></div>
</template>
<script>
    export default {
        data () {
            return {
                isActive: true
            }
        },
        computed: {
            computedClassStr () {
                return this.isActive ? 'active' : ''
            },
            computedClassObject () {
                return { active: this.isActive }
            }
        }
    }
</script>

三、注意事項

（1）開啓單個頁面的「下拉刷新」，你須要在該頁面文件夾中建一個.json文件，在.json文件中配置

{
  "enablePullDownRefresh":true
}

（2）若是你先全局註冊store，你須要先在src/main裏添加在註冊到vue實例中：

Vue.prototype.$store = store

（3）底部導航的圖片你須要放在static文件夾下，不然不會正常顯示

（3）精簡 data 數據。冗餘數據不要掛在 data 裏，全部在 data/props/computed 中的數據，每次變動都會從微信小程序的 JSCore 進程，經過 setData 序列化成字符串後發送到 JSRender 進程。因此，若是你的數據量巨大的時候，會致使頁面很是卡頓。

（4） 優化長列表性能

• 避免在 v-for 中嵌套子組件，這樣能夠優化大部分部分 setData 時的冗餘數據。
• 經過實踐發現 wx:if 和 hidden 的優化肉眼不可見，因此或許能夠試試直接經過樣式 display 來展現和隱藏。

（5）建議使用 v-model.lazy綁定方式以優化性能，v-model在老基礎庫下輸入框輸入時可能存在光標重設的問題。

（6）若是你有小程序和H5複用代碼的須要，業務代碼須要保持對 WEB Vue.js的兼容性，建議不要在代碼中直接調用小程序API，更好的選擇是經過橋接適配層屏蔽兩端差別。

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

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

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

2、使用

經過 Vue.js命令行工具 vue-cli，你只需在終端窗口輸入幾條簡單命令，便可快速建立和啓動一個帶熱重載、保存時靜態檢查、內置代碼構建功能的小程序項目：

npm install --global vue-cli//全局安裝vue-cli，若是你已安裝@vue/cli，你須要拉取2.x模板：npm install -g @vue/cli-int
vue init mpvue/mpvue-quickstart <project name>//建立一個基於 mpvue-quickstart 模板的新項目
cd my-project //進入項目目錄
npm install //安裝依賴
npm run dev //啓動構建

若是使用vue cli 3先拉取 2.x 模板（詳情參考本人博客：https://my.oschina.net/wangnian/blog/2051369）：

而後：安裝npm包，運行