【51CTO.com原創(chuàng)稿件】以微信小程序為代表的“免安裝”類應(yīng)用的火爆，以及其自成一體的開發(fā)規(guī)范，前端工程師面臨著愈來愈多的跨端開發(fā)工作，每日疲于應(yīng)付;此時，利用現(xiàn)有技術(shù)棧快速實現(xiàn)跨端開發(fā)，成為各個前端團隊的迫切需求。DCloud CTO崔紅保在WOT2018全球軟件與運維技術(shù)峰會上進行了主題為《基于Vue開發(fā)微信小程序和原生App》的演講，崔老師從小程序和App兩個平臺入手，對利用Vue技術(shù)棧進行跨端開發(fā)的方案及實現(xiàn)思路進行了詳細的講解，下面我們先來看看基于Vue是如何實現(xiàn)微信小程序開發(fā)工作的。

[[231284]]

圖1 DCloud CTO 崔紅保

開發(fā)微信小程序

隨著微信小程序的興起，小程序背后的技術(shù)支持也如雨后春筍般層出不窮，縱觀各家解決方案，僅有兩家方案可以支持Vue的開發(fā)。其中之一是騰訊推出了一款類Vue的方案——WePy，但WePy無法完整的支持Vue開發(fā);其二是美團·點評團隊推出的mpvue，mpvue框架支持完整的Vue開發(fā)體驗，解決了廣大Vue開發(fā)者開發(fā)小程序的痛點，因此一經(jīng)推出，在短短20天的時間內(nèi)，就獲得了7k+的用戶。

感謝mpvue開發(fā)團隊，為我們解決小程序的問題。下面會簡單快速介紹一下mpvue的主要特點及原理。

mpvue主要特性

mpvue的主要特性包括：

·徹底的組件化開發(fā)能力：提高代碼復(fù)用性

·完整的Vue.js開發(fā)體驗

·方便的Vuex數(shù)據(jù)管理方案：方便構(gòu)建復(fù)雜應(yīng)用

·快捷的webpack構(gòu)建機制：自定義構(gòu)建策略、開發(fā)階段hotReload

·支持使用npm外部依賴

·使用Vue.js命令行工具vue-cli快速初始化項目

·H5代碼轉(zhuǎn)換編譯成小程序目標代碼的能力

mpvue快速體驗

按照mpvue官方文檔，安裝vue-cli工具，執(zhí)行init命令就可以創(chuàng)建一個mpvue-quickstart模板項目，創(chuàng)建步驟及模板項目目錄結(jié)構(gòu)如下圖所示：

圖2 mpvue快速體驗

mpvue構(gòu)建流程

構(gòu)建流程是mpvue最核心的地方之一，通過webpack，完成了vue template到微信小程序的wxml及wxss的轉(zhuǎn)換，最終使之可以運行在微信小程序環(huán)境中。

如下圖所示，src目錄是標準的小程序目錄結(jié)構(gòu)，dist目錄是經(jīng)過mpvue-loader編譯器轉(zhuǎn)化之后的目錄，可見下圖中的index.vue和main.js文件，轉(zhuǎn)成了小程序的js、wxml和wxss三個文件，甚至可能還會有第四個文件——json文件;而app.vue文件轉(zhuǎn)成了app.js、app.json和app.wxss文件。

圖3 mpvue構(gòu)建流程

mpvue實現(xiàn)原理

Vue.js 和小程序都是典型的邏輯視圖層框架，工作原理類似，都是數(shù)據(jù)變更驅(qū)動視圖更新，視圖交互觸發(fā)事件，事件響應(yīng)函數(shù)修改數(shù)據(jù)，然后再次更新視圖。mpvue實際上作為一個橋梁，將小程序的數(shù)據(jù)綁定功能托管給了Vue;小程序負責視圖層展示，數(shù)據(jù)邏輯收斂到Vue中，Vue中數(shù)據(jù)變更后再同步到小程序，從而實現(xiàn)了兩套框架的數(shù)據(jù)同步。

圖4 mpvue實現(xiàn)原理

開發(fā)原生App

通過前面的介紹，我們了解到，借助mpvue，開發(fā)者可以基于Vue技術(shù)棧開發(fā)微信小程序;接下來的問題，如何基于Vue技術(shù)棧開發(fā)原生App呢?DCloud的思路是，既然已經(jīng)可以在小程序中正常運行，那實現(xiàn)一套和小程序一樣的App運行時環(huán)境，發(fā)布App的問題也就解決了。下面會分析小程序在運行時的框架并講解如何模擬小程序的運行時環(huán)境。

小程序框架

小程序框架主要分為視圖層和邏輯層，核心是一套響應(yīng)的數(shù)據(jù)綁定系統(tǒng)，另外還包括基礎(chǔ)組件、頁面管理、微信JS API幾部分，如下圖所示：

圖5 小程序框架

數(shù)據(jù)綁定系統(tǒng)

小程序視圖層接收邏輯層的數(shù)據(jù)并渲染成UI視圖，同時將視圖層的事件發(fā)送給邏輯層。小程序的視圖是通過webview渲染的(并非原生渲染)，在iOS平臺由WKWebview渲染，在Android平臺則由 X5 基于 Mobile Chrome 53/57 內(nèi)核來渲染。

邏輯層負責數(shù)據(jù)處理并輸出給視圖層，同時接收視圖層的事件通知。邏輯層和視圖層不同，并不是在webview中執(zhí)行，而是在一個獨立的JS進程(引擎)中運行。準確來說，iOS平臺的小程序邏輯層運行在JavaScriptCore 中，Android平臺的小程序邏輯層則運行在X5 的JSCore中。開發(fā)者在小程序中不同js文件寫的所有JavaScript代碼，***都會被打包合并成一份JavaScript代碼，然后運行在獨立的JS進程中。

拋開JS獨立進程還是webview運行環(huán)境不談，單說邏輯層和視圖層這套數(shù)據(jù)響應(yīng)框架，Vue其實有對應(yīng)的實現(xiàn)，小程序和Vue是重復(fù)的，若自己實現(xiàn)一套App運行時環(huán)境的話，其實可以直接使用Vue的runtime，無需實現(xiàn)小程序的這套數(shù)據(jù)綁定系統(tǒng)。

基礎(chǔ)組件

小程序為開發(fā)者提供了一系列的基礎(chǔ)組件，包括：視圖容器、基礎(chǔ)內(nèi)容、表單組件、導(dǎo)航、媒體組件、地圖、畫布、開放能力。比如小程序的navigator標簽，

<navigator url=“/page/navigate/navigate”>

跳轉(zhuǎn)到新頁面

</navigator>

這個標簽和Vue的router-link標簽類似，可以替代。

<router-link to=“/page/navigate/navigate”>

跳轉(zhuǎn)到新頁面

</router-link>

至于其他的小程序標簽，比如View，也可以通過Vue的模板來模擬實現(xiàn)，并將這些模板內(nèi)置到runtime中。這樣開發(fā)者繼續(xù)使用小程序的組件標簽，運行時會被Vue的模板替換。

微信原生API

微信小程序經(jīng)過一年多的發(fā)展完善，目前已支持了九大類、數(shù)百個原生API，方便調(diào)起微信及手機設(shè)備原生能力，例如設(shè)備信息、網(wǎng)絡(luò)環(huán)境、掃碼等，且這些API跨iOS、Android兩個平臺，若要將這些API從頭全部模擬實現(xiàn)一遍，將是一個非常巨大的工作量。

圖6 小程序框架-JS API

幸好，DCloud有Html5Plus的積累，經(jīng)過幾年的完善，也早已實現(xiàn)了常用功能的JS封裝。

圖7 HTML5+規(guī)范

我們可以在框架層將微信的API重寫成Html5Plus的JS API，這樣開發(fā)者寫著微信的API，實際調(diào)用的卻是Plus的能力。

當然了，微信API到Plus做不到***轉(zhuǎn)換，比如有一些基于微信自生態(tài)的，微信運動、朋友圈代碼等在Plus里是無法封裝的，所以需要進行條件編譯，從而實現(xiàn)平臺差異的代碼編寫及分平臺build。用微信運動舉例，實際運行如下：

前面已經(jīng)講了小程序運行時的主要功能模塊，并且簡要說了模擬實現(xiàn)的思路，DCloud將這套實現(xiàn)方案稱為uni-app，當然小程序runtime還需要有很多細節(jié)設(shè)計，才能保證***的用戶體驗。下面一個簡單示意圖來表示uni-app模擬實現(xiàn)的思路：

開發(fā)約束及平臺差異

為了兼容小程序和原生App，且盡可能的讓開發(fā)者復(fù)用目前的技術(shù)棧，崔紅保建議開發(fā)uni-app時遵循如下約定：

·通用原生js使用微信API，但建議將wx前綴替換為uni

·平臺特殊API，通過條件編譯調(diào)用平臺原生API

·數(shù)據(jù)綁定使用Vue

·標簽使用小程序的wxml

·模板指令使用Vue

·樣式遵循小程序的wxss

圖8 微信小程序、mpvue和uni-app開發(fā)規(guī)范對比

在語法規(guī)范方面，mpvue和uni-app使用的是Vue開發(fā)規(guī)范，微信小程序使用的是小程序開發(fā)規(guī)范;在標簽集合層，微信小程序和uni-app使用的是wxml，而mpvue使用的是html+wxml;在樣式規(guī)范層，微信小程序和uni-app使用的是wxss，mpvue使用的是sass/less/postcssd;JS能力層，微信小程序和mpvue使用的是wx前綴，uni-app使用的是uni前綴。

在具體實現(xiàn)層面，uni-app目前處于內(nèi)部測試階段，大概一個月左右發(fā)布，uni-app和目前的小程序相比，有些東西是不支持的，比如說分包加載，自定義插件，多線程(webwork)，但同時新增了一些在APP里比較常見，但小程序沒有的功能，比如側(cè)滑導(dǎo)航、頂部選項卡、列表滑動、其它常用模板(登錄、indexList等)。

以上內(nèi)容是51CTO記者根據(jù)DCloud崔紅保在WOT2018全球軟件與運維技術(shù)峰會的演講內(nèi)容整理，更多關(guān)于WOT的內(nèi)容請關(guān)注51cto.com。