整合營銷服務(wù)商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
mpvue是 美團 修改了 Vue.js 的 runtime 和 compiler 使其可以運行在小程序環(huán)境中，從而引入了整套 Vue.js 開發(fā)體驗的小程序框架。
1、實例生命周期
不同于vue的是我們會在小程序 onReady 后，再去觸發(fā) vue mounted 生命周期
除了 Vue 本身的生命周期外（詳細的 vue 生命周期文檔請看生命周期鉤子），mpvue 還兼容了小程序生命周期，這部分生命周期鉤子的來源于微信小程序的 Page， 除特殊情況外，不建議使用小程序的生命周期鉤子。
2、模板語法
幾乎全支持 官方文檔：模板語法，但需要注意的是：
（1）組件：由于要預(yù)編譯出 wxml，只能使用單文件組件（.vue 組件）的形式進行支持，不支持：動態(tài)組件，異步組件，自定義 render，inline-template，X-Templates，<script type="text/x-template"> 字符串模版，Slot（scoped 暫時還沒做支持）。
（2）不要在選項屬性或回調(diào)上使用箭頭函數(shù)，.eg：
//箭頭函數(shù)是和父級上下文綁定在一起的，this 不會是如你做預(yù)期的 Vue 實例，且 this.a 或 this.myMethod 也會是未定義的
created: () => console.log(this.a)
vm.$watch('a', newValue => this.myMethod())
（3） 頁面 內(nèi)可以通過 this.$root.$mp.query （需要在 onLoad 生命周期觸發(fā)之后使用）獲取小程序在 page onLoad 時候傳遞的 options（如：query 參數(shù)等）。組件內(nèi)通過** this.$root.$mp.appOptions**獲取小程序在 app的 onLaunch/onShow 時候傳遞的 options
（4）mpvue 可以支持小程序的原生組件，建議開發(fā)過程中直接使用 微信小程序：表單組件，.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）列表渲染，嵌套列表渲染，必須指定不同的索引。示例：
<!-- 在這種嵌套循環(huán)的時候， index 和 itemIndex 這種索引是必須指定，且別名不能相同，正確的寫法如下 -->
<template>
<ul v-for="(card, index) in list">
<li v-for="(item, itemIndex) in card">
{{item.value}}
</li>
</ul>
</template>
（6）事件處理器
// 事件映射表，左側(cè)為 WEB 事件，右側(cè)為 小程序 對應(yīng)事件
{
click: 'tap',
touchstart: 'touchstart',
touchmove: 'touchmove',
touchcancel: 'touchcancel',
touchend: 'touchend',
tap: 'tap',
longtap: 'longtap',
input: 'input',
change: 'change',//在 input 和 textarea 中 change 事件會被轉(zhuǎn)為 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，小程序不會生成節(jié)點，暫不支持在組件上定義 click 等原生事件、v-show（可用 v-if 代替）和 class、 style 等樣式屬性。
<!--不生效，建議寫在內(nèi)部頂級元素上-->
<card class="class-name"> </card>
<card :style="{height:10+'px'}"> </card>
<card @click="clickFun"> </card>
<card v-show="showIf"> </card>//可用 v-if 代替
（8）不支持在 template 內(nèi)使用 部分復(fù)雜的 JavaScript 渲染表達式，methods 中的函數(shù)，過濾器，v-html 指令。我們會把 template 中的 {{}} 雙花括號的部分，直接編碼到 wxml 文件中，由于微信小程序的能力限制(數(shù)據(jù)綁定)，所以無法支持復(fù)雜的 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>
3、注意事項
（1）開啟單個頁面的“下拉刷新”，你需要在該頁面文件夾中建一個.json文件，在.json文件中配置
{
"enablePullDownRefresh":true
}
（2）如果你先全局注冊store，你需要先在src/main里添加在注冊到vue實例中：
Vue.prototype.$store = store
（3）底部導(dǎo)航的圖片你需要放在static文件夾下，否則不會正常顯示
（3）精簡 data 數(shù)據(jù)。冗余數(shù)據(jù)不要掛在 data 里，所有在 data/props/computed 中的數(shù)據(jù)，每次變更都會從微信小程序的 JSCore 進程，通過 setData 序列化成字符串后發(fā)送到 JSRender 進程。所以，如果你的數(shù)據(jù)量巨大的時候，會導(dǎo)致頁面非常卡頓。
（4） 優(yōu)化長列表性能
（5）建議使用 v-model.lazy 綁定方式以優(yōu)化性能，v-model 在老基礎(chǔ)庫下輸入框輸入時可能存在光標重設(shè)的問題。
（6）如果你有小程序和H5復(fù)用代碼的需要，業(yè)務(wù)代碼需要保持對 WEB Vue.js 的兼容性，建議不要在代碼中直接調(diào)用小程序API，更好的選擇是通過橋接適配層屏蔽兩端差異。
（7）如何捕獲 app 的 onError。由于 onError 并不是完整意義的生命周期，所以只提供一個捕獲錯誤的方法，在 app 的根組件上添加名為 onError 的回調(diào)函數(shù)即可。如下：
export default {
// 只有 app 才會有 onLaunch 的生命周期
onLaunch () {
// ...
},
// 捕獲 app error
onError (err) {
console.log(err)
}
}
通過 Vue.js 命令行工具 vue-cli，你只需在終端窗口輸入幾條簡單命令，即可快速創(chuàng)建和啟動一個帶熱重載、保存時靜態(tài)檢查、內(nèi)置代碼構(gòu)建功能的小程序項目：
npm install --global vue-cli//全局安裝vue-cli，如果你已安裝@vue/cli，你需要拉取2.x模板：npm install -g @vue/cli-int vue init mpvue/mpvue-quickstart <project name>//創(chuàng)建一個基于 mpvue-quickstart 模板的新項目 cd my-project //進入項目目錄 npm install //安裝依賴 npm run dev //啟動構(gòu)建
如果使用vue cli 3先拉取 2.x 模板（詳情參考本人博客：https://my.oschina.net/wangnian/blog/2051369）：
然后：安裝npm包，運行
本文出處：王念博客。? 著作權(quán)歸作者所有；如有侵權(quán)，請聯(lián)系刪除。
篇文章給大家?guī)淼膬?nèi)容是關(guān)于mpvue中小程序自定義導(dǎo)航組件開發(fā)的介紹（代碼示例），有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。
這篇筆記主要記錄一下基于mpvue的小程序中實現(xiàn)自定義導(dǎo)航的思路及應(yīng)用。分享出來拋磚引玉，如有謬誤或優(yōu)化空間，歡迎交流。
小程序的配置項navigationStyle設(shè)置為custom之后，導(dǎo)航欄只保留右上角膠囊按鈕，顏色、標題文字內(nèi)容均可以自定義，可以此實現(xiàn)導(dǎo)航欄的個性化需求，實際應(yīng)用如沉浸式視頻播放頁等。
小程序7.0.0之后的版本開始支持自定義單個頁面的導(dǎo)航欄，將頁面的navigationStyle設(shè)置為custom即可。mpvue的配置方式如下：
由于不同操作系統(tǒng)、不同機型的導(dǎo)航欄高度是不同的，所以自定義導(dǎo)航欄核心要解決的問題是不同機型中導(dǎo)航欄高度的兼容問題。
如上圖所示，導(dǎo)航欄一共由兩部分組成：狀態(tài)欄和標題欄。狀態(tài)欄就是用來展示時間、網(wǎng)絡(luò)狀態(tài)的那一欄，全面屏（劉海屏幕）的機型中狀態(tài)欄會比其他屏幕高很多：ios系統(tǒng)帶劉海屏的都是44，其他都為20,包括pad。 而安卓機的數(shù)值則更多。我們可以通過微信的apiwx.getSystemInfo獲取狀態(tài)欄的高度（statusBarHeight）。而標題欄高度不能通過小程序api獲取到，通過同級多個機型的測試數(shù)據(jù)，我們基本可以按照ios中44px安卓中48px來算。
這樣一來就好辦了，通過statusBarHeight獲取到狀態(tài)欄高度后，再判斷當前的系統(tǒng)加上對應(yīng)的標題欄后，就可以獲取到正確的導(dǎo)航欄高度了。
template中的html代：（因為小程序中的video組件有著最高的層級，是不會被普通html標簽覆蓋的，所以導(dǎo)航欄組件中全部采用了<cover-view>標簽。）：
<template>
<p class="comp-navbar">
<!-- 占位欄 -->
<cover-view class="placeholder-bar" :style="{height: navBarHeight + 'px'}"> </cover-view>
<!-- 導(dǎo)航欄主體 -->
<cover-view class="navbar" :style="{height: navBarHeight + 'px',backgroundColor:navBackgroundColor}">
<!-- 狀態(tài)欄 -->
<cover-view class="nav-statusbar" :style="{height: statusBarHeight + 'px'}"></cover-view>
<!-- 標題欄 -->
<cover-view class="nav-titlebar" :style="{height: titleBarHeight + 'px' }">
<!-- home及后退鍵 -->
<cover-view class="bar-options">
<cover-view v-if="backVisible" class="opt opt-back" @click="backClick()">
<cover-image class="back-image" src="/static/images/back.png"></cover-image>
</cover-view>
<cover-view class="line" v-if="backVisible && homePath"></cover-view>
<cover-view v-if="homePath" class="opt opt-home" @click="homeClick()">
<cover-image class="home-image" src="/static/images/home.png"></cover-image>
</cover-view>
</cover-view>
<!-- 標題 -->
<cover-view class="bar-title" :style="[{color:titleColor}]">{{title}}</cover-view>
</cover-view>
</cover-view>
</p>
</template>
js代碼：
beforeMount() {
const self = this;
wx.getSystemInfo({
success(system) {
console.log(`system:`, system);
self.statusBarHeight = system.statusBarHeight;
self.platform = system.platform;
let platformReg = /ios/i;
if (platformReg.test(system.platform)) {
self.titleBarHeight = 44;
} else {
self.titleBarHeight = 48;
}
self.navBarHeight = self.statusBarHeight + self.titleBarHeight;
}
});
},
自定義導(dǎo)航欄的可自定義內(nèi)容：標題文字、文字顏色、標題欄背景色、回退按鈕是否顯示、home按鈕的地址。示例代碼如下：
<navigation-bar :title="videoTitle"
:navBackgroundColor="'pink'"
:titleColor="'green'"
:back-visible="true"
:home-path="'/pages/index/main'"></navigation-bar>
本文參考：微信小程序開發(fā)基礎(chǔ)教程 https://www.html.cn/study/20.html
以上就是mpvue中小程序自定義導(dǎo)航組件開發(fā)的介紹（代碼示例）的詳細內(nèi)容，更多請關(guān)注其它相關(guān)文章！
更多技巧請《轉(zhuǎn)發(fā) + 關(guān)注》哦！
藍字“CSDN云計算”關(guān)注我們哦！
作者 | 成全
責(zé)編 | 阿禿
轉(zhuǎn)自 | 美團技術(shù)團隊企業(yè)博客
前言
mpvue是一款使用Vue.js開發(fā)微信小程序的前端框架。使用此框架，開發(fā)者將得到完整的 Vue.js 開發(fā)體驗，同時為H5和小程序提供了代碼復(fù)用的能力。如果想將 H5 項目改造為小程序，或開發(fā)小程序后希望將其轉(zhuǎn)換為H5，mpvue將是十分契合的一種解決方案。
目前，mpvue已經(jīng)在美團點評多個實際業(yè)務(wù)項目中得到了驗證，因此我們決定將其開源，希望更多技術(shù)同行一起開發(fā)，應(yīng)用到更廣泛的場景里去。github項目地址請參見mpvue 。使用文檔請參見 http://mpvue.com/。
為了幫助大家更好的理解mpvue的架構(gòu)，接下來我們來解析框架的設(shè)計和實現(xiàn)思路。文中主要內(nèi)容已經(jīng)發(fā)表在《程序員》雜志2017年第9期小程序專題封面報道，內(nèi)容略有修改。
小程序開發(fā)特點
微信小程序推薦簡潔的開發(fā)方式，通過多頁面聚合完成輕量的產(chǎn)品功能。小程序以離線包方式下載到本地，通過微信客戶端載入和啟動，開發(fā)規(guī)范簡潔，技術(shù)封裝徹底，自成開發(fā)體系，有Native和H5的影子，但又絕不雷同。
小程序本身定位為一個簡單的邏輯視圖層框架，官方并不推薦用來開發(fā)復(fù)雜應(yīng)用，但業(yè)務(wù)需求卻難以做到精簡。復(fù)雜的應(yīng)用對開發(fā)方式有較高的要求，如組件和模塊化、自動構(gòu)建和集成、代碼復(fù)用和開發(fā)效率等，但小程序開發(fā)規(guī)范較大的限制了這部分能力。為了解決上述問題，提供更好的開發(fā)體驗，我們創(chuàng)造了mpvue，通過使用Vue.js來開發(fā)微信小程序。
mpvue是什么
mpvue是一套定位于開發(fā)小程序的前端開發(fā)框架，其核心目標是提高開發(fā)效率，增強開發(fā)體驗。使用該框架，開發(fā)者只需初步了解小程序開發(fā)規(guī)范、熟悉Vue.js基本語法即可上手?？蚣芴峁┝送暾?Vue.js 開發(fā)體驗，開發(fā)者編寫Vue.js代碼，mpvue 將其解析轉(zhuǎn)換為小程序并確保其正確運行。此外，框架還通過 vue-cli 工具向開發(fā)者提供quick start 示例代碼，開發(fā)者只需執(zhí)行一條簡單命令，即可獲得可運行的項目。
為什么做mpvue
在小程序內(nèi)測之初，我們計劃快速迭代出一款對標 H5 的產(chǎn)品實現(xiàn)，核心訴求是：快速實現(xiàn)、代碼復(fù)用、低成本和高效率… 隨后經(jīng)歷了多個小程序建設(shè)，結(jié)合業(yè)務(wù)場景、技術(shù)選型和小程序開發(fā)方式，我們整理匯總出了開發(fā)階段面臨的主要問題：
組件化機制不夠完善
代碼多端復(fù)用能力欠缺
小程序框架和團隊技術(shù)棧無法有機結(jié)合
小程序學(xué)習(xí)成本不夠低
組件機制：小程序邏輯和視圖層代碼彼此分離，公共組件提取后無法聚合為單文件入口，組件需分別在視圖層和邏輯層引入，維護性差；組件無命名空間機制，事件回調(diào)必須設(shè)置為全局函數(shù)，組件設(shè)計有命名沖突的風(fēng)險，數(shù)據(jù)封裝不強。開發(fā)者需要友好的代碼組織方式，通過 ES 模塊一次性導(dǎo)入；組件數(shù)據(jù)有良好的封裝。成熟的組件機制，對工程化開發(fā)至關(guān)重要。
多端復(fù)用：常見的業(yè)務(wù)場景有兩類，通過已有 H5 產(chǎn)品改造為小程序應(yīng)用或反之。從效率角度出發(fā)，開發(fā)者希望通過復(fù)用代碼完成開發(fā)，但小程序開發(fā)框架卻無法做到。我們嘗試過通過靜態(tài)代碼分析將 H5 代碼轉(zhuǎn)換為小程序，但只做了視圖層轉(zhuǎn)換，無法帶來更多收益。多端代碼復(fù)用需要更成熟的解決方案。
引入 Vue.js：小程序開發(fā)方式與 H5 近似，因此我們考慮和 H5 做代碼復(fù)用。沿襲團隊技術(shù)棧選型，我們將 Vue.js 確定為小程序開發(fā)規(guī)范。使用 Vue.js 開發(fā)小程序，將直接帶來如下開發(fā)效率提升：
H5 代碼可以通過最小修改復(fù)用到小程序
使用 Vue.js 組件機制開發(fā)小程序，可實現(xiàn)小程序和 H5 組件復(fù)用
技術(shù)棧統(tǒng)一后小程序學(xué)習(xí)成本降低，開發(fā)者從 H5 轉(zhuǎn)換到小程序不需要更多學(xué)習(xí)
Vue.js 代碼可以讓所有前端直接參與開發(fā)維護
為什么是 Vue.js？這取決于團隊技術(shù)棧選型，引入新的選型與統(tǒng)一技術(shù)棧和提高開發(fā)效率相悖，有違開發(fā)工具服務(wù)業(yè)務(wù)的初衷。
mpvue 的演進
mpvue的形成，來源于業(yè)務(wù)場景和需求，最終方案的確定，經(jīng)歷了三個階段。
第一階段：我們實現(xiàn)了一個視圖層代碼轉(zhuǎn)換工具，旨在提高代碼首次開發(fā)效率。通過將H5視圖層代碼轉(zhuǎn)換為小程序代碼，包括 HTML 標簽映射、Vue.js 模板和樣式轉(zhuǎn)換，在此目標代碼上進行二次開發(fā)。我們做到了有限的代碼復(fù)用，但組件化開發(fā)和小程序學(xué)習(xí)成本并未得到有效改善。
第二階段：我們著眼于完善代碼組件化機制。參照 Vue.js 組件規(guī)范設(shè)計了代碼組織形式，通過代碼轉(zhuǎn)換工具將代碼解析為小程序。轉(zhuǎn)換工具主要解決組件間數(shù)據(jù)同步、生命周期關(guān)聯(lián)和命名空間問題。最終我們實現(xiàn)了一個 Vue.js 語法子集，但想要實現(xiàn)更多特性或跟隨 Vue.js 版本迭代，工作量變得難以估計，有永無止境之感。
第三階段：我們的目標是實現(xiàn)對 Vue.js 語法全集的支持，達到使用 Vue.js 開發(fā)小程序的目的。并通過引入 Vue.js runtime 實現(xiàn)了對 Vue.js 語法的支持，從而避免了人肉語法適配。至此，我們完成了使用 Vue.js 開發(fā)小程序的目的。較好地實現(xiàn)了技術(shù)棧統(tǒng)一、組件化開發(fā)、多端代碼復(fù)用、降低學(xué)習(xí)成本和提高開發(fā)效率的目標。
mpvue設(shè)計思路
Vue.js 和小程序都是典型的邏輯視圖層框架，邏輯層和視圖層之間的工作方式為：數(shù)據(jù)變更驅(qū)動視圖更新；視圖交互觸發(fā)事件，事件響應(yīng)函數(shù)修改數(shù)據(jù)再次觸發(fā)視圖更新，如圖1所示。
圖1：小程序實現(xiàn)原理
鑒于 Vue.js 和小程序一致的工作原理，我們思考將小程序的功能托管給 Vue.js，在正確的時機將數(shù)據(jù)變更同步到小程序，從而達到開發(fā)小程序的目的。這樣，我們可以將精力聚焦在 Vue.js 上，參照 Vue.js 編寫與之對應(yīng)的小程序代碼，小程序負責(zé)視圖層展示，所有業(yè)務(wù)邏輯收斂到 Vue.js 中，Vue.js 數(shù)據(jù)變更后同步到小程序，如圖2所示。如此一來，我們就獲得了以 Vue.js 的方式開發(fā)小程序的能力。為此，我們設(shè)計的方案如下：
圖2：mpvue 實現(xiàn)原理
Vue代碼
- 將小程序頁面編寫為 Vue.js 實現(xiàn)
- 以 Vue.js 開發(fā)規(guī)范實現(xiàn)父子組件關(guān)聯(lián)
小程序代碼
- 以小程序開發(fā)規(guī)范編寫視圖層模板
- 配置生命周期函數(shù)，關(guān)聯(lián)數(shù)據(jù)更新調(diào)用
- 將 Vue.js 數(shù)據(jù)映射為小程序數(shù)據(jù)模型
并在此基礎(chǔ)上，附加如下機制
- Vue.js 實例與小程序 Page 實例建立關(guān)聯(lián)
- 小程序和 Vue.js 生命周期建立映射關(guān)系，能在小程序生命周期中觸發(fā) Vue.js 生命周期
- 小程序事件建立代理機制，在事件代理函數(shù)中觸發(fā)與之對應(yīng)的 Vue.js 組件事件響應(yīng)
這套機制總結(jié)起來非常簡單，但實現(xiàn)卻相當復(fù)雜。在揭秘具體實現(xiàn)之前，讀者可能會有這樣一些疑問：
要同時維護 Vue.js 和小程序，是否需要寫兩個版本的代碼實現(xiàn)?
小程序負責(zé)視圖層展現(xiàn)，Vue.js的視圖層是否還需要，如果不需要應(yīng)該如何處理?
生命周期如何打通，數(shù)據(jù)同步更新如何實現(xiàn)?
上述問題包含了 mpvue 框架的核心內(nèi)容，下文將仔細為你道來。首先，mpvue 為提高效率而生，本身提供了自動生成小程序代碼的能力，小程序代碼根據(jù) Vue.js 代碼構(gòu)建得到，并不需要同時開發(fā)兩套代碼。
Vue.js 視圖層渲染由 render 方法完成，同時在內(nèi)存中維護著一份虛擬 DOM，mpvue 無需使用 Vue.js 完成視圖層渲染，因此我們改造了 render 方法，禁止視圖層渲染。熟悉源代碼的讀者，都知道 Vue runtime 有多個平臺的實現(xiàn)，除了我們常見的 Web 平臺，還有 Weex。從現(xiàn)在開始，我們增加了新的平臺 mpvue。
生命周期關(guān)聯(lián)：生命周期和數(shù)據(jù)同步是 mpvue 框架的靈魂，Vue.js 和小程序的數(shù)據(jù)彼此隔離，各自有不同的更新機制。mpvue 從生命周期和事件回調(diào)函數(shù)切入，在 Vue.js 觸發(fā)數(shù)據(jù)更新時實現(xiàn)數(shù)據(jù)同步。小程序通過視圖層呈現(xiàn)給用戶、通過事件響應(yīng)用戶交互，Vue.js 在后臺維護著數(shù)據(jù)變更和邏輯。可以看到，數(shù)據(jù)更新發(fā)端于小程序，處理自 Vue.js，Vue.js 數(shù)據(jù)變更后再同步到小程序。為實現(xiàn)數(shù)據(jù)同步，mpvue 修改了 Vue.js runtime 實現(xiàn)，在 Vue.js 的生命周期中增加了更新小程序數(shù)據(jù)的邏輯。
事件代理機制：用戶交互觸發(fā)的數(shù)據(jù)更新通過事件代理機制完成。在 Vue.js 代碼中，事件響應(yīng)函數(shù)對應(yīng)到組件的 method， Vue.js 自動維護了上下文環(huán)境。然而在小程序中并沒有類似的機制，又因為 Vue.js 執(zhí)行環(huán)境中維護著一份實時的虛擬 DOM，這與小程序的視圖層完全對應(yīng)，我們思考，在小程序組件節(jié)點上觸發(fā)事件后，只要找到虛擬 DOM 上對應(yīng)的節(jié)點，觸發(fā)對應(yīng)的事件不就完成了么；另一方面，Vue.js 事件響應(yīng)如果觸發(fā)了數(shù)據(jù)更新，其生命周期函數(shù)更新將自動觸發(fā)，在此函數(shù)上同步更新小程序數(shù)據(jù)，數(shù)據(jù)同步也就實現(xiàn)了。
mpvue如何使用
mpvue框架本身由多個npm模塊構(gòu)成，入口模塊已經(jīng)處理好依賴關(guān)系，開發(fā)者只需要執(zhí)行如下代碼即可完成本地項目創(chuàng)建。
# 安裝 vue-cli$ npm install --global vue-cli# 根據(jù)模板項目創(chuàng)建本地項目，目前為內(nèi)網(wǎng)地址$ vue init ‘bitbucket:xxx.meituan. com：hfe/mpvue-quickstart’ --clone my- project# 安裝依賴和啟動自動構(gòu)建$ cd my-project$ npm install$ npm run dev
執(zhí)行完上述命令，在當前項目的 dist 子目錄將構(gòu)建出小程序目標代碼，使用小程序開發(fā)者工具載入 dist 目錄即可啟動本地調(diào)試和預(yù)覽。示例項目遵循 Vue.js 模板項目規(guī)范，通過Vue.js 命令行工具vue-cli創(chuàng)建。代碼組織形式與 Vue.js 官方實例保持一致，我們?yōu)?i class="chrome-extension-mutihighlight chrome-extension-mutihighlight-style-2">小程序定制了 Vue.js runtime 和 webpack 加載器，此部分依賴也已經(jīng)內(nèi)置到項目中。
針對小程序開發(fā)中常見的兩類代碼復(fù)用場景，mpvue 框架為開發(fā)者提供了解決思路和技術(shù)支持，開發(fā)者只需要在此指導(dǎo)下進行項目配置和改造。我們內(nèi)部實踐了一個將 H5 轉(zhuǎn)換為小程序的項目，下圖為使用 mpvue 框架的轉(zhuǎn)換效果：
圖3：H5 和小程序轉(zhuǎn)換效果
將小程序轉(zhuǎn)換為H5：直接使用 Vue.js 規(guī)范開發(fā)小程序，代碼本身與H5并無不同，具體代碼差異會集中在平臺 Api 部分。此外并不需明顯改動，改造主要分如下幾部分：
將小程序平臺的 Vue.js 框架替換為標準 Vue.js
將小程序平臺的 vue-loader 加載器替換為標準 vue-loader
適配和改造小程序與 H5 的底層 Api 差異
將H5轉(zhuǎn)換為小程序：已經(jīng)使用 Vue.js 開發(fā)完 H5，我們需要做的事情如下：
將標準 Vue.js 替換為小程序平臺的 Vue.js 框架
將標準 vue-loader 加載器替換為小程序平臺的 vue-loader
適配和改造小程序與 H5 的底層 Api 差異
根據(jù)小程序開發(fā)平臺提供的能力，我們最大程度的支持了 Vue.js 語法特性，但部分功能現(xiàn)階段暫時尚未實現(xiàn)。
表1：mpvue 暫不支持的語法特性
項目轉(zhuǎn)換注意事項：框架的目標是將小程序和 H5 的開發(fā)方式通過 Vue.js 建立關(guān)聯(lián)，達到最大程度的代碼復(fù)用。但由于平臺差異的客觀存在（主要集中在實現(xiàn)機制、底層Api 能力差異），我們無法做到代碼 100% 復(fù)用，平臺差異部分的改造成本無法避免。對于代碼復(fù)用的場景，開發(fā)者需要重點思考如下問題并做好準備：
盡量使用平臺無的語法特性，這部分特性無需轉(zhuǎn)換和適配成本
避免使用不支持的語法特性，譬如 slot， filter 等，降低改造成本
如果使用特定平臺 Api ，考慮抽象好適配層接口，通過切換底層實現(xiàn)完成平臺轉(zhuǎn)換
mpvue 最佳實踐
在表2中，我們對微信小程序、mpvue、WePY 這三個開發(fā)框架的主要能力和特點做了橫向?qū)Ρ龋瑤椭蠹伊私獠煌蚣艿膫?cè)重點，結(jié)合業(yè)務(wù)場景和開發(fā)習(xí)慣，確定技術(shù)方案。對于如何更好地使用 mpvue 進行小程序開發(fā)，我們總結(jié)了一些最佳實踐。
使用 vue-cli 命令行工具創(chuàng)建項目，使用Vue 2.x 的語法規(guī)范進行開發(fā)
避免使用框架不支持的語法特性，部分 Vue.js語法在小程序中無法使用，盡量使用 mpvue 和 Vue.js 共有特性
合理設(shè)計數(shù)據(jù)模型，對數(shù)據(jù)的更新和操作做到細粒度控制，避免性能問題
合理使用組件化開發(fā)小程序，提高代碼復(fù)用率
表2：框架使用特點對比
結(jié)語
mpvue 框架已經(jīng)在業(yè)務(wù)項目中得到實踐和驗證，目前正在美團點評內(nèi)部大范圍使用。mpvue 來源于開源社區(qū)，飲水思源，我們也希望為開源社區(qū)貢獻一份力量，為廣大小程序開發(fā)者提供一套技術(shù)方案。mpvue 的初衷是讓 Vue.js 的開發(fā)者以低成本接入小程序開發(fā)，做到代碼的低成本遷移和復(fù)用，我們未來會繼續(xù)擴展現(xiàn)有能力、解決開發(fā)者的訴求、優(yōu)化使用體驗、完善周邊生態(tài)建設(shè)，幫助到更多的開發(fā)者。
最后，mpvue 基于 Vue.js 源碼進行二次開發(fā)，新增加了小程序平臺的實現(xiàn)，我們保留了跟隨 Vue.js 版本升級的能力，由衷的感謝 Vue.js 框架和微信小程序給業(yè)界帶來的便利。
*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
