引言

移動互聯(lián)網(wǎng)的初期，囿于設(shè)備硬件性能限制，流量以原生App為主，iOS、Android是當(dāng)時兩大平臺。

隨著硬件及OS的更新?lián)Q代，H5可承載的體驗逐步完善，為提高開發(fā)效率、節(jié)約資源（復(fù)用代碼）以及熱更新等目的，Hybrid模式成為主流；以及輕應(yīng)用、服務(wù)號等平臺的助推，H5網(wǎng)頁流量暴漲，成為第三大平臺。

2017年1月9日，微信發(fā)布小程序，歷經(jīng)3年發(fā)展，在今年主題為”未完成 Always Beta“的微信公開課 PRO上，微信團(tuán)隊披露，2019年小程序日活躍用戶超過 3 億，全年累計成交額達(dá)8000億，同比增長超160%。

看到小程序如此驚人的增長力，我們有理由相信，有中國特色的小程序互聯(lián)網(wǎng)時代已經(jīng)到來，微信小程序也已成為繼iOS、Android、H5之后的第四大流量平臺。

平臺分裂，為不同平臺編寫相同的業(yè)務(wù)代碼，是件無趣的事情。

有追求的程序員，一直在探索代碼復(fù)用的方案，Hybrid App即是代表。

而在如今的小程序時代，對于同樣基于WEB技術(shù)的H5和小程序，如何實現(xiàn)代碼復(fù)用，是很多前端工程師探索的方向。業(yè)內(nèi)也已有不少成熟方案，從場景上來說，大致分為三類：

基于跨端框架，從頭開發(fā)，一套代碼，發(fā)行多個平臺，比如DCloud出品的uni-app、京東凹凸實驗室的taro

復(fù)用H5代碼，轉(zhuǎn)換H5代碼在小程序環(huán)境中執(zhí)行；適用于有H5平臺沉淀，未開發(fā)小程序或小程序完善度較低的開發(fā)者；

• 美團(tuán)的mpvue框架是早期探索解決這個問題的代表，但因小程序不支持dom操作，故mpvue適用于vue的無dom操作的H5代碼轉(zhuǎn)換；
• 最近微信官方推出的kbone，也是為了解決“把 Web 端的代碼挪到小程序環(huán)境內(nèi)執(zhí)行”；不過，kbone 相比 mpvue 前進(jìn)了一步（當(dāng)然也有了新的性能缺陷），因為：

kbone實現(xiàn)了一個適配器，在適配層里模擬出了瀏覽器環(huán)境，讓 Web 端的代碼可以不做什么改動便可運行在小程序里。

3. 復(fù)用小程序代碼，轉(zhuǎn)換小程序代碼在web環(huán)境中運行；適用于有小程序代碼沉淀，未開發(fā)H5或H5平臺完善度較低的開發(fā)者；這個方向業(yè)內(nèi)成熟的方案還比較少。

uni-app近期支持了小程序自定義組件運行到H5平臺，是對如上第三種場景的一種探索。

需求場景

鑒于小程序的低成本獲客特征，很多廠商選擇先開發(fā)小程序，驗證業(yè)務(wù)模式后，再擴(kuò)展至H5、App等其它平臺。

開發(fā)者雖可借助轉(zhuǎn)換器將小程序代碼轉(zhuǎn)換為uni-app項目（或其它跨端框架項目），快速實現(xiàn)多平臺發(fā)行；但不少開發(fā)者是不敢輕易決策將跨端版本替換之前線上的小程序版本的，畢竟線上版本已穩(wěn)定運行了一段時間。

常選的方案是：讓原生小程序版本和uni-app跨端版本并行一段時間，微信平臺繼續(xù)使用原生版本，其它平臺使用uni-app跨端版本；經(jīng)過一段時間驗證uni-app版本穩(wěn)定后，再使用uni-app版替換掉原生小程序版本。

在這段并行的時間內(nèi)，開發(fā)者需要同時維護(hù)微信原生、uni-app兩個版本，新增業(yè)務(wù)需編寫兩份邏輯相同的代碼，重復(fù)勞動，成本疊加，如何改善？

借助uni-app 支持將微信小程序組件運行到H5平臺的特性，我們給出一種思路：

• 開發(fā)者在原生小程序項目中，將新增業(yè)務(wù)以自定義組件的方式開發(fā)，優(yōu)先上線小程序；
• 拷貝小程序組件的wxml/wxss/js/json文件到uni-app 項目下，通過uni-app的編譯器及運行時，保證小程序自定義組件在H5平臺的正確運行。

這個方案的好處是：

• 優(yōu)先小程序開發(fā)，畢竟小程序早已上線，有存量用戶
• 復(fù)用小程序組件，新增業(yè)務(wù)僅需開發(fā)一套代碼即可，降低開發(fā)成本

不止自己開發(fā)的小程序組件，業(yè)內(nèi)開源的三方小程序組件，均可復(fù)制到uni-app項目項目中，運行到H5平臺。

另外，部分公司的產(chǎn)品經(jīng)理，會要求不同平臺有不同的交互，但核心業(yè)務(wù)邏輯是相同的，開發(fā)者常會通過維護(hù)不同項目的方式來滿足產(chǎn)品經(jīng)理需求。此時，采取如上方案，同樣可滿足多個項目復(fù)用相同業(yè)務(wù)邏輯的訴求。

實際上，uni-app之前已支持將小程序自定義組件運行到App平臺，對于有小程序組件沉淀或優(yōu)先小程序的開發(fā)者來說，這是個好消息，一套業(yè)務(wù)組件，快速運行到iOS、Android、H5、微信小程序這四大流量平臺（實際上也可運行到QQ小程序平臺）。

uni-app 引用小程序組件演示

uni-app項目中使用自定義組件的方法很簡單，分為三步：

1、拷貝小程序自定義組件到uni-app項目根目錄下的wxcomponents文件夾下

2、在 pages.json 對應(yīng)頁面的 style -> usingComponents引入組件，如：

{"pages": [{"path": "index/index","style": {"usingComponents": {"custom": "/wxcomponents/custom/index"}}}] }

3、在頁面中使用自定義組件，如：

<!-- 頁面模板 (index.vue) --> <view><!-- 在頁面中對自定義組件進(jìn)行引用 --><custom name="uni-app"></custom> </view>

方案實現(xiàn)思路

簡單介紹下uni-app的多端發(fā)行原理。

uni-app基于Vue.js runtime，頁面文件遵循Vue.js 單文件組件 (SFC) 規(guī)范，天然對H5的支持比較好，發(fā)行到H5平臺時，先通過vue-loader解析.vue文件，導(dǎo)出Vue.js 組件選項對象，然后在運行時補充規(guī)范實現(xiàn)：

• 組件：框架提供內(nèi)置組件（view/swiper/picker等）的實現(xiàn)，保證平臺UI及交互的一致性
• 接口：在H5平臺封裝框架接口，比如路由跳轉(zhuǎn)，showToast等界面交互
• 生命周期：Vue.js的理念是一切皆為組件，沒有應(yīng)用和頁面的概念；框架需創(chuàng)造出應(yīng)用及頁面的概念，模擬onLaunch、onShow等鉤子

uni-app發(fā)行到小程序平臺時，邏輯又有不同，主要工作有2塊：

• 編譯器：將.vue文件拆分成wxml/wxss/js/json4個原生頁面文件
• 運行時：Vue.js和小程序都是邏輯視圖層框架，都有數(shù)據(jù)綁定功能；運行時會實現(xiàn)Vue.js到小程序的數(shù)據(jù)同步，及小程序到Vue.js的事件代理

小程序自定義組件類似小程序原生的頁面開發(fā)，一個自定義組件同樣由wxml/wxss/js/json 4個文件組成，另有單獨的組件規(guī)范（如Component 構(gòu)造器、Behaviors特性等）。

所以，小程序自定義組件運行到H5平臺，可借助uni-app已有平臺功能快速實現(xiàn)：

• 編譯階段：將wxml/wxss/js/json4個文件合并為.vue文件（類似 uni-app 發(fā)行到小程序的逆過程），然后調(diào)用uni-app發(fā)行H5平臺的編譯過程，通過vue-loader解析.vue文件，導(dǎo)出 Vue.js 組件選項對象
• 運行階段：實現(xiàn) Component 構(gòu)造器、Behaviors特性，模擬自定義組件特有的生命周期

編譯：轉(zhuǎn)換文件（mp2vue）

小程序自定義組件發(fā)行到H5平臺，在編譯環(huán)節(jié)主要有2項工作：

將自定義組件的wxml/wxss/js/json 4個文件組成，編譯轉(zhuǎn)換成.vue文件，即小程序轉(zhuǎn)vue，可簡寫為mp2vue

通過vue-loader解析.vue文件，導(dǎo)出 Vue.js 組件選項對象

其中，步驟2是Vue.js項目的標(biāo)準(zhǔn)編譯過程，略過不提；我們重點闡述步驟1。

mp2vue將4個獨立wxml/wxss/js/json 的文件合并成一個.vue文件，并組裝成template、script、style 這種三段式的結(jié)構(gòu)，流程包括：

wxml文件生成template節(jié)點，同時完成指令、事件等模板語法轉(zhuǎn)換

js/json文件生成script節(jié)點，同時完成組件注冊過

wxss文件生成style節(jié)點，自動轉(zhuǎn)換部分css兼容語法

合并為.vue文件

具體實現(xiàn)上，uni-app編譯前先掃描wxcomponents目錄，若存在則認(rèn)為有小程序自定義組件，啟動文件轉(zhuǎn)換工作(uni-migration插件來完成)：

//加載轉(zhuǎn)換器 const migrate = require('@dcloudio/uni-migration') //掃描wxcomponents目錄 const wxcomponents = path.resolve(process.env.UNI_INPUT_DIR, 'wxcomponents') if (fs.existsSync(wxcomponents)) { migrate(wxcomponents, false, {silent: true }) // 轉(zhuǎn)換 mp-weixin 小程序組件 }

接著開始對wxml/wxss/js/json文件逐個解析，并合并為一個.vue文件：

module.exports = function transformFile(input, options) {//首先轉(zhuǎn)換json文件，判斷是否為組件const [jsCode, isComponent] = transformJsonFile(filepath + '.json', deps)options.isComponent = isComponent//轉(zhuǎn)換 wxml 文件const [templateCode, wxsCode = '', wxsFiles = []] = transformTemplateFile(filepath + templateExtname, options)//轉(zhuǎn)換wxss文件const styleCode = transformStyleFile(filepath + styleExtname, options, deps) || ''//轉(zhuǎn)換js文件const scriptCode = transformScriptFile(filepath + '.js', jsCode, options, deps)// 生成合并后的.vue文件源碼return [`${commentsCode}<template> ${templateCode} </template> ${wxsCode} <script> ${scriptCode} </script> <style platform="mp-weixin"> ${styleCode} </style>`,deps,wxsFiles] }

進(jìn)一步細(xì)節(jié)說明，wxml文件轉(zhuǎn)為template節(jié)點時，需完成各項指令、事件等模板語法的轉(zhuǎn)換，例如：

將一個最簡自定義組件，按照如上流程轉(zhuǎn)換，結(jié)果示意如下：

運行時：模擬小程序組件環(huán)境

uni-app的編譯器并不轉(zhuǎn)換小程序組件的 JS 代碼，依然保留Component構(gòu)造器的寫法，甚至其中的API依然是wx.開頭的方式，這些都依賴uni-app在H5平臺的運行時來解決，主要有如下幾部分內(nèi)容：

• Component構(gòu)造器：解析小程序組件的各種選項配置，轉(zhuǎn)換為Vue組件定義，包括變通實現(xiàn)其中的差異部分，如小程序組件特有的”組件所在頁面的生命周期“
• Behaviors特性：轉(zhuǎn)換為Vue的混入（mixin）
• 數(shù)據(jù)響應(yīng)：在H5平臺實現(xiàn)setData接口及this.data.xx = yy的數(shù)據(jù)通訊機(jī)制
• API前綴：可在運行時通過代理機(jī)制，自動將wx.xx替換為uni.xx，這個比較簡單，不詳述

Component構(gòu)造器

uni-app在H5平臺定義了一個Component函數(shù)，執(zhí)行到小程序的Component構(gòu)造器函數(shù)后，開始循環(huán)解析其屬性，并轉(zhuǎn)換成Vue組件屬性，流程示意代碼如下：

export function Component (options) {const componentOptions = parseComponent(options)componentOptions.mixins.unshift(polyfill)componentOptions.mpOptions.path = global['__wxRoute']initRelationsHandler(componentOptions)global['__wxComponents'][global['__wxRoute']] = componentOptions }export function parseComponent (mpComponentOptions) {const {data,options,methods,behaviors,lifetimes,observers,relations,properties,pageLifetimes,externalClasses} = mpComponentOptionsconst vueComponentOptions = {mixins: [],props: {},watch: {},mpOptions: {mpObservers: []}}// 開始逐個解析所有屬性parseData(data, vueComponentOptions)parseOptions(options, vueComponentOptions)parseMethods(methods, vueComponentOptions)parseBehaviors(behaviors, vueComponentOptions)parseLifetimes(lifetimes, vueComponentOptions)parseObservers(observers, vueComponentOptions)parseRelations(relations, vueComponentOptions)parseProperties(properties, vueComponentOptions)parsePageLifetimes(pageLifetimes, vueComponentOptions)parseExternalClasses(externalClasses, vueComponentOptions)parseLifecycle(mpComponentOptions, vueComponentOptions)parseDefinitionFilter(mpComponentOptions, vueComponentOptions)// 返回 Vue 組件return vueComponentOptions }

在這個過程中，需處理小程序自定義組件和 Vue組件的屬性對應(yīng)關(guān)系及細(xì)節(jié)差異，如小程序組件的lifetimes：

小程序的pageLifetimes（組件所在頁面的生命周期）在Vue中是沒有的，需要映射為uni-app封裝的頁面生命周期：

Behaviors特性的實現(xiàn)過程，類似Component構(gòu)造器，不再贅述。

數(shù)據(jù)響應(yīng)

Vue和小程序都有一套數(shù)據(jù)綁定系統(tǒng)，但機(jī)制不同，比如在Vue體系下，數(shù)據(jù)賦值是這樣的：

this.a = 1

但在小程序中，數(shù)據(jù)賦值方式則是這樣的：

this.setData({a:1 }) //響應(yīng)式 this.data.a = 2 //非響應(yīng)式

另外，小程序和Vue在數(shù)據(jù)的properties、observer等方面都存在不少差異，經(jīng)過我們評估，若將小程序的數(shù)據(jù)響應(yīng)用法直接映射到Vue體系下，復(fù)雜度較高且有性能壓力，故uni-app在H5平臺按照微信的語法規(guī)范，單獨實現(xiàn)了一套數(shù)據(jù)響應(yīng)系統(tǒng)。

// 小程序的setData在H5平臺的實現(xiàn) function setData (data, callback) {if (!isPlainObject(data)) {return}Object.keys(data).forEach(key => {if (setDataByExprPath(key, data[key], this.data)) {!hasOwn(this, key) && proxy(this, SOURCE_KEY, key);}});this.$forceUpdate();//數(shù)據(jù)變化，強(qiáng)制視圖更新（響應(yīng)式）isFn(callback) && this.$nextTick(callback); }

將setData掛載到 vm 對象上，可通過this.setData這種小程序的方式調(diào)用；同時將數(shù)據(jù)綁定到data屬性上，支持this.data.xx的訪問方式。

export function initState (vm) {const instanceData = JSON.parse(JSON.stringify(vm.$options.mpOptions.data || {}))vm[SOURCE_KEY] = instanceData//vm對象上掛載 setData 方法，實現(xiàn)小程序方法vm.setData = setData const propertyDefinition = {get () {return vm[SOURCE_KEY]},set (value) {vm[SOURCE_KEY] = value}}//小程序用法，可通過this.data.xx訪問Object.defineProperties(vm, {data: propertyDefinition,properties: propertyDefinition})Object.keys(instanceData).forEach(key => {proxy(vm, SOURCE_KEY, key)}) }

雖然數(shù)據(jù)響應(yīng)是uni-app自己實現(xiàn)的，但渲染依然使用了Vue框架的render函數(shù)，此時需小程序規(guī)范中的this.data.xx和Vue規(guī)范中的this.xx保持一致，通過代理的方式實現(xiàn)：

// mp/polyfill/state/proxy.js const sharedPropertyDefinition = {enumerable: true,configurable: true };function proxy (target, sourceKey, key) {sharedPropertyDefinition.get = function proxyGetter () {return this[sourceKey][key]};sharedPropertyDefinition.set = function proxySetter (val) {this[sourceKey][key] = val;};Object.defineProperty(target, key, sharedPropertyDefinition); }

這里僅列出了主要的幾步，中間涉及細(xì)節(jié)很多；部分無法通過Vue擴(kuò)展機(jī)制實現(xiàn)的功能，只好修改Vue.js的內(nèi)核源碼，比如updateProperties支持、小程序wxs、externalClasses等功能在H5平臺的支持，都需要定制部分 Vue.js runtime 源碼。

結(jié)語

本文分享了uni-app將微信小程序自定義組件發(fā)行到H5平臺的實現(xiàn)思路，希望對大家有所啟發(fā)。

但這種方案，歸根到底是為了解決多套項目并存時的業(yè)務(wù)重復(fù)開發(fā)的問題。

如果你是從頭開發(fā)，我們建議直接選擇業(yè)內(nèi)成熟的跨端框架，既可以保持一套代碼，更省力的維護(hù)，還可以借助框架的成熟生態(tài)（如跨端UI庫及插件市場），基于成熟輪子，快速完成業(yè)務(wù)的上線開發(fā)；

uni-app框架代碼，包括小程序組件發(fā)行到H5平臺的代碼，全部開源在github，如果大家對本文邏輯有疑問，歡迎提交issue交流。

總結(jié)

以上是生活随笔為你收集整理的app vue 真机运行_uni-app黑魔法：小程序自定义组件运行到H5平台的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。