WeGeek Talk | 美團外賣

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

在 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