前言

mpvue是一款使用Vue.js開發(fā)微信小程序的前端框架。使用此框架，開發(fā)者將得到完整的 Vue.js 開發(fā)體驗(yàn)，同時(shí)為H5和小程序提供了代碼復(fù)用的能力。如果想將 H5 項(xiàng)目改造為小程序，或開發(fā)小程序后希望將其轉(zhuǎn)換為H5，mpvue將是十分契合的一種解決方案。

目前，mpvue已經(jīng)在美團(tuán)點(diǎn)評(píng)多個(gè)實(shí)際業(yè)務(wù)項(xiàng)目中得到了驗(yàn)證，因此我們決定將其開源，希望更多技術(shù)同行一起開發(fā)，應(yīng)用到更廣泛的場(chǎng)景里去。github項(xiàng)目地址請(qǐng)參見mpvue 。使用文檔請(qǐng)參見 http://mpvue.com/。

為了幫助大家更好的理解mpvue的架構(gòu)，接下來(lái)我們來(lái)解析框架的設(shè)計(jì)和實(shí)現(xiàn)思路。文中主要內(nèi)容已經(jīng)發(fā)表在《程序員》雜志2017年第9期小程序?qū)ｎ}封面報(bào)道，內(nèi)容略有修改。

小程序開發(fā)特點(diǎn)

微信小程序推薦簡(jiǎn)潔的開發(fā)方式，通過(guò)多頁(yè)面聚合完成輕量的產(chǎn)品功能。小程序以離線包方式下載到本地，通過(guò)微信客戶端載入和啟動(dòng)，開發(fā)規(guī)范簡(jiǎn)潔，技術(shù)封裝徹底，自成開發(fā)體系，有Native和H5的影子，但又絕不雷同。

小程序本身定位為一個(gè)簡(jiǎn)單的邏輯視圖層框架，官方并不推薦用來(lái)開發(fā)復(fù)雜應(yīng)用，但業(yè)務(wù)需求卻難以做到精簡(jiǎn)。復(fù)雜的應(yīng)用對(duì)開發(fā)方式有較高的要求，如組件和模塊化、自動(dòng)構(gòu)建和集成、代碼復(fù)用和開發(fā)效率等，但小程序開發(fā)規(guī)范較大的限制了這部分能力。為了解決上述問(wèn)題，提供更好的開發(fā)體驗(yàn)，我們創(chuàng)造了mpvue，通過(guò)使用Vue.js來(lái)開發(fā)微信小程序。

mpvue是什么

mpvue是一套定位于開發(fā)小程序的前端開發(fā)框架，其核心目標(biāo)是提高開發(fā)效率，增強(qiáng)開發(fā)體驗(yàn)。使用該框架，開發(fā)者只需初步了解小程序開發(fā)規(guī)范、熟悉Vue.js基本語(yǔ)法即可上手?？蚣芴峁┝送暾?Vue.js 開發(fā)體驗(yàn)，開發(fā)者編寫Vue.js代碼，mpvue 將其解析轉(zhuǎn)換為小程序并確保其正確運(yùn)行。此外，框架還通過(guò) vue-cli 工具向開發(fā)者提供quick start 示例代碼，開發(fā)者只需執(zhí)行一條簡(jiǎn)單命令，即可獲得可運(yùn)行的項(xiàng)目。

為什么做mpvue

在小程序內(nèi)測(cè)之初，我們計(jì)劃快速迭代出一款對(duì)標(biāo) H5 的產(chǎn)品實(shí)現(xiàn)，核心訴求是：快速實(shí)現(xiàn)、代碼復(fù)用、低成本和高效率… 隨后經(jīng)歷了多個(gè)小程序建設(shè)，結(jié)合業(yè)務(wù)場(chǎng)景、技術(shù)選型和小程序開發(fā)方式，我們整理匯總出了開發(fā)階段面臨的主要問(wèn)題：

1. 組件化機(jī)制不夠完善
2. 代碼多端復(fù)用能力欠缺
3. 小程序框架和團(tuán)隊(duì)技術(shù)棧無(wú)法有機(jī)結(jié)合
4. 小程序?qū)W習(xí)成本不夠低

組件機(jī)制：小程序邏輯和視圖層代碼彼此分離，公共組件提取后無(wú)法聚合為單文件入口，組件需分別在視圖層和邏輯層引入，維護(hù)性差；組件無(wú)命名空間機(jī)制，事件回調(diào)必須設(shè)置為全局函數(shù)，組件設(shè)計(jì)有命名沖突的風(fēng)險(xiǎn)，數(shù)據(jù)封裝不強(qiáng)。開發(fā)者需要友好的代碼組織方式，通過(guò) ES 模塊一次性導(dǎo)入；組件數(shù)據(jù)有良好的封裝。成熟的組件機(jī)制，對(duì)工程化開發(fā)至關(guān)重要。

多端復(fù)用：常見的業(yè)務(wù)場(chǎng)景有兩類，通過(guò)已有 H5 產(chǎn)品改造為小程序應(yīng)用或反之。從效率角度出發(fā)，開發(fā)者希望通過(guò)復(fù)用代碼完成開發(fā)，但小程序開發(fā)框架卻無(wú)法做到。我們嘗試過(guò)通過(guò)靜態(tài)代碼分析將 H5 代碼轉(zhuǎn)換為小程序，但只做了視圖層轉(zhuǎn)換，無(wú)法帶來(lái)更多收益。多端代碼復(fù)用需要更成熟的解決方案。

引入 Vue.js：小程序開發(fā)方式與 H5 近似，因此我們考慮和 H5 做代碼復(fù)用。沿襲團(tuán)隊(duì)技術(shù)棧選型，我們將 Vue.js 確定為小程序開發(fā)規(guī)范。使用 Vue.js 開發(fā)小程序，將直接帶來(lái)如下開發(fā)效率提升：

1. H5 代碼可以通過(guò)最小修改復(fù)用到小程序
2. 使用 Vue.js 組件機(jī)制開發(fā)小程序，可實(shí)現(xiàn)小程序和 H5 組件復(fù)用
3. 技術(shù)棧統(tǒng)一后小程序?qū)W習(xí)成本降低，開發(fā)者從 H5 轉(zhuǎn)換到小程序不需要更多學(xué)習(xí)
4. Vue.js 代碼可以讓所有前端直接參與開發(fā)維護(hù)

為什么是 Vue.js？這取決于團(tuán)隊(duì)技術(shù)棧選型，引入新的選型與統(tǒng)一技術(shù)棧和提高開發(fā)效率相悖，有違開發(fā)工具服務(wù)業(yè)務(wù)的初衷。

mpvue 的演進(jìn)

mpvue的形成，來(lái)源于業(yè)務(wù)場(chǎng)景和需求，最終方案的確定，經(jīng)歷了三個(gè)階段。

第一階段：我們實(shí)現(xiàn)了一個(gè)視圖層代碼轉(zhuǎn)換工具，旨在提高代碼首次開發(fā)效率。通過(guò)將H5視圖層代碼轉(zhuǎn)換為小程序代碼，包括 HTML 標(biāo)簽映射、Vue.js 模板和樣式轉(zhuǎn)換，在此目標(biāo)代碼上進(jìn)行二次開發(fā)。我們做到了有限的代碼復(fù)用，但組件化開發(fā)和小程序?qū)W習(xí)成本并未得到有效改善。

第二階段：我們著眼于完善代碼組件化機(jī)制。參照 Vue.js 組件規(guī)范設(shè)計(jì)了代碼組織形式，通過(guò)代碼轉(zhuǎn)換工具將代碼解析為小程序。轉(zhuǎn)換工具主要解決組件間數(shù)據(jù)同步、生命周期關(guān)聯(lián)和命名空間問(wèn)題。最終我們實(shí)現(xiàn)了一個(gè) Vue.js 語(yǔ)法子集，但想要實(shí)現(xiàn)更多特性或跟隨 Vue.js 版本迭代，工作量變得難以估計(jì)，有永無(wú)止境之感。

第三階段：我們的目標(biāo)是實(shí)現(xiàn)對(duì) Vue.js 語(yǔ)法全集的支持，達(dá)到使用 Vue.js 開發(fā)小程序的目的。并通過(guò)引入 Vue.js runtime 實(shí)現(xiàn)了對(duì) Vue.js 語(yǔ)法的支持，從而避免了人肉語(yǔ)法適配。至此，我們完成了使用 Vue.js 開發(fā)小程序的目的。較好地實(shí)現(xiàn)了技術(shù)棧統(tǒng)一、組件化開發(fā)、多端代碼復(fù)用、降低學(xué)習(xí)成本和提高開發(fā)效率的目標(biāo)。

mpvue設(shè)計(jì)思路

Vue.js 和小程序都是典型的邏輯視圖層框架，邏輯層和視圖層之間的工作方式為：數(shù)據(jù)變更驅(qū)動(dòng)視圖更新；視圖交互觸發(fā)事件，事件響應(yīng)函數(shù)修改數(shù)據(jù)再次觸發(fā)視圖更新，如圖1所示。

鑒于 Vue.js 和小程序一致的工作原理，我們思考將小程序的功能托管給 Vue.js，在正確的時(shí)機(jī)將數(shù)據(jù)變更同步到小程序，從而達(dá)到開發(fā)小程序的目的。這樣，我們可以將精力聚焦在 Vue.js 上，參照 Vue.js 編寫與之對(duì)應(yīng)的小程序代碼，小程序負(fù)責(zé)視圖層展示，所有業(yè)務(wù)邏輯收斂到 Vue.js 中，Vue.js 數(shù)據(jù)變更后同步到小程序，如圖2所示。如此一來(lái)，我們就獲得了以 Vue.js 的方式開發(fā)小程序的能力。

Vue代碼
- 將小程序頁(yè)面編寫為 Vue.js 實(shí)現(xiàn)
- 以 Vue.js 開發(fā)規(guī)范實(shí)現(xiàn)父子組件關(guān)聯(lián)

小程序代碼
- 以小程序開發(fā)規(guī)范編寫視圖層模板
- 配置生命周期函數(shù)，關(guān)聯(lián)數(shù)據(jù)更新調(diào)用
- 將 Vue.js 數(shù)據(jù)映射為小程序數(shù)據(jù)模型

并在此基礎(chǔ)上，附加如下機(jī)制
- Vue.js 實(shí)例與小程序 Page 實(shí)例建立關(guān)聯(lián)
- 小程序和 Vue.js 生命周期建立映射關(guān)系，能在小程序生命周期中觸發(fā) Vue.js 生命周期
- 小程序事件建立代理機(jī)制，在事件代理函數(shù)中觸發(fā)與之對(duì)應(yīng)的 Vue.js 組件事件響應(yīng)

這套機(jī)制總結(jié)起來(lái)非常簡(jiǎn)單，但實(shí)現(xiàn)卻相當(dāng)復(fù)雜。在揭秘具體實(shí)現(xiàn)之前，讀者可能會(huì)有這樣一些疑問(wèn)：

1. 要同時(shí)維護(hù) Vue.js 和小程序，是否需要寫兩個(gè)版本的代碼實(shí)現(xiàn)?
2. 小程序負(fù)責(zé)視圖層展現(xiàn)，Vue.js的視圖層是否還需要，如果不需要應(yīng)該如何處理?
3. 生命周期如何打通，數(shù)據(jù)同步更新如何實(shí)現(xiàn)?

上述問(wèn)題包含了 mpvue 框架的核心內(nèi)容，下文將仔細(xì)為你道來(lái)。首先，mpvue 為提高效率而生，本身提供了自動(dòng)生成小程序代碼的能力，小程序代碼根據(jù) Vue.js 代碼構(gòu)建得到，并不需要同時(shí)開發(fā)兩套代碼。

Vue.js 視圖層渲染由 render 方法完成，同時(shí)在內(nèi)存中維護(hù)著一份虛擬 DOM，mpvue 無(wú)需使用 Vue.js 完成視圖層渲染，因此我們改造了 render 方法，禁止視圖層渲染。熟悉源代碼的讀者，都知道 Vue runtime 有多個(gè)平臺(tái)的實(shí)現(xiàn)，除了我們常見的 Web 平臺(tái)，還有 Weex。從現(xiàn)在開始，我們?cè)黾恿诵碌钠脚_(tái) mpvue。

生命周期關(guān)聯(lián)：生命周期和數(shù)據(jù)同步是 mpvue 框架的靈魂，Vue.js 和小程序的數(shù)據(jù)彼此隔離，各自有不同的更新機(jī)制。mpvue 從生命周期和事件回調(diào)函數(shù)切入，在 Vue.js 觸發(fā)數(shù)據(jù)更新時(shí)實(shí)現(xiàn)數(shù)據(jù)同步。小程序通過(guò)視圖層呈現(xiàn)給用戶、通過(guò)事件響應(yīng)用戶交互，Vue.js 在后臺(tái)維護(hù)著數(shù)據(jù)變更和邏輯?？梢钥吹剑瑪?shù)據(jù)更新發(fā)端于小程序，處理自 Vue.js，Vue.js 數(shù)據(jù)變更后再同步到小程序。為實(shí)現(xiàn)數(shù)據(jù)同步，mpvue 修改了 Vue.js runtime 實(shí)現(xiàn)，在 Vue.js 的生命周期中增加了更新小程序數(shù)據(jù)的邏輯。

事件代理機(jī)制：用戶交互觸發(fā)的數(shù)據(jù)更新通過(guò)事件代理機(jī)制完成。在 Vue.js 代碼中，事件響應(yīng)函數(shù)對(duì)應(yīng)到組件的 method， Vue.js 自動(dòng)維護(hù)了上下文環(huán)境。然而在小程序中并沒(méi)有類似的機(jī)制，又因?yàn)?Vue.js 執(zhí)行環(huán)境中維護(hù)著一份實(shí)時(shí)的虛擬 DOM，這與小程序的視圖層完全對(duì)應(yīng)，我們思考，在小程序組件節(jié)點(diǎn)上觸發(fā)事件后，只要找到虛擬 DOM 上對(duì)應(yīng)的節(jié)點(diǎn)，觸發(fā)對(duì)應(yīng)的事件不就完成了么；另一方面，Vue.js 事件響應(yīng)如果觸發(fā)了數(shù)據(jù)更新，其生命周期函數(shù)更新將自動(dòng)觸發(fā)，在此函數(shù)上同步更新小程序數(shù)據(jù)，數(shù)據(jù)同步也就實(shí)現(xiàn)了。

mpvue如何使用

mpvue框架本身由多個(gè)npm模塊構(gòu)成，入口模塊已經(jīng)處理好依賴關(guān)系，開發(fā)者只需要執(zhí)行如下代碼即可完成本地項(xiàng)目創(chuàng)建。

# 安裝 vue-cli
$ npm install --global vue-cli
# 根據(jù)模板項(xiàng)目創(chuàng)建本地項(xiàng)目，目前為內(nèi)網(wǎng)地址
$ vue init ‘bitbucket:xxx.meituan. com：hfe/mpvue-quickstart' --clone my- project
# 安裝依賴和啟動(dòng)自動(dòng)構(gòu)建
$ cd my-project
$ npm install
$ npm run dev

執(zhí)行完上述命令，在當(dāng)前項(xiàng)目的 dist 子目錄將構(gòu)建出小程序目標(biāo)代碼，使用小程序開發(fā)者工具載入 dist 目錄即可啟動(dòng)本地調(diào)試和預(yù)覽。示例項(xiàng)目遵循 Vue.js 模板項(xiàng)目規(guī)范，通過(guò)Vue.js 命令行工具vue-cli創(chuàng)建。代碼組織形式與 Vue.js 官方實(shí)例保持一致，我們?yōu)樾〕绦蚨ㄖ屏?Vue.js runtime 和 webpack 加載器，此部分依賴也已經(jīng)內(nèi)置到項(xiàng)目中。

針對(duì)小程序開發(fā)中常見的兩類代碼復(fù)用場(chǎng)景，mpvue 框架為開發(fā)者提供了解決思路和技術(shù)支持，開發(fā)者只需要在此指導(dǎo)下進(jìn)行項(xiàng)目配置和改造。我們內(nèi)部實(shí)踐了一個(gè)將 H5 轉(zhuǎn)換為小程序的項(xiàng)目，下圖為使用 mpvue 框架的轉(zhuǎn)換效果：

圖3： H5 和小程序轉(zhuǎn)換效果

將小程序轉(zhuǎn)換為H5：直接使用 Vue.js 規(guī)范開發(fā)小程序，代碼本身與H5并無(wú)不同，具體代碼差異會(huì)集中在平臺(tái) Api 部分。此外并不需明顯改動(dòng)，改造主要分如下幾部分：

1. 將小程序平臺(tái)的 Vue.js 框架替換為標(biāo)準(zhǔn) Vue.js
2. 將小程序平臺(tái)的 vue-loader 加載器替換為標(biāo)準(zhǔn) vue-loader
3. 適配和改造小程序與 H5 的底層 Api 差異

將H5轉(zhuǎn)換為小程序：已經(jīng)使用 Vue.js 開發(fā)完 H5，我們需要做的事情如下：

1. 將標(biāo)準(zhǔn) Vue.js 替換為小程序平臺(tái)的 Vue.js 框架
2. 將標(biāo)準(zhǔn) vue-loader 加載器替換為小程序平臺(tái)的 vue-loader
3. 適配和改造小程序與 H5 的底層 Api 差異

根據(jù)小程序開發(fā)平臺(tái)提供的能力，我們最大程度的支持了 Vue.js 語(yǔ)法特性，但部分功能現(xiàn)階段暫時(shí)尚未實(shí)現(xiàn)。

表1： mpvue 暫不支持的語(yǔ)法特性

項(xiàng)目轉(zhuǎn)換注意事項(xiàng)：框架的目標(biāo)是將小程序和 H5 的開發(fā)方式通過(guò) Vue.js 建立關(guān)聯(lián)，達(dá)到最大程度的代碼復(fù)用。但由于平臺(tái)差異的客觀存在（主要集中在實(shí)現(xiàn)機(jī)制、底層Api 能力差異），我們無(wú)法做到代碼 100% 復(fù)用，平臺(tái)差異部分的改造成本無(wú)法避免。對(duì)于代碼復(fù)用的場(chǎng)景，開發(fā)者需要重點(diǎn)思考如下問(wèn)題并做好準(zhǔn)備：

1. 盡量使用平臺(tái)無(wú)的語(yǔ)法特性，這部分特性無(wú)需轉(zhuǎn)換和適配成本
2. 避免使用不支持的語(yǔ)法特性，譬如 slot， filter 等，降低改造成本
3. 如果使用特定平臺(tái) Api ，考慮抽象好適配層接口，通過(guò)切換底層實(shí)現(xiàn)完成平臺(tái)轉(zhuǎn)換

mpvue 最佳實(shí)踐

在表2中，我們對(duì)微信小程序、mpvue、WePY 這三個(gè)開發(fā)框架的主要能力和特點(diǎn)做了橫向?qū)Ρ龋瑤椭蠹伊私獠煌蚣艿膫?cè)重點(diǎn)，結(jié)合業(yè)務(wù)場(chǎng)景和開發(fā)習(xí)慣，確定技術(shù)方案。對(duì)于如何更好地使用 mpvue 進(jìn)行小程序開發(fā)，我們總結(jié)了一些最佳實(shí)踐。

1. 使用 vue-cli 命令行工具創(chuàng)建項(xiàng)目，使用Vue 2.x 的語(yǔ)法規(guī)范進(jìn)行開發(fā)
2. 避免使用框架不支持的語(yǔ)法特性，部分 Vue.js語(yǔ)法在小程序中無(wú)法使用，盡量使用 mpvue 和 Vue.js 共有特性
3. 合理設(shè)計(jì)數(shù)據(jù)模型，對(duì)數(shù)據(jù)的更新和操作做到細(xì)粒度控制，避免性能問(wèn)題
4. 合理使用組件化開發(fā)小程序，提高代碼復(fù)用率

表2： 框架使用特點(diǎn)對(duì)比

結(jié)語(yǔ)

mpvue 框架已經(jīng)在業(yè)務(wù)項(xiàng)目中得到實(shí)踐和驗(yàn)證，目前正在美團(tuán)點(diǎn)評(píng)內(nèi)部大范圍使用。mpvue 來(lái)源于開源社區(qū)，飲水思源，我們也希望為開源社區(qū)貢獻(xiàn)一份力量，為廣大小程序開發(fā)者提供一套技術(shù)方案。mpvue 的初衷是讓 Vue.js 的開發(fā)者以低成本接入小程序開發(fā)，做到代碼的低成本遷移和復(fù)用，我們未來(lái)會(huì)繼續(xù)擴(kuò)展現(xiàn)有能力、解決開發(fā)者的訴求、優(yōu)化使用體驗(yàn)、完善周邊生態(tài)建設(shè)，幫助到更多的開發(fā)者。

最后，mpvue 基于 Vue.js 源碼進(jìn)行二次開發(fā)，新增加了小程序平臺(tái)的實(shí)現(xiàn)，我們保留了跟隨 Vue.js 版本升級(jí)的能力，由衷的感謝 Vue.js 框架和微信小程序給業(yè)界帶來(lái)的便利。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。