今天前來專欄分享的極客，是來自美團外賣的小程式前端團隊。

在 2017 年 1 月 9 日，美團外賣作為首批小程式正式上線，截止到目前，美團外賣小程式 DAU 已近千萬。但事實上，美團外賣早期時更多的是主打手機網頁端，在美團外賣的小程式剛上線時並沒有過多去維護，之後才與微信官方有了更多交流。在此基礎上，美團還開源了 mpvue 框架來優化小程式的開發體驗。

那麼美團為何對小程式發生了態度轉變，如今如此看重其發展呢？一起來看看今天的極客故事。

正文

美團外賣小程式前端團隊共有 10 餘人，歸屬於美團外賣上海研發中心。這個團隊沒有長期固定的職責分工，團隊會根據業務需求再劃分不同的成員跟進不同的專案，除了美團、美團外賣 App 之外的其它渠道也都屬於團隊的業務範圍，比如網站和小程式等，每個人負責的工作會隨著業務的變化而調整。

而就是這樣並不「常規」的團隊，他們密切關注著小程式平臺化、端到端監控、效能優化等方向，同時也在不動聲色地通過技術手段擴充套件著美團外賣的渠道和流量。

小程式與網頁端的異同

不少人會疑惑，已有 App 端與網頁端的美團外賣，為何還要做小程式端，且投入程度並不亞於 App 與網頁？當問到團隊負責人王善成時，他的回答頗為乾脆：

小程式的入口場景比 H5 要好，有流量紅利。功能上和手機網頁端各有優勢。美團決定將手機網頁端切換至微信小程式，也是看好了小程式未來的發展。微信小程式從釋出之初發展到現在，生態發展非常迅速，小程式開發者越來越活躍。

目前美團外賣小程式上開展的業務跟移動端/網頁端基本相同，但還是有一些小的區別

。比如小程式中有拼單的功能：建立拼單之後，好幾個人可以一起點餐，然後統一結算。這個功能是小程式中獨有的。一些新功能，也會根據業務需求先在某一個端上線。 而在需求提審方面，小程式從提出需求到上線的流程和網頁端一致：會先進行需求預評審，這一步主要是調研小程式的能力能否滿足需求。需求預評審完成後會進行正式的需求評審，給出開發的排期。完成開發後，開發和 QA 會共同進行測試。產品驗收後部署上線。

小程式開發的元件化

當問到小程式的難點是什麼，相信不少開發者會回答「元件」。

其實微信團隊對於原生小程式在不斷完善，在元件化方面，小程式最初是通過 template 編寫元件，之後上線了自定義元件，可以對元件更好的封裝。微信團隊近期計劃支援小程式可以直接使用 npm，即各業務開發各自元件和子包託管在 npm 上，由小程式主專案聚合各業務功能。這項計劃一旦推行，必將在現有的缺少元件管理問題上獲得很大的改善。

聊到「元件」問題，美團外賣小程式團隊對開發者還有一些建議：目前很多開源框架解決了元件化的問題。不過隨著小程式對元件的支援不斷完善，後期框架可能會發生分裂。從一個框架遷移到另一個框架的成本很高，需要考慮如何規避這個風險。

不可忽略的還有小程式的一些調整。最初小程式提供的一些 API ，後面被廢棄。開發者需要提前做好準備，規避潛在的問題。比如跳轉 API 被廢棄，現在需要通過元件進行跳轉。

針對以上問題，使用元件化的開源框架，如：Taro、WePY、mpvue 可以解決一部分。 目前美團外賣小程式中，部分業務使用了 mpvue。一些小的專案會從最初設計時就避免元件化的問題。比較大的專案會用開源框架，即使不用開源框架也有自己的解決方案或者自定義元件。

美團外賣現在也在做一些原生框架，最終期望實現這套原生框架可以相容 Taro、WePY 等。

美團開源框架 mpvue

小程式本身定位為一個簡單的邏輯檢視層框架，官方並不推薦用來開發複雜應用，但業務需求卻難以做到精簡。複雜的應用對開發方式有較高的要求，如元件和模組化、自動構建和整合、程式碼複用和開發效率等，但目前的小程式開發規範還不太適合這部分能力。

前文中提到的 mpvue 就是為改善上述問題而誕生的，旨在提供給開發者更好的開發體驗。美團的開源框架 mpvue 是一套定位於開發小程式的前端開發框架，其核心目標是提高開發效率，增強開發體驗。使用該框架，開發者只需初步瞭解小程式開發規範、熟悉 Vue.js 基本語法即可上手。框架提供了完整的 Vue.js 開發體驗，開發者編寫 Vue.js 程式碼，mpvue 將其解析轉換為小程式並確保其正確執行。

比如下面的世界盃集卡活動，在這款小程式內就使用了 mpvue 進行開發，運用 Vue.js 開發的業務元件能夠同時在小程式和 Web 頁面中複用，可以實現多個渠道同時投放。

那麼 mpvue 的實現原理是什麼呢？

Vue.js 和小程式都是典型的邏輯檢視層框架，邏輯層和檢視層之間的工作方式為：資料變更驅動檢視更新；檢視互動觸發事件，事件響應函式修改資料再次觸發檢視更新。

鑑於 Vue.js 和小程式一致的工作原理，可以將小程式的功能託管給 Vue.js，在正確的時機將資料變更同步到小程式，從而達到開發小程式的目的。這樣，我們可以將精力聚焦在 Vue.js 上，參照 Vue.js 編寫與之對應的小程式程式碼，小程式負責檢視層展示，所有業務邏輯收斂到 Vue.js 中，Vue.js 資料變更後同步到小程式，如下圖所示。

mpvue 的初衷是讓 Vue.js 的開發者以低成本接入小程式開發，做到程式碼的低成本遷移和複用。除了 mpvue，美團表示後續在開發過程中遇到比較有價值的專案還會考慮開源。相信美團在未來也會繼續擴充套件現有能力、解決開發者的訴求、優化使用體驗、完善周邊生態建設，幫助到更多的開發者。

微信小程式開發的獨特魅力

聊到開發微信小程式，作為美團的資深技術專家的王善成認為微信開發者工具「很有意思」：「小程式的開發者工具是前端的能力往桌面端發展的一個很棒的例子，可以看到前端技術在朝著多元化發展。」

不僅是微信開發者工具，微信開發文件也廣受好評。當被問及「一個三年前端開發經驗的同學，最快上手小程式開發的方式是什麼？大概花多長時間可以融入團隊開始有正常產出？」時，美團外賣小程式團隊表示：「小程式官方文件非常完善，開發體驗和 Web 相似。對於有經驗的前端開發來說，看一遍官方文件就可以很快投入到小程式開發中。如果全天專注研究官方文件，僅需 1 天就可以投入業務開發。但是想有更深入的理解，還需要花更多時間。」

目前的微信開放使用者登陸、授權同樣受到了廣大開發者的推崇。在以往 H5 開發中，使用者的資訊都靠快取來保留，但是快取不可靠，容易丟失。一旦快取丟失，就無法為使用者提供個性化的服務。而且美團外賣對資料統計要求比較高，尤其是 UV 的統計資訊，如果快取丟失，UV 的統計資料會比實際高。「現在微信開放使用者登陸和授權後，記錄使用者資訊不再需要靠快取，比較可靠。」

App 功能複雜，效能好；網頁便捷靈活，但互動上有一定受限；小程式、快應用、PWA 雖然實現的技術上有差異，但最終的目的都是為了融合 App 和網頁的優勢。微信小程式 API 延伸了 Native 功能，實現了更為便捷的開發使用及複雜功能。

其實不僅是餐飲外賣服務，微信現在開放的能力已經能夠滿足多種行業的基本業務需求。千萬開發者和使用者對微信小程式的發展充滿了信心，共同期待著小程式能夠變得更好，讓更多人從中受益。

瞭解更多微信小程式開發者內容，歡迎掃碼關注微信公眾號——微信極客WeGeek