今天,我們來(lái)介紹一款由美團(tuán)點(diǎn)評(píng)研發(fā),使用 Vue.js 來(lái)開發(fā)微信小程序的前端框架 —— mpVue。使用此框架,開發(fā)者將得到完整的 Vue.js 開發(fā)體驗(yàn),同時(shí)為 H5 和小程序提供了代碼復(fù)用的能力。如果想將 H5 項(xiàng)目改造為小 ...
在尤大微博鋪墊著“將會(huì)引入一些關(guān)于 TypeScript 的改進(jìn)”一周之后,代號(hào)為 Level E 的 Vue.js 2.5 帶著日漫風(fēng)來(lái)到了我們眼前。從 Release Notes 可以看到,Vue.js 2.5 有著更好的 TypeScript 集成,更好的錯(cuò)誤處理,更好地支持單文件組件中的函數(shù)式組件以及與環(huán)境無(wú)關(guān)的服務(wù)端渲染。具體如下:
更好的 TypeScript 集成
得益于 TypeScript 團(tuán)隊(duì)的幫助,2.5 提供了大大改進(jìn)的類型聲明:
注意:TypeScript 用戶還應(yīng)將以下包更新為最新版本從而兼容類型聲明:vue-router,vuex,vuex-router-sync 和 vue-class-component。
更好地錯(cuò)誤處理
在 2.4 及更早版本中,我們通常使用全局 config.errorHandleroption 來(lái)處理應(yīng)用程序中的意外錯(cuò)誤。 我們還有 renderError 組件選項(xiàng)來(lái)處理渲染函數(shù)中的錯(cuò)誤。 但是,我們?nèi)鄙偬幚響?yīng)用程序特定部分內(nèi)的泛型錯(cuò)誤的機(jī)制。
在2.5中,我們引入了新的 errorCaptured 鉤子。 具有此鉤子的組件捕獲其子組件樹(不包括其自身)中的所有錯(cuò)誤(不包括在異步回調(diào)中調(diào)用的那些)。 如果你熟悉 React,這與 React 16 中引入的錯(cuò)誤邊界的概念相似。鉤子接收與全局 errorHandler 相同的參數(shù),你可以利用這個(gè) 鉤子(https:// gist.github.com/yyx990803/ 9bdff05e5468a60ced06c29c39114c6b #error-handling-with-errorcaptured-hook)來(lái)優(yōu)雅地處理和顯示錯(cuò)誤。
更好地支持 SFC 中的函數(shù)式組件
使用 vue-loader> = 13.3.0 和 Vue 2.5,在 * .vue 文件中定義為單個(gè)文件組件的函數(shù)式組件現(xiàn)在可以得到正確的模板編譯,Scoped CSS和熱重新加載支持。 這使得將葉子組件轉(zhuǎn)換為函數(shù)式的更為容易,從而進(jìn)行性能優(yōu)化。
與環(huán)境無(wú)關(guān)的服務(wù)端渲染
vue-server-renderer 的默認(rèn)構(gòu)建假定一個(gè) Node.js 環(huán)境,這使得它在有的 JavaScript 運(yùn)行時(shí)(如 php-v8js 或Nashorn)中不可用。 在 2.5 中,我們已經(jīng)發(fā)布了一個(gè)與環(huán)境無(wú)關(guān)的 vue-server-renderer 版本,可以在瀏覽器或純 JavaScript 引擎中使用。 這可以打開有趣的策略,例如直接在 PHP 進(jìn)程中使用 Vue 服務(wù)端渲染。
同樣,建議你查看完整的發(fā)布說(shuō)明從而了解其他 API 的改進(jìn),包括 v-on,v-model,scoped slot,provide/inject 等。
Vue 2.5.0 源碼下載:https://codeload.github.com/vuejs/vue/zip/v2.5.0
Vue.js 這款漸進(jìn)式的 JavaScript 框架自 2013 年發(fā)布至今,其簡(jiǎn)潔的語(yǔ)法設(shè)計(jì)、輕量快速的特點(diǎn)深受技術(shù)社區(qū)喜愛,在國(guó)內(nèi)外都獲得了非常廣泛的應(yīng)用及拓展,比如餓了么的開源組件庫(kù) Element UI 即是 Vue 開發(fā),而阿里巴巴的 Weex 與 Vue 也多有合作。
今天,我們來(lái)介紹一款由美團(tuán)點(diǎn)評(píng)研發(fā),使用 Vue.js 來(lái)開發(fā)微信小程序的前端框架 —— mpVue。使用此框架,開發(fā)者將得到完整的 Vue.js 開發(fā)體驗(yàn),同時(shí)為 H5 和小程序提供了代碼復(fù)用的能力。如果想將 H5 項(xiàng)目改造為小程序,或開發(fā)小程序后希望將其轉(zhuǎn)換為 H5,mpVue將是十分契合的方案。
為了提高開發(fā)效率,增強(qiáng)開發(fā)體驗(yàn),我們?cè)炝藗€(gè)用 Vue 開發(fā)小程序的輪子
小程序開發(fā)特點(diǎn)
微信小程序推薦簡(jiǎn)潔的開發(fā)方式,通過(guò)多頁(yè)面聚合完成輕量的產(chǎn)品功能。小程序以離線包方式下載到本地,通過(guò)微信客戶端載入和啟動(dòng),開發(fā)規(guī)范簡(jiǎn)潔,技術(shù)封裝徹底,自成開發(fā)體系,有 Native 和 H5 的影子,但又絕不雷同。
小程序本身定位為一個(gè)簡(jiǎn)單的邏輯視圖層框架,官方并不推薦用來(lái)開發(fā)復(fù)雜應(yīng)用,但業(yè)務(wù)需求卻難以做到精簡(jiǎn)。復(fù)雜的應(yīng)用對(duì)開發(fā)方式有較高的要求,如組件和模塊化、自動(dòng)構(gòu)建和集成、代碼復(fù)用和開發(fā)效率等,但小程序開發(fā)規(guī)范較大地限制了這部分能力。為了解決上述問(wèn)題,提供更好的開發(fā)體驗(yàn),我們創(chuàng)造了 mpVue,通過(guò)使用 Vue.js 開發(fā)微信小程序。
mpVue 是什么
mpVue 是一套定位于開發(fā)小程序的前端開發(fā)框架,其核心目標(biāo)是提高開發(fā)效率,增強(qiáng)開發(fā)體驗(yàn)。使用該框架,開發(fā)者無(wú)須了解小程序開發(fā)規(guī)范,只需要熟悉 Vue.js 基本語(yǔ)法即可上手??蚣芴峁┝送耆?Vue.js 開發(fā)體驗(yàn),開發(fā)者編寫 Vue.js 代碼,mpVue 將其解析轉(zhuǎn)換為小程序并確保其正確運(yùn)行。此外,框架還通過(guò) CLI 工具向開發(fā)者提供 Quick Start 示例代碼,開發(fā)者只需執(zhí)行一條簡(jiǎn)單命令,即可獲得可運(yùn)行的項(xiàng)目。
為什么做 mpVue
在小程序內(nèi)測(cè)之初,我們計(jì)劃快速迭代出一款對(duì)標(biāo) H5 的產(chǎn)品實(shí)現(xiàn),其核心訴求在于快速實(shí)現(xiàn)、代碼復(fù)用、低成本和高效率等。隨后我們經(jīng)歷了多個(gè)小程序建設(shè),結(jié)合業(yè)務(wù)場(chǎng)景、技術(shù)選型和小程序開發(fā)方式,整理匯總出了開發(fā)階段面臨的主要問(wèn)題:
具體體現(xiàn)為:
另一方面,小程序開發(fā)方式與 H5 近似,因此我們考慮和 H5 做代碼復(fù)用。同時(shí),沿襲團(tuán)隊(duì)技術(shù)棧選型,我們將 Vue.js 確定為小程序開發(fā)規(guī)范。使用 Vue.js 開發(fā)小程序,將直接帶來(lái)如下開發(fā)效率的提升:
為什么是 Vue.js?這取決于團(tuán)隊(duì)技術(shù)棧選型,引入新的選型對(duì)統(tǒng)一技術(shù)棧和提高開發(fā)效率相悖,有違開發(fā)工具服務(wù)業(yè)務(wù)的初衷。
mpVue 的演進(jìn)
mpVue 的形成,來(lái)源于業(yè)務(wù)場(chǎng)景和需求,最終方案的確定,經(jīng)歷了三個(gè)階段。
mpVue 設(shè)計(jì)思路
Vue.js 和小程序都是典型的邏輯視圖層框架,邏輯層和視圖層之間的工作方式為:數(shù)據(jù)變更驅(qū)動(dòng)視圖更新;視圖交互觸發(fā)事件,事件響應(yīng)函數(shù)修改數(shù)據(jù)再次觸發(fā)視圖更新,如圖 1 所示。
圖 1 小程序?qū)崿F(xiàn)原理
鑒于 Vue.js 和小程序一致的工作原理,我們思考將小程序的功能托管給 Vue.js,在正確的時(shí)機(jī)將數(shù)據(jù)變更同步到小程序,從而達(dá)到開發(fā)小程序的目的。這樣,我們可以將精力聚焦在 Vue.js 上,參照 Vue.js 編寫與之對(duì)應(yīng)的小程序代碼,小程序負(fù)責(zé)視圖層展示,所有業(yè)務(wù)和邏輯收斂到 Vue.js 中,Vue.js 數(shù)據(jù)變更后同步到小程序,如圖 2 所示。如此一來(lái),我們就獲得了以 Vue.js 的方式開發(fā)小程序的能力。為此,我們?cè)O(shè)計(jì)的方案如下:
圖 2 mpVue 實(shí)現(xiàn)原理
Vue 代碼:
小程序代碼:
并在此基礎(chǔ)上,附加如下機(jī)制:
這套機(jī)制總結(jié)起來(lái)非常簡(jiǎn)單,但實(shí)現(xiàn)卻相當(dāng)復(fù)雜。在揭秘具體實(shí)現(xiàn)之前,讀者可能會(huì)有這樣一些疑問(wèn):
上述問(wèn)題包含了 mpVue 框架的核心內(nèi)容,下文將仔細(xì)為你道來(lái)。首先,mpVue 為提高效率而生,本身提供了自動(dòng)生成小程序代碼的能力,小程序代碼根據(jù) Vue.js 代碼構(gòu)建得到,并不需要同時(shí)開發(fā)兩套代碼。
Vue.js 視圖層渲染由 Render 方法完成,同時(shí)在內(nèi)存中維護(hù)著一份虛擬 DOM,mpVue 無(wú)需使用 Vue.js 完成視圖層渲染,因此我們改造了 Render 方法,禁止視圖層渲染。熟悉源代碼的讀者都知道 Vue RunTime 有多個(gè)平臺(tái)的實(shí)現(xiàn),除了我們常見的 Web 平臺(tái),還有 Weex。從現(xiàn)在開始,我們?cè)黾恿诵碌钠脚_(tái) mpVue。
再看第三個(gè)問(wèn)題,生命周期和數(shù)據(jù)同步是 mpVue 框架的靈魂,Vue.js 和小程序的數(shù)據(jù)彼此隔離,各自有不同的更新機(jī)制。mpVue 從生命周期和事件回調(diào)函數(shù)切入,在 Vue.js 觸發(fā)數(shù)據(jù)更新時(shí)實(shí)現(xiàn)數(shù)據(jù)同步。小程序通過(guò)視圖層呈現(xiàn)給用戶、通過(guò)事件響應(yīng)用戶交互,Vue.js 在后臺(tái)維護(hù)著數(shù)據(jù)變更和邏輯??梢钥吹剑瑪?shù)據(jù)更新發(fā)端于小程序,處理自 Vue.js,Vue.js 數(shù)據(jù)變更后再同步到小程序。為實(shí)現(xiàn)數(shù)據(jù)同步,mpVue 修改了 Vue.js RunTime 實(shí)現(xiàn),在 Vue.js 的生命周期中增加了更新小程序數(shù)據(jù)的邏輯。
而用戶交互觸發(fā)的數(shù)據(jù)更新則是通過(guò)事件代理機(jī)制完成。在 Vue.js 代碼中,事件響應(yīng)函數(shù)對(duì)應(yīng)到組件的 method 方法,Vue.js 自動(dòng)維護(hù)了上下文環(huán)境。然而在小程序中并沒有類似的機(jī)制,又因?yàn)?Vue.js 執(zhí)行環(huán)境中維護(hù)著一份實(shí)時(shí)的虛擬 DOM,這與小程序的視圖層完全對(duì)應(yīng)。我們思考,在小程序組件節(jié)點(diǎn)上觸發(fā)事件后,只要找到虛擬 DOM 上對(duì)應(yīng)的節(jié)點(diǎn),觸發(fā)對(duì)應(yīng)的事件不就完成了么。Vue.js 事件響應(yīng)如果觸發(fā)了數(shù)據(jù)更新,其生命周期函數(shù)更新將自動(dòng)觸發(fā),在此函數(shù)上同步更新小程序數(shù)據(jù),數(shù)據(jù)同步就實(shí)現(xiàn)了。
mpVue 如何使用
mpVue 框架本身由多個(gè) npm 模塊構(gòu)成,入口模塊已經(jīng)處理好依賴關(guān)系,開發(fā)者只需要執(zhí)行如下代碼即可完成本地項(xiàng)目創(chuàng)建。
# 安裝 vue-cli
$ npm install --global vue-cli
# 根據(jù)模板項(xiàng)目創(chuàng)建本地項(xiàng)目,目前為內(nèi)網(wǎng)地址,暫穩(wěn)開放
$ vue init ‘bitbucket:xxx.meituan.com:hfe/mpvue-quickstart’ --clone my-project
# 安裝依賴和啟動(dòng)自動(dòng)構(gòu)建
$ cd my-project
$ npm install
$ npm run dev
執(zhí)行完上述命令,在當(dāng)前項(xiàng)目的 dist 子目錄將構(gòu)建出小程序目標(biāo)代碼,使用小程序開發(fā)者工具載入 dist 目錄即可啟動(dòng)本地調(diào)試和預(yù)覽。
示例項(xiàng)目遵循 Vue.js 模板項(xiàng)目規(guī)范,通過(guò) Vue.js 命令行工具 vue-cli 創(chuàng)建。代碼組織形式與 Vue.js 官方實(shí)例保持一致,我們?yōu)樾〕绦蚨ㄖ屏?Vue.js RunTime 和 Webpack 加載器,此部分依賴也已經(jīng)內(nèi)置到項(xiàng)目中。
針對(duì)小程序開發(fā)中常見的兩類代碼復(fù)用場(chǎng)景,mpVue 框架為開發(fā)者提供了解決思路和技術(shù)支持,開發(fā)者只需要在此指導(dǎo)下進(jìn)行項(xiàng)目配置和改造。
將小程序轉(zhuǎn)換為 H5
直接使用 Vue.js 規(guī)范開發(fā)小程序,代碼本身與 H5 并無(wú)不同,具體代碼差異會(huì)集中在平臺(tái) API 部分。此外無(wú)需明顯改動(dòng),改造主要分以下幾個(gè)部分:
將 H5 轉(zhuǎn)換為小程序
已經(jīng)使用 Vue.js 開發(fā)完 H5,則需要完成以下事宜:
根據(jù)小程序開發(fā)平臺(tái)提供的能力,我們最大程度地支持了 Vue.js 語(yǔ)法特性,但部分功能現(xiàn)階段暫時(shí)尚未實(shí)現(xiàn),具體見表 1。
表 1 mpVue 暫不支持的語(yǔ)法特性
mpVue 框架的目標(biāo)是將小程序和 H5 的開發(fā)方式通過(guò) Vue.js 建立關(guān)聯(lián),達(dá)到最大程度的代碼復(fù)用。但由于平臺(tái)差異的客觀存在(主要集中在實(shí)現(xiàn)機(jī)制、底層 API 能力差異),我們無(wú)法做到代碼 100%復(fù)用,平臺(tái)差異部分的改造成本無(wú)法避免。對(duì)于代碼復(fù)用的場(chǎng)景,開發(fā)者需要重點(diǎn)思考如下問(wèn)題并做好準(zhǔn)備:
mpVue 最佳實(shí)踐
在表 2 中,我們對(duì)微信小程序、mpVue、WePY 這三個(gè)開發(fā)框架的主要能力和特點(diǎn)做了橫向?qū)Ρ?,幫助大家了解不同框架的?cè)重點(diǎn),結(jié)合業(yè)務(wù)場(chǎng)景和開發(fā)習(xí)慣,確定技術(shù)方案。對(duì)于如何更好地使用 mpVue 進(jìn)行小程序開發(fā),我們總結(jié)了一些最佳實(shí)踐。
表 2 框架主要能力及特性對(duì)比
結(jié)語(yǔ)
mpVue 框架已經(jīng)在業(yè)務(wù)項(xiàng)目中得到實(shí)踐和驗(yàn)證,目前開發(fā)文檔也已經(jīng)就緒,正在做開源前的最后準(zhǔn)備,希望能夠?yàn)樾〕绦蚝?Vue.js 生態(tài)貢獻(xiàn)一份力量。mpVue 的初衷是希望讓 Vue.js 的開發(fā)者以低成本接入小程序開發(fā),其能力和使用體驗(yàn)還有待進(jìn)一步的檢驗(yàn)。我們未來(lái)會(huì)繼續(xù)擴(kuò)展現(xiàn)有功能、解決用戶的問(wèn)題和需求、優(yōu)化開發(fā)體驗(yàn)、完善周邊生態(tài)建設(shè),以幫助到更多的開發(fā)者。
需要說(shuō)明一下,mpVue 是通過(guò) fork Vue.js 源碼進(jìn)行二次開發(fā),新增加了 mp 平臺(tái)的 Vue.js 實(shí)現(xiàn),我們保留了跟隨 Vue.js 版本升級(jí)的能力,希望未來(lái)能夠?qū)崿F(xiàn)更好的能力增強(qiáng),最后感謝 Vue.js 框架和微信小程序?qū)I(yè)界帶來(lái)的便利
工作日 8:30-12:00 14:30-18:00
周六及部分節(jié)假日提供值班服務(wù)