這篇文章主要介紹了使用Vue.js開發(fā)微信小程式開源框架mpvue解析，現(xiàn)在分享給大家，也給大家做個參考。

前言

mpvue是使用Vue.js開發(fā)微信小程式的前端框架。使用此框架，開發(fā)者將得到完整的 Vue.js 開發(fā)體驗，同時為H5和小程式提供了程式碼重複使用的能力。如果想將 H5 專案改造為小程序，或開發(fā)小程式後希望將其轉(zhuǎn)換為H5，mpvue將是十分契合的解決方案。

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

為了幫助大家更好的理解mpvue的架構(gòu)，接下來我們來解析框架的設(shè)計和實作想法。文中主要內(nèi)容已發(fā)表在《程式設(shè)計師》雜誌2017年第9期小程式專題封面報道，內(nèi)容略有修改。

小程式開發(fā)特點

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

小程式本身定位為一個簡單的邏輯視圖層框架，官方並不建議用來開發(fā)複雜應(yīng)用，但業(yè)務(wù)需求卻很難做到精簡。複雜的應(yīng)用對開發(fā)方式有較高的要求，如組件和模組化、自動建置和整合、程式碼重複使用和開發(fā)效率等，但小程式開發(fā)規(guī)範(fàn)較大的限制了這部分能力。為了解決上述問題，提供更好的開發(fā)體驗，我們創(chuàng)造了mpvue，透過使用Vue.js來開發(fā)微信小程式。

mpvue是什麼

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

為什麼做mpvue

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

1. #元件化機(jī)制不夠完善

2. 程式碼多端重複使用能力欠缺

3. 小程式框架和團(tuán)隊技術(shù)堆疊無法有機(jī)結(jié)合

4. 小程式學(xué)習(xí)成本不夠低

#元件機(jī)制：小程式邏輯和視圖層程式碼彼此分離，公用元件擷取後無法聚合為單一檔案入口，元件需分別在視圖層和邏輯層引入，維護(hù)性差；元件無命名空間機(jī)制，事件回呼必須設(shè)定為全域函數(shù)，元件設(shè)計有命名衝突的風(fēng)險，資料封裝不強(qiáng)。開發(fā)者需要友善的程式碼組織方式，透過 ES 模組一次導(dǎo)入；組件資料有良好的封裝。成熟的組件機(jī)制，對工程化開發(fā)至關(guān)重要。

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

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

1. H5 程式碼可以透過最小修改復(fù)用到小程式

2. 使用Vue.js 元件機(jī)制開發(fā)小程序，可實現(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)隊技術(shù)棧選型，引進(jìn)新的選型與統(tǒng)一技術(shù)堆疊和提高開發(fā)效率相悖，有違開發(fā)工具服務(wù)業(yè)務(wù)的初衷。

mpvue 的演進(jìn)

mpvue的形成，來自於業(yè)務(wù)場景和需求，最終方案的確定，經(jīng)歷了三個階段。

第一階段：我們實作了一個視圖層程式碼轉(zhuǎn)換工具，旨在提高程式碼首次開發(fā)效率。透過將H5視圖層程式碼轉(zhuǎn)換為小程式程式碼，包括 HTML 標(biāo)籤映射、Vue.js 模板和樣式轉(zhuǎn)換，在此目標(biāo)程式碼上進(jìn)行二次開發(fā)。我們做到了有限的程式碼重複使用，但組件化開發(fā)和小程式學(xué)習(xí)成本並未有效改善。

第二階段：我們著重於完善程式碼元件化機(jī)制。參考 Vue.js 元件規(guī)格設(shè)計了程式碼組織形式，透過程式碼轉(zhuǎn)換工具將程式碼解析為小程式。轉(zhuǎn)換工具主要解決組件間資料同步、生命週期關(guān)聯(lián)和命名空間問題。最後我們實作了一個 Vue.js 語法子集，但想要實現(xiàn)更多特性或跟隨 Vue.js 版本迭代，工作量變得難以估計，有永無止境之感。

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

mpvue設(shè)計想法

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

圖1： 小程式實作原理

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

Vue程式碼
- 將小程式頁面編寫為Vue.js 實作
- 以Vue.js 開發(fā)規(guī)格實作父子元件關(guān)聯(lián)

#小程式碼
- 以小程式開發(fā)規(guī)範(fàn)編寫視圖層模板
- 配置生命週期函數(shù)，關(guān)聯(lián)資料更新呼叫
- 將Vue.js 資料映射為小程式資料模型

並在此基礎(chǔ)上，附加以下機(jī)制
- Vue.js 實例與小程式Page 實例建立關(guān)聯(lián)
- 小程式和Vue.js 生命週期建立映射關(guān)係，能在小程式生命週期中觸發(fā)Vue.js 生命週期
- 小程式事件建立代理機(jī)制，在事件代理函數(shù)中觸發(fā)與之對應(yīng)的Vue.js 元件事件回應(yīng)

這套機(jī)制總結(jié)起來非常簡單，但實現(xiàn)卻相當(dāng)複雜。在揭秘具體實作之前，讀者可能會有這樣一些疑問：

1. 要同時維護(hù)Vue.js 和小程序，是否需要寫兩個版本的程式碼實作?

2. #小程式負(fù)責(zé)視圖層展現(xiàn)，Vue.js的視圖層是否還需要，如果不需要應(yīng)該如何處理?

3. 生命週期如何打通，數(shù)據(jù)同步更新如何實現(xiàn)?

上述問題包含了mpvue 框架的核心內(nèi)容，下文將仔細(xì)為你道來。首先，mpvue 為提高效率而生，本身提供了自動產(chǎn)生小程式碼的能力，小程式碼根據(jù) Vue.js 程式碼建置得到，並不需要同時開發(fā)兩套程式碼。

Vue.js 視圖層渲染由render 方法完成，同時在記憶體中維護(hù)一份虛擬DOM，mpvue 無需使用Vue.js 完成視圖層渲染，因此我們改造了render 方法，禁止視圖層渲染。熟悉原始碼的讀者，都知道 Vue runtime 有多個平臺的實現(xiàn)，除了我們常見的 Web 平臺，還有 Weex。從現(xiàn)在開始，我們增加了新的平臺 mpvue。

生命週期關(guān)聯(lián)：生命週期和資料同步是 mpvue 框架的靈魂，Vue.js 和小程式的資料彼此隔離，各自有不同的更新機(jī)制。 mpvue 從生命週期和事件回呼函數(shù)切入，在 Vue.js 觸發(fā)資料更新時實現(xiàn)資料同步。小程式透過視圖層呈現(xiàn)給使用者、透過事件回應(yīng)使用者交互，Vue.js 在後臺維護(hù)資料變更和邏輯?？梢钥吹剑Y料更新發(fā)端於小程序，處理自 Vue.js，Vue.js 資料變更後再同步到小程式。為實現(xiàn)資料同步，mpvue 修改了 Vue.js runtime 實現(xiàn)，在 Vue.js 的生命週期中增加了更新小程式資料的邏輯。

事件代理機(jī)制：使用者互動觸發(fā)的資料更新透過事件代理機(jī)製完成。在 Vue.js 程式碼中，事件回應(yīng)函數(shù)對應(yīng)到元件的 method， Vue.js 自動維護(hù)了上下文環(huán)境。然而在小程式中並沒有類似的機(jī)制，又因為Vue.js 執(zhí)行環(huán)境中維護(hù)著一份即時的虛擬DOM，這與小程式的視圖層完全對應(yīng)，我們思考，在小程式元件節(jié)點上觸發(fā)事件後，只要找到虛擬DOM 上對應(yīng)的節(jié)點，觸發(fā)對應(yīng)的事件不就完成了麼；另一方面，Vue.js 事件響應(yīng)如果觸發(fā)了資料更新，其生命週期函數(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 子目錄將建置出小程式目標(biāo)程式碼，使用小程式開發(fā)者工具載入 dist 目錄即可啟動本機(jī)偵錯和預(yù)覽。範(fàn)例專案遵循 Vue.js 範(fàn)本專案規(guī)範(fàn)，透過Vue.js 命令列工具vue-cli建立。程式碼組織形式與 Vue.js 官方實例保持一致，我們?yōu)樾〕淌阶杂喠?Vue.js runtime 和 webpack 載入器，此部分依賴也已經(jīng)內(nèi)建到專案中。

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

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

將小程式轉(zhuǎn)換為H5：直接使用Vue.js 規(guī)範(fàn)開發(fā)小程序，程式碼本身與H5並無不同，具體程式碼差異會集中在平臺Api 部分。另外不需要明顯改動，改造主要分為以下幾部分：

1. 將小程式平臺的Vue.js 框架替換為標(biāo)準(zhǔn)Vue.js

2. 將小程式平臺的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 替換為小程式平臺的Vue.js 框架

2. 將標(biāo)準(zhǔn)vue-loader 載入器替換為小程式平臺的vue-loader

3. 適應(yīng)和改造小程式與H5 的底層Api 差異

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

表1： mpvue 暫不支援的語法特性

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

1. 盡量使用平臺無的語法特性，這部分特性無需轉(zhuǎn)換和適配成本

2. 避免使用不支援的語法特性，譬如slot，filter 等，降低改造成本

3. 如果使用特定平臺Api ，考慮抽象好適配層接口，透過切換底層實現(xiàn)完成平臺轉(zhuǎn)換

mpvue 最佳實踐

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

1. 使用vue-cli 命令列工具建立項目，使用Vue 2.x 的語法規(guī)格進(jìn)行開發(fā)

2. 避免使用框架不支援的語法特性，部分Vue.js語法在小程式中無法使用，盡量使用mpvue 和Vue.js 共有特性

3. 合理設(shè)計資料模型，對資料的更新和操作做到細(xì)粒度控制，避免效能問題

4. 合理使用元件化開發(fā)小程序，提高程式碼重複使用率

表2： 框架使用特徵對比

結(jié)語

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

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

上面是我整理給大家的，希望今後對大家有幫助。

相關(guān)文章：

基於Ajax表單提交及後臺處理簡單的應(yīng)用程式

Ajax 上傳圖片並預(yù)覽的簡單實作

基於ajax html實作檔案上傳技巧總結(jié)

以上是使用Vue.js開發(fā)微信小程式開源框架mpvue解析的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！