mpvue 解析

前言

mpvue是一款使用Vue.js開發微信小程序的前端框架。 總結   生命週期的理解  文檔  一次先後端實踐

使用此框架，開發者將獲得完整的 Vue.js 開發體驗，同時爲H5和小程序提供了代碼複用的能力。

 

若是想將 H5 項目改造爲小程序，或開發小程序後但願將其轉換爲H5，mpvue將是十分契合的一種解決方案。

 

目前，mpvue已經在美團點評多個實際業務項目中獲得了驗證，所以咱們決定將其開源，但願更多技術同行一塊兒開發，

 

應用到更普遍的場景裏去。github項目地址請參見mpvue 。使用文檔請參見 http://mpvue.com/。

 

爲了幫助你們更好的理解mpvue的架構，接下來咱們來解析框架的設計和實現思路。文中主要內容已經發表在《程序員》雜誌2017年第9期小程序專題封面報道，內容略有修改。

小程序開發特色

微信小程序推薦簡潔的開發方式，經過多頁面聚合完成輕量的產品功能。

小程序以離線包方式下載到本地，經過微信客戶端載入和啓動，開發規範簡潔，技術封裝完全，自成開發體系，有Native和H5的影子，但又毫不雷同。

 

小程序自己定位爲一個簡單的邏輯視圖層框架，官方並不推薦用來開發複雜應用，但業務需求卻難以作到精簡。

複雜的應用對開發方式有較高的要求，如組件和模塊化、自動構建和集成、代碼複用和開發效率等，但小程序開發規範較大的限制了這部分能力。

爲了解決上述問題，提供更好的開發體驗，咱們創造了mpvue，經過使用Vue.js來開發微信小程序。

 

mpvue是什麼

mpvue是一套定位於開發小程序的前端開發框架，其核心目標是提升開發效率，加強開發體驗。使用該框架，

 

開發者只需初步瞭解小程序開發規範、熟悉Vue.js基本語法便可上手。框架提供了完整的 Vue.js 開發體驗，

 

開發者編寫Vue.js代碼，mpvue 將其解析轉換爲小程序並確保其正確運行。

 

此外，框架還經過 vue-cli 工具向開發者提供quick start 示例代碼，開發者只需執行一條簡單命令，便可得到可運行的項目。

爲何作mpvue

 

在小程序內測之初，咱們計劃快速迭代出一款對標 H5 的產品實現，核心訴求是：

快速實現、代碼複用、低成本和高效率… 隨後經歷了多個小程序建設，

結合業務場景、技術選型和小程序開發方式，咱們整理彙總出了開發階段面臨的主要問題：

 

• 組件化機制不夠完善
• 代碼多端複用能力欠缺
• 小程序框架和團隊技術棧沒法有機結合
• 小程序學習成本不夠低

組件機制：小程序邏輯和視圖層代碼彼此分離，公共組件提取後沒法聚合爲單文件入口，

組件需分別在視圖層和邏輯層引入，維護性差；

 

組件無命名空間機制，事件回調必須設置爲全局函數，組件設計有命名衝突的風險，數據封裝不強。

 

開發者須要友好的代碼組織方式，經過 ES 模塊一次性導入；組件數據有良好的封裝。成熟的組件機制，對工程化開發相當重要。

 

多端複用：常見的業務場景有兩類，經過已有 H5 產品改造爲小程序應用或反之。

從效率角度出發，開發者但願經過複用代碼完成開發，但小程序開發框架卻沒法作到。

咱們嘗試過經過靜態代碼分析將 H5 代碼轉換爲小程序，但只作了視圖層轉換，沒法帶來更多收益。多端代碼複用須要更成熟的解決方案。

 

引入 Vue.js：小程序開發方式與 H5 近似，所以咱們考慮和 H5 作代碼複用。

 

沿襲團隊技術棧選型，咱們將 Vue.js 肯定爲小程序開發規範。使用 Vue.js 開發小程序，將直接帶來以下開發效率提高：

• H5 代碼能夠經過最小修改複用到小程序
• 使用 Vue.js 組件機制開發小程序，可實現小程序和 H5 組件複用
• 技術棧統一後小程序學習成本下降，開發者從 H5 轉換到小程序不須要更多學習
• Vue.js 代碼可讓全部前端直接參與開發維護

爲何是 Vue.js？這取決於團隊技術棧選型，引入新的選型與統一技術棧和提升開發效率相悖，有違開發工具服務業務的初衷。

mpvue 的演進

mpvue的造成，來源於業務場景和需求，最終方案的肯定，經歷了三個階段。

第一階段：咱們實現了一個視圖層代碼轉換工具，旨在提升代碼首次開發效率。

經過將H5視圖層代碼  轉換  爲小程序代碼，包括 HTML 標籤映射、Vue.js 模板和樣式轉換，在此目標代碼上進行二次開發。

咱們作到了  有限的代碼複用 ，但組件化開發和小程序學習成本並未獲得有效改善。

 

第二階段：咱們着眼於完善代碼組件化機制。

 

參照 Vue.js 組件規範設計了代碼組織形式，經過代碼轉換工具將代碼解析爲小程序。

轉換工具主要解決組件間數據同步、生命週期關聯和命名空間問題。

最終咱們實現了一個 Vue.js 語法子集，但想要實現更多特性或跟隨 Vue.js 版本迭代，工做量變得難以估計，有永無止境之感。

 

第三階段：咱們的目標是實現對 Vue.js 語法全集的支持，達到使用 Vue.js 開發小程序的目的。

並經過引入 Vue.js runtime 實現了對 Vue.js 語法的支持，從而避免了人肉語法適配。

至此，咱們完成了使用 Vue.js 開發小程序的目的。

 

較好地實現了技術棧統1、組件化開發、多端代碼複用、下降學習成本和提升開發效率的目標。

mpvue設計思路

Vue.js 和小程序都是典型的邏輯視圖層框架，邏輯層和視圖層之間的工做方式爲：

數據變動驅動視圖更新；視圖交互觸發事件，事件響應函數修改數據再次觸發視圖更新，如圖1所示。 

 

圖1： 小程序實現原理

 

鑑於 Vue.js 和小程序一致的工做原理，咱們思考將小程序的功能託管給 Vue.js，在正確的時機將數據變動同步到小程序，

從而達到開發小程序的目的。

 

這樣，咱們能夠將精力聚焦在 Vue.js 上，參照 Vue.js 編寫與之對應的小程序代碼，

小程序負責視圖層展現，全部業務邏輯收斂到 Vue.js 中，Vue.js 數據變動後同步到小程序，如圖2所示。

 

如此一來，咱們就得到了以 Vue.js 的方式開發小程序的能力。爲此，咱們設計的方案以下：

 

 

 

 

Vue代碼 

- 將小程序頁面編寫爲 Vue.js 實現 
- 以 Vue.js 開發規範實現父子組件關聯

 

小程序代碼 

- 以小程序開發規範 編寫視圖層模板 

- 配置生命週期函數，關聯數據更新調用 

- 將 Vue.js 數據 映射  爲小程序數據模型

並在此基礎上，附加以下機制 

- Vue.js 實例與小程序 Page 實例創建關聯 
- 小程序和 Vue.js 生命週期創建映射關係，能在小程序生命週期中觸發 Vue.js 生命週期 
- 小程序事件創建代理機制，在事件代理函數中觸發與之對應的 Vue.js 組件事件響應

這套機制總結起來很是簡單，但實現卻至關複雜。在揭祕具體實現以前，讀者可能會有這樣一些疑問：

• 要同時維護 Vue.js 和小程序，是否須要寫兩個版本的代碼實現?
• 小程序負責視圖層展示，Vue.js的視圖層是否還須要，若是不須要應該如何處理?
• 生命週期如何打通，數據同步更新如何實現?

上述問題包含了 mpvue 框架的核心內容，下文將仔細爲你道來。

 

首先，mpvue 爲提升效率而生，自己提供了自動生成小程序代碼的能力，小程序代碼根據 Vue.js 代碼構建獲得，並不須要同時開發兩套代碼。

Vue.js 視圖層渲染由 render 方法完成，同時在內存中維護着一份虛擬 DOM，mpvue 無需使用 Vue.js 完成視圖層渲染，

 

所以咱們改造了 render 方法，禁止視圖層渲染。熟悉源代碼的讀者，都知道 Vue runtime 有多個平臺的實現，

 

除了咱們常見的 Web 平臺，還有 Weex。從如今開始，咱們增長了新的平臺 mpvue。

生命週期關聯：生命週期和數據同步是 mpvue 框架的靈魂，Vue.js 和小程序的數據彼此隔離，各自有不一樣的更新機制

 

。mpvue 從生命週期和事件回調函數切入，在 Vue.js 觸發數據更新時實現數據同步。

 

小程序經過視圖層呈現給用戶、經過事件響應用戶交互，Vue.js 在後臺維護着數據變動和邏輯。

 

能夠看到，數據更新發端於小程序，處理自 Vue.js，Vue.js 數據變動後再同步到小程序

 

。爲實現數據同步，mpvue 修改了 Vue.js runtime 實現，在 Vue.js 的生命週期中增長了更新小程序數據的邏輯。

事件代理機制：用戶交互觸發的數據更新經過事件代理機制完成。在 Vue.js 代碼中，

 

事件響應函數對應到組件的 method， Vue.js 自動維護了上下文環境。然而在小程序中並無相似的機制，

 

又由於 Vue.js 執行環境中維護着一份實時的虛擬 DOM，這與小程序的視圖層徹底對應，

 

咱們思考，在小程序組件節點上觸發事件後，只要找到虛擬 DOM 上對應的節點，觸發對應的事件不就完成了麼；

 

另外一方面，Vue.js 事件響應若是觸發了數據更新，其生命週期函數更新將自動觸發，在此函數上同步更新小程序數據，數據同步也就實現了。

mpvue如何使用

mpvue框架自己由多個npm模塊構成，入口模塊已經處理好依賴關係，開發者只須要執行以下代碼便可完成本地項目建立。

# 安裝 vue-cli $ npm install --global vue-cli
 # 根據模板項目建立本地項目，目前爲內網地址
 $ vue init ‘bitbucket:xxx.meituan. com：hfe/mpvue-quickstart’ --clone my- project # 安裝依賴和啓動自動構建
 $ cd my-project $ npm install $ npm run dev

 

執行完上述命令，在當前項目的 dist 子目錄將構建出小程序目標代碼，使用小程序開發者工具載入 dist 目錄便可啓動本地調試和預覽。

示例項目遵循 Vue.js 模板項目規範，經過Vue.js 命令行工具vue-cli建立。代碼組織形式與 Vue.js 官方實例保持一致，

咱們爲小程序定製了 Vue.js runtime 和 webpack 加載器，此部分依賴也已經內置到項目中。

 

針對小程序開發中常見的兩類代碼複用場景，mpvue 框架爲開發者提供瞭解決思路和技術支持，

開發者只須要在此指導下進行項目配置和改造。咱們內部實踐了一個將 H5 轉換爲小程序的項目，下圖爲使用 mpvue 框架的轉換效果：

 

 

圖3： H5 和小程序轉換效果

 

將小程序轉換爲H5：直接使用 Vue.js 規範開發小程序，代碼自己與H5並沒有不一樣，

 

具體代碼差別會集中在平臺 Api 部分。此外並不需明顯改動，改造主要分以下幾部分：

• 將小程序平臺的 Vue.js 框架替換爲標準 Vue.js
• 將小程序平臺的 vue-loader 加載器替換爲標準 vue-loader
• 適配和改造小程序與 H5 的底層 Api 差別

將H5轉換爲小程序：已經使用 Vue.js 開發完 H5，咱們須要作的事情以下：

• 將標準 Vue.js 替換爲小程序平臺的 Vue.js 框架
• 將標準 vue-loader 加載器替換爲小程序平臺的 vue-loader
• 適配和改造小程序與 H5 的底層 Api 差別

根據小程序開發平臺提供的能力，咱們最大程度的支持了 Vue.js 語法特性，但部分功能現階段暫時還沒有實現。

 

 

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

 

項目轉換注意事項：框架的目標是將小程序和 H5 的開發方式經過 Vue.js 創建關聯，達到最大程度的代碼複用。

但因爲平臺差別的客觀存在（主要集中在實現機制、底層Api 能力差別），咱們沒法作到代碼 100% 複用，

 

平臺差別部分的改形成本沒法避免。對於代碼複用的場景，開發者須要重點思考以下問題並作好準備：

• 儘可能使用平臺無的語法特性，這部分特性無需轉換和適配成本
• 避免使用不支持的語法特性，譬如 slot， filter 等，下降改形成本
• 若是使用特定平臺 Api ，考慮抽象好適配層接口，經過切換底層實現完成平臺轉換

mpvue 最佳實踐

在表2中，咱們對微信小程序、mpvue、WePY 這三個開發框架的主要能力和特色作了橫向對比，幫助你們瞭解不一樣框架的側重點，

結合業務場景和開發習慣，肯定技術方案。對於如何更好地使用 mpvue 進行小程序開發，咱們總結了一些最佳實踐。

• 使用 vue-cli 命令行工具建立項目，使用Vue 2.x 的語法規範進行開發
• 避免使用框架不支持的語法特性，部分 Vue.js語法在小程序中沒法使用，儘可能使用 mpvue 和 Vue.js 共有特性
• 合理設計數據模型，對數據的更新和操做作到細粒度控制，避免性能問題
• 合理使用組件化開發小程序，提升代碼複用率

 

 

表2： 框架使用特色對比

 

結語

mpvue 框架已經在業務項目中獲得實踐和驗證，目前正在美團點評內部大範圍使用。

mpvue 來源於開源社區，飲水思源，咱們也但願爲開源社區貢獻一份力量，爲廣大小程序開發者提供一套技術方案。

 

mpvue 的初衷是讓 Vue.js 的開發者以低成本接入小程序開發，作到代碼的低成本遷移和複用

，咱們將來會繼續擴展示有能力、解決開發者的訴求、優化使用體驗、完善周邊生態建設，幫助到更多的開發者。

 

最後，mpvue 基於 Vue.js 源碼進行二次開發，新增長了小程序平臺的實現，咱們保留了跟隨 Vue.js 版本升級的能力，

由衷的感謝 Vue.js 框架和微信小程序給業界帶來的便利。

做者簡介

---

成全：美團點評酒旅事業羣資深前端工程師，目前主要從事移動端和小程序技術方向，致力於小程序的工程化開發和業務級應用。

招聘時間～美團點評酒旅業務研發中心誠招中、高級前端工程師、技術專家，歡迎投遞簡歷到 huchengquan#meituan.com