【稿件】以微信小程序?yàn)榇淼摹懊獍惭b”類應(yīng)用的火爆，以及其自成一體的開發(fā)規(guī)范，前端工程師面臨著愈來愈多的跨端開發(fā)工作，每日疲于應(yīng)付;此時(shí)，利用現(xiàn)有技術(shù)?？焖賹?shí)現(xiàn)跨端開發(fā)，成為各個(gè)前端團(tuán)隊(duì)的迫切需求。DCloud CTO崔紅保在WOT2018全球軟件與運(yùn)維技術(shù)峰會(huì)上進(jìn)行了主題為《基于Vue開發(fā)微信小程序和原生App》的演講，崔老師從小程序和App兩個(gè)平臺(tái)入手，對(duì)利用Vue技術(shù)棧進(jìn)行跨端開發(fā)的方案及實(shí)現(xiàn)思路進(jìn)行了詳細(xì)的講解，下面我們先來看看基于Vue是如何實(shí)現(xiàn)微信小程序開發(fā)工作的。

在紅河等地區(qū)，都構(gòu)建了全面的區(qū)域性戰(zhàn)略布局，加強(qiáng)發(fā)展的系統(tǒng)性、市場(chǎng)前瞻性、產(chǎn)品創(chuàng)新能力，以專注、極致的服務(wù)理念，為客戶提供網(wǎng)站設(shè)計(jì)、做網(wǎng)站 網(wǎng)站設(shè)計(jì)制作按需定制設(shè)計(jì),公司網(wǎng)站建設(shè),企業(yè)網(wǎng)站建設(shè),成都品牌網(wǎng)站建設(shè),營(yíng)銷型網(wǎng)站,外貿(mào)網(wǎng)站建設(shè),紅河網(wǎng)站建設(shè)費(fèi)用合理。

圖1 DCloud CTO 崔紅保

開發(fā)微信小程序

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

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

mpvue主要特性

mpvue的主要特性包括：

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

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

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

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

·支持使用npm外部依賴

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

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

mpvue快速體驗(yàn)

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

圖2 mpvue快速體驗(yàn)

mpvue構(gòu)建流程

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

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

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

mpvue實(shí)現(xiàn)原理

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

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

開發(fā)原生App

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

小程序框架

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

圖5 小程序框架

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

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

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

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

基礎(chǔ)組件

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

跳轉(zhuǎn)到新頁面

這個(gè)標(biāo)簽和Vue的router-link標(biāo)簽類似，可以替代。

跳轉(zhuǎn)到新頁面

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

微信原生API

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

圖6 小程序框架-JS API

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

圖7 HTML5+規(guī)范

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

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

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

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

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

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

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

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

·標(biāo)簽使用小程序的wxml

·模板指令使用Vue

·樣式遵循小程序的wxss

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

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

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

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

當(dāng)前題目：DCloud崔紅保：基于Vue技術(shù)開發(fā)微信小程序和原生App
瀏覽路徑：http://www.dlmjj.cn/article/djdegep.html