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

[[231284]]

圖1 DCloud CTO 崔紅保

開發微信小程序

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

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

mpvue主要特性

mpvue的主要特性包括：

·徹底的組件化開發能力：提高代碼復用性

·完整的Vue.js開發體驗

·方便的Vuex數據管理方案：方便構建復雜應用

·快捷的webpack構建機制：自定義構建策略、開發階段hotReload

·支持使用npm外部依賴

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

·H5代碼轉換編譯成小程序目標代碼的能力

mpvue快速體驗

按照mpvue官方文檔，安裝vue-cli工具，執行init命令就可以創建一個mpvue-quickstart模板項目，創建步驟及模板項目目錄結構如下圖所示：

圖2 mpvue快速體驗

mpvue構建流程

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

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

圖3 mpvue構建流程

mpvue實現原理

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

圖4 mpvue實現原理

開發原生App

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

小程序框架

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

圖5 小程序框架

數據綁定系統

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

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

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

基礎組件

小程序為開發者提供了一系列的基礎組件，包括：視圖容器、基礎內容、表單組件、導航、媒體組件、地圖、畫布、開放能力。比如小程序的navigator標簽，

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

跳轉到新頁面

</navigator>

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

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

跳轉到新頁面

</router-link>

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

微信原生API

微信小程序經過一年多的發展完善，目前已支持了九大類、數百個原生API，方便調起微信及手機設備原生能力，例如設備信息、網絡環境、掃碼等，且這些API跨iOS、Android兩個平臺，若要將這些API從頭全部模擬實現一遍，將是一個非常巨大的工作量。

圖6 小程序框架-JS API

幸好，DCloud有Html5Plus的積累，經過幾年的完善，也早已實現了常用功能的JS封裝。

圖7 HTML5+規范

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

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

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

開發約束及平臺差異

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

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

·平臺特殊API，通過條件編譯調用平臺原生API

·數據綁定使用Vue

·標簽使用小程序的wxml

·模板指令使用Vue

·樣式遵循小程序的wxss

圖8 微信小程序、mpvue和uni-app開發規范對比

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

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

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