mpvue將vue專案轉換為小程式
一、mpvue簡介
mpvue:是由美團點評團隊出品的小程式開發的一款基於vue的框架，從整個Vue的核心程式碼上經過二次開發而形成的一個框架，相當於是給Vue本身賦能，增加了開發微信小程式的能力。
使用mpvue開發小程式，你將在小程式技術體系的基礎上獲取到這樣一些能力：
l 徹底的元件化開發能力：提高程式碼
l 完整的 Vue.js 開發體驗
l 方便的 Vuex 資料管理方案：方便構建複雜應用
l 快捷的 webpack 構建機制：自定義構建策略、開發階段 hotReload
l 支援使用 npm 外部依賴
l 使用 Vue.js 命令列工具 vue-cli 快速初始化專案
l H5 程式碼轉換編譯成小程式目的碼的能力
它的目標是：在未來最理想的狀態下，可以一套程式碼可以直接跑在多端：WEB、微信小程式、支付寶小程式、Native（藉助weex）。不過由於各個端之間都存在一些比較明顯的差異性，從產品的層面上講，不建議這麼做，這個框架的官方他們對它的期望的也只是開發和除錯體驗的一致
原生微信小程式、mpvue、WePY這三種開發小程式方式的比較
二、mpvue開發流程
1、小程式賬號配置
1）前往https://mp.weixin.qq.com/wxopen/waregister?action=step1根據指引填寫資訊和提交相應的資料，申請小程式帳號。在選單 “設定”-“開發設定”獲取小程式的 AppID 。
2）在選單 “設定”-“開發設定”中配置伺服器域名，必須是https開頭的域名
2、安裝開發工具
前往 開發者工具下載頁面 ，根據自己的作業系統下載對應的安裝包進行安裝，有關開發者工具更詳細的介紹可以檢視 《開發者工具介紹》 。
開啟小程式開發者工具，用微信掃碼登入開發者工具，準備開發小程式。
3、mpvue生成專案
# 全域性安裝 vue-cli
$ npm install --global vue-cli
# 建立一個基於 mpvue-quickstart 模板的新專案
$ vue init mpvue/mpvue-quickstart my-project
# 安裝依賴
$ cd my-project
$ npm install
# 啟動構建
$ npm run dev
Npm run dev執行成功後，本地目錄下會生成一個dist檔案，這個檔案就是生成的小程式相關程式碼。
在小程式中新建專案，填寫上一步獲取的appid，便於後面可以在手機上預覽，真機測試，小程式的檔案目錄就是本地專案目錄的dist檔案。
三、mpvue開發中的規範
1、生命週期函式
除了vue本身的生命週期外，mpvue還相容了小程式的生命週期，
app 部分：
onLaunch，初始化
onShow，當小程式啟動，或從後臺進入前臺顯示
onHide，當小程式從前臺進入後臺
page 部分：
onLoad，監聽頁面載入
onShow，監聽頁面顯示
onReady，監聽頁面初次渲染完成
onHide，監聽頁面隱藏
onUnload，監聽頁面解除安裝
onPullDownRefresh，監聽使用者下拉動作
onReachBottom，頁面上拉觸底事件的處理函式
onShareAppMessage，使用者點選右上角分享
onPageScroll，頁面滾動
onTabItemTap, 當前是 tab 頁時，點選 tab 時觸發 （mpvue 0.0.16 支援）
注意點：
created：這個鉤子是有bug的，所有頁面的created函式會在專案載入的時候被一起呼叫，而且進入頁面的時候不會在被呼叫，所以這個函式基本就不能使用了，用小程式的onLoad鉤子代替
mounted：你如果從頁面B返回頁面A，頁面A的mounted鉤子不會被觸發，因為頁面沒有被重新載入，如果有需要每次頁面展示都要呼叫的邏輯，使用小程式的onShow代替
2、mpvue轉換的部分規則
1) 微信小程式的頁面的 query 引數是通過 onLoad 獲取的，mpvue 對此進行了優化，直接通過 this.$root.$mp.query 獲取相應的引數資料
2) 小程式裡所有的 BOM／DOM 都不能用，因此v-html、v-text不能用。
el：this.$refs...styles.width=offsetWIdth --> :style="{'width':offsetWidth}"
獲取節點資訊，
wx.createSelectorQuery().select(className).boundingClientRect().exec(res=>{
在此處獲取到節點的資訊：left,top,width,height})
3) 不支援部分複雜的 JavaScript 渲染表示式，我們會把 template 中的 {{}} 雙花括號的部分，直接編碼到 wxml 檔案中，由於微信小程式的能力限制(資料繫結)，所以無法支援複雜的 JavaScript 表示式。
目前可以使用的有 + - * % ?: ! == === > < [] .，剩下的還待完善。
<!-- 這種就不支援，建議寫 computed -->
<p>{{ message.split('').reverse().join('') }}</p>
4） 不支援過濾器，渲染部分會轉成 wxml ，wxml 不支援過濾器，所以這部分功能不支援。
5） 不支援在 template 內使用 methods 中的函式。
6） 不支援 官方文件：Class 與 Style 繫結 中的 classObject 和 styleObject 語法。
<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>
7） 不支援在元件上使用 Class 與 Style 繫結，將class與style繫結在元件最外層div上
8） 列表渲染需要注意一點，巢狀列表渲染，必須指定不同的索引！
<!-- 在這種巢狀迴圈的時候， index 和 itemIndex 這種索引是必須指定，且別名不能相同，正確的寫法如下 -->
<template>
<ul v-for="(card, index) in list">
<li v-for="(item, itemIndex) in card">
{{item.value}}
</li>
</ul>
</template>
9) 小程式不支援路由，因此，路由跳轉使用小程式的頁面導航api代替
this.$router.push-->wx.navigateTo() //進入子頁面
this.$router.replace-->wx.reLaunch()//開啟新頁面
10） 獲取當前頁面地址
this.$route.fullPath-->getCurrentPages()[0].route
11） 介面返回引數結構調整，小程式的request請求介面返回的資料會在外層新增一個data
res:{
res:{ data:{
code:'000000', --> code:'000000',
data:{...} data:{...}
} }
}
12） 不支援本地圖片用作背景圖，可以使用網路圖片、或者base64，或者使用img、image標籤
13） 上拉載入/下拉重新整理，選用小程式的全域性api，scroll-view中無法使用
14） 不支援css媒體查詢，css樣式避免標籤選擇器，不易於維護
15） mpvue-wxParse富文字解析
1）安裝npm i mpvue-wxparse
2)元件內
<template>
<wxParse :content="article" />
</template>
<script>
import wxParse from 'mpvue-wxparse'
components: {wxParse},
</script>
<style>
@import url("~mpvue-wxparse/src/wxParse.css");
</style>