美團外賣小程序的探索與實踐丨掘金開發者大會

掘金開發者大會圓滿結束，其中美團外賣上海研發中心的資深技術專家王善成對美團外賣這個龐大的產品如何在小程序的實現作了演講，本文將帶領你們回顧一下演講中所提到的技術重點。

1、技術架構

業務場景：

採用較開放的框架策略，項目支持自由進入第三方的框架去知足各個應用場景的需求。對主流程等相對獨立性較高的採用微信的原生框架；對於營銷業務上須要支持Web頁面、小程序等多種渠道，經過引入mpvue使多個渠道能夠使用Vue.js的組件。

協同開發：

多團隊開發中，核心的主流程放在主包，其餘業務存放在不一樣的子包中，保證每一個包中的業務相關性比較強，避免用戶使用中頻繁的子包加載過程，也避免團隊業務衝突。將通用組件和各業務的子包託管在npm上進行模塊化的管理，對構建腳本的改造將npm包引入到小程序。

系統架構

最底層是微信的原生組件；中層是各個業務通用的核心組件如：登陸、對vebview的封裝、監控以及數據埋點等，通用組件由統一的團隊去維護和組建；經過對編譯工具進行插件化的改造容許其餘的業務方能引入第三方框架進行開發；最上層是各個業務經過拆包將業務隔離開來；

2、流程和工具

小程序腳手架（初始化）

利用以下架手架可自動初始化小程序項目，生成能夠使用框架的目錄結構，方便小程序的搭建和部署。

組件架手架（初始化）

能夠利用以下架手架自動化建立組件。

開發過程：

本地開發過程以下，在本地工做目錄中去調用命令build讓構建工具執行整個構建過程，生成的目標代碼會寫到本地工做目錄中，再經過微信開發者工具對生成的代碼進行調試和發佈；其中構建腳本提供Mock功能，能夠模擬後端服務器接口。

發佈過程（當前）：

將代碼託管於Git，發佈時CI首先經過Git拉取待發布的代碼且執行構建過程並對源代碼和圖片進行壓縮進一步縮小小程序的體積，同時還對代碼進行語法檢查，對於不經過的代碼將會被打回從新修改纔可再次發佈。

發佈過程（規劃）：

將整個過程經過CI鏈接起來，減小人工操做。

3、組件化

Storage性能：

對小程序原生組件的改造，如下是一份「暴力」測試數據。

• 大小約100k隨機對象讀寫清空緩存各100次，耗時比較
  

Storage數據同步：

原理是在初始化過程中，內存先去調用 wx.getStorageInfo獲取如今小程序getStorage裏面全部的存儲的key值，就能夠獲得一個數據表。在讀的過程當中，首先是 組件的api去觸發讀取的操做，而後內存會查詢我當前有沒有緩存這個數據，沒有的話就經過wx.getStorageInfo獲取，並將值返回回去。寫入只須要寫入到內存當中，這樣寫入的性能就很是高。關於同步機制，美團外賣小程序採起了兩個同步機制進行雙重保障，首先是在小程序的生命週期中調用onHide、把內存中沒有同步到文件的數據經過setlnterval回寫到文件中。爲確保數據同步設置了定時器。