本文由
GitChat授權轉發，轉載需與GitChat聯絡。 原文連結
本文作者：美團點評 胡成全
前言
小程式面世一年多以來，給前端開發帶來了巨大的影響，有移動應用的地方，就有小程式的蹤跡。經過一年多的發展和沉澱，小程式能力不斷放開，產品形態日趨成熟，已經發展成獨立的端上開發技術體系，儼然與 H5、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號開源後，目前已經在社群獲得大量使用和反饋，如需獲取幫助和了解詳情，請查閱我們的官網：