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>