使用 Mpvue 開發微信小程序的最佳實踐

本文由 GitChat 受權轉發，轉載需與GitChat聯繫。 原文連接

本文做者：美團點評 胡成全

前言

小程序面世一年多以來，給前端開發帶來了巨大的影響，有移動應用的地方，就有小程序的蹤影。通過一年多的發展和沉澱，小程序能力不斷放開，產品形態日趨成熟，已經發展成獨立的端上開發技術體系，儼然與 H五、native 造成鼎足之勢。但與此同時，小程序社區並不夠活躍，小程序技術體系和解決方案也相對薄弱。所以，一款對開發者友好，能應對複雜應用場景，與現有前端技術契合良好的框架必將爲小程序社區帶來重大利好，mpvue 正是這樣一款小程序開發框架。

mpvue 是什麼

mpvue 是一款爲解決小程序工程化、規模化開發的前端框架。她巧妙的將流行的前端框架 Vue.js 集成到小程序，使得開發者能夠在小程序的開發過程當中，完整的體驗到 Vue.js 的能力。此外，mpvue 經過 quickstart 項目向開發者提供了完整的 Vue.js 技術方案和基礎設施。

mpvue 來自哪裏？

mpvue 是美團點評的開源技術項目，目前在美團點評的全部開源項目中位列第一，由專門的團隊負責維護。在完成 mpvue 以前，咱們通過了小程序早期的開發陣痛：沒法複用現有的web前端代碼，不能較好的支持組件化開發，沒法支持 npm 外部依賴，較高的學習成本 … 隨着小程序業務的不斷增多，問題規模化效應不斷放大，所需的技術方案也日漸清晰：前端技術棧無縫過分，兩端代碼複用，提供組件化能力以適應規模化開發能力，自動化構建提高開發效率。

mpvue 發展階段

mpvue 最終方案的造成，經歷了三個階段。

• 第一階段：咱們計劃實現一個代碼代碼轉換工具，能夠快速的將 HTML 轉換成小程序代碼，以此實現前端代碼複用。但工具能力定位所限，帶來的效率提高只在已有代碼的轉化場景。
• 第二階段：咱們立足於工程化的思路，着眼於提升效率，設計了代碼組件化機制。選擇是簡單的，基於現有技術棧，參考 Vue.js，編碼實現了小程序版本的單文件組格式。咱們解決了組件命名空間、數據同步等一系列問題，但沒法支持複雜的應用場景，改進有限。而且對更多的 Vue.js 語法特性支持，將使得開發工做量變得異常巨大，無覺得繼。
• 第三階段：計劃從根本上解決第二階段的遺留問題，實現對 Vue.js 語法的全量支持。幾經探索，最後經過引入和改造 Vue.js runtime 完成。通過後續不斷優化，在業務中屢次實踐，能力和效果最終獲得驗證。

mpvue 主要特色

首先 mpvue 直接支持 Vue.js 語法，對比 「支持類 Vue.js 語法」 有本質的區別。目前框架對 Vue.js 的語法支持程度超過90%。所以 Vue.js 框架包括的一攬子技術解決方案，咱們均可以平移過來，做爲 mpvue 的整套基礎設施，這是 mpvue 最主要的能力和優點。

其次是 mpvue 的組件化開發能力。開發太小程序的同窗應該有所瞭解，原生的公共組件提取須要拆成三個文件，在不一樣的入口中分別引用，使用極其不便，mpvue 將其封裝的簡單易行。

構建集成，小程序框架定位是一個簡單的邏輯視圖框架，一開始沒有足夠的考慮複雜場景，一旦應用的規模上來、業務變得複雜，要作到自動構建和集成須要手動完成大量工做，而 mpvue 直接提供了這套能力。

上述能力，並不能經過小程序原生框架獲得，但經過使用 mpvue 都能直接獲取。

mpvue 開源後續

mpvue 在內部多個項目實踐後，於3月8號正式開源。美團點評技術公衆號推送了文章介紹整個 mpvue 的前因後果。期間也得到了社區的大量關注、試用和實踐，在一些技術站點或者博客都沉澱一些文章。

截止到如今，mpvue 在 GitHub 的 start 數量超過8千，issue 數量超過324個，解決259個，解決率80%。在 npm 社區，有26個關聯的解決方案，其中超過20個由社區提供；此外咱們組織了五個微信交流羣討論平常技術問題。

mpvue 使用場景

你們會關心，mpvue的使用場景，咱們總結了一下，主要分紅兩類：

• 使用小程序原生或第三方框架，到必定的階段後使用集成mpvue作增量的開發。
• 從零開發的時候，直接使用mpvue作新開發。

針對這些場景的話，mpvue 都提供了具體方案。從零開始使用mpvue，經過官方文檔直接構建mpvue的項目環境便可。對於使用mpvue作增量開發，咱們提供了 mpvuesimple 輕量化構建工具，能夠對部分頁面單獨構建，或者將構建集成到已有的方案中。

mpvue 設計思路

小程序的定位是一個簡單的邏輯視圖層框架，框架將代碼分爲邏輯和視圖兩部分。視圖部分代碼即樣式和模板，邏輯部分爲js代碼。在運行期小程序將全部代碼作一次性加載，而後解析執行。每一個頁面由單獨的webview 窗口負責渲染，全部邏輯代碼運行在一個js引擎中。js引擎負責和素有窗口通訊，並維護數據模型和響應事件。

對mpvue來講，要作的事情是讓 Vue.js 語法規範的代碼，在JS引擎中運行，具體的實現方式是引入mpvue的SDK。在小程序的運行環境當中，同時存在小程序對象和vue對象。mpvue 經過事件代理，生命週期打通，數據同步的方式實現了兩個對象的通訊。

mpvue的主要工做體如今三個方面：開發階段，經過命令行工具快速搭建項目；代碼構建階段負責將代碼編譯轉化成小程序的目標代碼；代碼執行階段負責經過維護 Vue.js 對象來來管理小程序對象。

利用引入 Vue.js runtime 來支持的 Vue.js 語法思路的思路並不難想到，寫出 demo 驗證其可行性較卻難了許多，但最難之處還在於具體實現。在咱們看來 mpvue 的難點和核心能力主要體如今如下三方面：

• 構建階段的代碼編譯能力，即 Vue 模板視圖層代碼編譯爲小程序版本。 咱們的設計是： Vue.js 維護一套完整的邏輯視圖層代碼；此外再單獨爲小程序構建出一套視圖層代碼用於小程序視圖生成。這裏的難點在於構建出的小程序模板代碼須要具有一些特定能力，下文將詳細展開。
• 運行時雙實例關聯和生命週期互通，小程序 Page 實例和 Vue 實例須要提早在 Vue.js runtime 中創建好綁定。 具體的實現細節是：先建立 Vue 對象，在 Vue 對象的做用域中調用小程序 Page 函數初始化頁面，同時將全部信息掛載到 Vue 實例，Pages 生命週期內設置 hook 調用 Vue 生命週期函數，其間全部數據從 Vue 示例上獲取。
• 另外，咱們設計 mpvue 有一個指導原則，那就是：不創造規範，不引入新的學習成。一切 Vue.js 語法咱們都最大限度支持，盡力作到從 Vue.js 到小程序的零成本切換。

mpvue 最佳實踐

mpvue 聚焦於解決小程序開發的效率問題，經過框架機制、語法規範來加強代碼可維護性。同時也爲小程序和H5的代碼複用提供可操做的空間。熟悉前端開發的同窗都知道，小程序和H5自己存在平臺差別，部分能力沒法對齊，在解決兩端差別的訴求上並無銀彈。咱們收到許多相似的問題：mpvue 寫的代碼如何在瀏覽器中運行。mpvue 如何解決小程序和H5的跨平臺應用。針對這些問題，咱們建議的方案以下：

• 能夠儘量多的使用小程序語法特性，或者小程序組件，由於後續無需關注將其轉換爲H5組件。
• 杜絕使用瀏覽器強相關的特性，此部分代碼在小程序中沒法運行。
• 儘可能少的使用不推薦的語法特性，小程序環境性能表現不佳，譬如 $ref，filter 等 。

對於 mpvue 同時兼顧小程序和H5的場景：

• 使用平臺無關語法作公共構建，此部分能力在兩端表現無明顯差別。
• 平臺強依賴代碼作分別實現，經過抽象出適配層屏蔽平臺差別，如要實現一個slide，map，小程序中有原生組件，但H5須要單獨實現，並不能經過框架實現同等編譯。思路能夠類比react native。

如何快速掌握 mpvue 的能力並用於平常開發：

• 閱讀官方文檔瞭解 mpvue 使用方式。
• 瞭解小程序和H5的能力差別，便於區分出適合H5場景和小程序場景的特性。
• 閱讀mpvue項目 issue，避免常見問題，瞭解解決方案。
• 對於長期建設的小程序，不斷提取公共組件或解決方案，複用到更多場景。

mpvue 將來規劃

mpvue 如今社區實踐使用狀況如何？在我司內部從去年9月份開始大規模使用 mpvue，幾乎全部的場景都趟過一遍。如今正在梳理出出一套從業務應用角度的最佳實踐，在將來的一段時間，會把它以技術博客的方式同步給你們。

mpvue 打算作什麼？框架自己的設計能夠進一步優化，基礎庫大小有壓縮空間，以適應更多的輕量化場景。社區方面，完善一套組建庫方案。長遠的看，咱們計劃把 mpvue 建設成最流行的小程序框架。

mpvue 社區建設

mpvue 自己有一份規劃，咱們正在徵集了更多的 contributor 參與社區建設。如今在公司內外都已經有一些同窗陸續加入，咱們會經過一些機制來完善社區建設。

同時，你們能夠看到各大公司都已經開始在作各自的小程序。對 mpvue 來講咱們能夠作些什麼？暢想一下，將來假設咱們有十個小程序的方案，若是能夠經過寫一套代碼同時試配這些小程序 … 是否是很美好？

寫在最後

此次分享的目的主要是向你們介紹 mpvue 是什麼、有什麼優點、能作什麼、將來計劃是怎樣的。爲你們技術選型提供參考。對於長期維護的開源項目，咱們有專門的技術交流渠道，歡迎你們提供建議，或者貢獻 pr，爲共同促進小程序社區的發展努力。

---

BTW:

歡迎你們使用mpvue，mpvue 自2018年3月8號開源後，目前已經在社區得到大量使用和反饋，如需獲取幫助和了解詳情，請查閱咱們的官網：

• mpvue.com
• github 地址
• mpvue 合做項目
• issue列表