vivo悟空活動(dòng)中臺(tái) - 微組件多端探索

本文首發(fā)于 vivo互聯(lián)網(wǎng)技術(shù) 微信公眾號(hào) 
鏈接： https://mp.weixin.qq.com/s/oGX4XSm8F4fa1ocLdpyqlA
作者：悟空中臺(tái)研發(fā)團(tuán)隊(duì)

【悟空活動(dòng)中臺(tái)】系列往期精彩文章：

• 《 揭秘 vivo 如何打造千萬(wàn)級(jí) DAU 活動(dòng)中臺(tái) - 啟航篇》 主要為大家講述 vivo 活動(dòng)中臺(tái)的能力與創(chuàng)新。

• 《 悟空活動(dòng)中臺(tái) - 微組件狀態(tài)管理（上）》介紹了活動(dòng)頁(yè)內(nèi) RSC 組件之間的狀態(tài)管理和背后的設(shè)計(jì)思路。

• 《 悟空活動(dòng)中臺(tái) - 微組件狀態(tài)管理（下）》探索平臺(tái)和跨沙箱環(huán)境下的微組件狀態(tài)管理。

• 《 vivo 悟空活動(dòng)中臺(tái)-基于行為預(yù)設(shè)的動(dòng)態(tài)布局方案》本文以“滿屏”場(chǎng)景下的頁(yè)面布局思考為切入點(diǎn)，以微組件為元素單元，提供了一種新的布局方案設(shè)計(jì)思路——基于行為預(yù)設(shè)的動(dòng)態(tài)布局方案，并詳細(xì)的分享了設(shè)計(jì)目的及具體實(shí)現(xiàn)方案。

一、背景

隨著小程序、快應(yīng)用的用戶體驗(yàn)越來(lái)越友好，用戶群體龐大，運(yùn)營(yíng)小伙伴開(kāi)始偏向?qū)I(yíng)銷(xiāo)活動(dòng)投放至微信、支付寶、快應(yīng)用等微應(yīng)用中。

小程序和快應(yīng)用可以比作更加“輕便”的應(yīng)用，與傳統(tǒng)應(yīng)用相比優(yōu)點(diǎn)是：體積小、加載快、無(wú)需安裝、精準(zhǔn)觸達(dá)等。因此眾多企業(yè)都迫切希望在微應(yīng)用的藍(lán)海里 搶占先機(jī)，獲取海量的渠道流量和優(yōu)秀營(yíng)銷(xiāo)效果。

對(duì)于活動(dòng)研發(fā)而言，各端小程序底層實(shí)現(xiàn)不一致，技術(shù)生態(tài)隔離，研發(fā)過(guò)程需要適配各平臺(tái)技術(shù)上差異。如果單純采用 case by case 的開(kāi)發(fā)模式，學(xué)習(xí)成本高、適配周期長(zhǎng)、技術(shù)風(fēng)險(xiǎn)點(diǎn)多，易產(chǎn)生過(guò)高的人力成本，難以滿足運(yùn)營(yíng)快速搭建多樣化活動(dòng)的訴求。

基于上述痛點(diǎn)，我們想借助悟空中臺(tái)的能力打通技術(shù)壁壘，實(shí)現(xiàn)小程序 插拔式、可視化 、自適配各小程序平臺(tái)和快應(yīng)用。帶著這個(gè)初心，開(kāi)啟對(duì)悟空活動(dòng)中臺(tái)多端改造之旅。

二、多端場(chǎng)景技術(shù)挑戰(zhàn)

探索插拔式多端配置平臺(tái)，我們首先梳理下技術(shù)難點(diǎn)：

1、企業(yè)級(jí)能力復(fù)用

悟空已經(jīng)提供給運(yùn)營(yíng)和活動(dòng)開(kāi)發(fā)豐富的配套工具和解決方案，多端活動(dòng)場(chǎng)景想要對(duì)運(yùn)營(yíng)和開(kāi)發(fā)友好，必須在悟空能力上去擴(kuò)充，畢竟傳統(tǒng)H5活動(dòng)碰到的問(wèn)題，多端活動(dòng)場(chǎng)景也會(huì)遇到，我們可以站在巨人的肩膀上探索。

復(fù)用悟空活動(dòng)中臺(tái)最大的挑戰(zhàn)是遵循workless工作流中的微前端架構(gòu)方案，基于該方案的特點(diǎn)去擴(kuò)展(組件熱插拔，子系統(tǒng)獨(dú)立部署)。

多端架構(gòu)核心是利用平臺(tái)化手段沉淀復(fù)用已有技術(shù)能力，實(shí)現(xiàn)多端微組件熱插拔，一方面平臺(tái)能夠適配多端組件，另一方面多端組件的開(kāi)發(fā)模式脫離于平臺(tái) ，自成服務(wù)，這就需要探索是否有框架能夠適應(yīng)平臺(tái)化改造，實(shí)現(xiàn)高內(nèi)聚，低耦合。

2、動(dòng)態(tài)構(gòu)建目標(biāo)活動(dòng)

目前，各個(gè)小程序的技術(shù)各不相同，舉個(gè)例子，我們羅列下不同小程序和快應(yīng)用核心 api 的使用方式。

由上表可以比對(duì)出不同的小程序，快應(yīng)用語(yǔ)法和 api 都不相同。這就意味著，同一個(gè)功能，開(kāi)發(fā)者要與不同端一一對(duì)接，幾何倍的增加了開(kāi)發(fā)的成本。

多端活動(dòng)配置，基于提升配置效率的目的，必須要考慮實(shí)現(xiàn)自動(dòng)化編譯不同目標(biāo)程序，這就需要多端組件服務(wù)化，構(gòu)建服務(wù)與組件服務(wù)解耦，根據(jù)配置動(dòng)態(tài)拉去服務(wù)組件，遠(yuǎn)程動(dòng)態(tài)構(gòu)建。

3、快應(yīng)用的深度支撐

本次多端探索的重點(diǎn)是對(duì)快應(yīng)用的快速支撐?？鞈?yīng)用是由 11 家手機(jī)廠商聯(lián)合推出，投入流量超 10 億，同時(shí)在多家手機(jī)終端曝光導(dǎo)流。vivo 提供給快應(yīng)用海量入口級(jí)資源曝光，包括負(fù)一屏、智慧場(chǎng)景、應(yīng)用商店、瀏覽器等。

快應(yīng)用的優(yōu)勢(shì)很明顯，如何利用快應(yīng)用技術(shù)特點(diǎn)和核心能力，將傳統(tǒng)活動(dòng)轉(zhuǎn)換成快應(yīng)用活動(dòng)是這次探索的重點(diǎn)，我們希望能尋得連接悟空和快應(yīng)用的橋梁。

三、尋找復(fù)用平臺(tái)能力最優(yōu)解：多端框架

1、技術(shù)探索

悟空活動(dòng)中臺(tái)前端技術(shù)選型為vue，我們需要對(duì)vue語(yǔ)法做DSL，來(lái)適配多端。基于該技術(shù)條件，我們鎖定本次探索關(guān)鍵點(diǎn)：多端框架。

我們先整理下思路：如何設(shè)計(jì)一個(gè)低耦合，高內(nèi)聚多端框架？

概括梳理后，設(shè)計(jì)分為三個(gè)階段：

1. DSL階段：創(chuàng)建一個(gè) DSL 語(yǔ)法解釋器，并確定一個(gè)語(yǔ)法對(duì)應(yīng)解釋枚舉列表。
2. AST階段：創(chuàng)建一個(gè) AST 基礎(chǔ)語(yǔ)法樹(shù)，將DSL轉(zhuǎn)換成AST語(yǔ)法樹(shù)，再對(duì)AST進(jìn)行transform，最后生成代碼。這個(gè)階段其實(shí)我們都很熟悉，就是babel在編譯 ES6/7/8 的代碼時(shí)在做的事。換句話說(shuō)，可以借助babel來(lái)節(jié)省轉(zhuǎn)換成本。
3. AST轉(zhuǎn)換： 在AST基礎(chǔ)語(yǔ)法樹(shù)的transform規(guī)則之外進(jìn)行擴(kuò)展，內(nèi)容主要是小程序和快應(yīng)用端的轉(zhuǎn)換規(guī)則。

下面對(duì)這三個(gè)階段詳細(xì)說(shuō)明：

1.1、對(duì) vue 的 DSL

多端適用需要避免開(kāi)發(fā)者操作原生DOM結(jié)構(gòu)，因此需要抽象出一些基礎(chǔ)組件，來(lái)模擬div、ul等標(biāo)簽 。我們?cè)贏ST的轉(zhuǎn)換過(guò)程中需要去處理div，span等基礎(chǔ)Web DOM元素，替換為自定義基礎(chǔ)組件。

1.2、根據(jù)不同小程序語(yǔ)法進(jìn)行語(yǔ)法轉(zhuǎn)換

1.2.1、AST 是什么

引用維基的描述：

在計(jì)算機(jī)科學(xué)中，抽象語(yǔ)法樹(shù)（Abstract Syntax Tree，AST），或簡(jiǎn)稱(chēng)語(yǔ)法樹(shù)（Syntax tree），是源代碼語(yǔ)法結(jié)構(gòu)的一種抽象表示。它以樹(shù)狀的形式表現(xiàn)編程語(yǔ)言的語(yǔ)法結(jié)構(gòu)，樹(shù)上的每個(gè)節(jié)點(diǎn)都表示源代碼中的一種結(jié)構(gòu)。之所以說(shuō)語(yǔ)法是“抽象”的，是因?yàn)檫@里的語(yǔ)法并不會(huì)表示出真實(shí)語(yǔ)法中出現(xiàn)的每個(gè)細(xì)節(jié)。比如，嵌套括號(hào)被隱含在樹(shù)的結(jié)構(gòu)中，并沒(méi)有以節(jié)點(diǎn)的形式呈現(xiàn)；而類(lèi)似于 if-condition-then 這樣的條件跳轉(zhuǎn)語(yǔ)句，可以使用帶有兩個(gè)分支的節(jié)點(diǎn)來(lái)表示。

大部分程序語(yǔ)言都通過(guò) AST 把代碼轉(zhuǎn)換為字節(jié)碼以便計(jì)算機(jī)執(zhí)行，由于JavaScript所處環(huán)境的特殊性（ 依托于瀏覽器，新語(yǔ)言特性依賴(lài)執(zhí)行環(huán)境的支持，在瀏覽器暴露代碼，容易遭受攻擊），導(dǎo)致AST在JavaScript中擁有更多用武之地。

舉幾個(gè)栗子：

• @babel/polyfill的作用是將代碼中的ES6語(yǔ)法轉(zhuǎn)化成 ES5 語(yǔ)法。
• webpack的  UglifyJs 插件常用于代碼壓縮，混淆，美化等操作。

通過(guò)上述例子我們發(fā)現(xiàn)AST常用于前端工具中，可以無(wú)感知處理底層代碼轉(zhuǎn)換。

1.2.2、編譯vue文件

我們可以使用 vue-template-complier中的parseComponent 方法剝離 template、script、style ，并利用compile方法將template轉(zhuǎn)化為對(duì)應(yīng)的 AST，最終通過(guò) @babel/parser解析 Javascript 以及css 代碼。

1.2.3、AST 轉(zhuǎn)換

AST的操作主要分為三階段：

• 將代碼轉(zhuǎn)化為AST。
• 對(duì)AST進(jìn)行深度遍歷并轉(zhuǎn)換。
• 將轉(zhuǎn)換后的AST轉(zhuǎn)回相應(yīng)代碼。

以上步驟，我們可以利用@babel/parser,@babel/traverse,@babel/generator來(lái)處理。

多端適配工作，大致分為以下幾個(gè)模塊：

• 不同平臺(tái) css  兼容，并對(duì)一些  css 兼容作降級(jí)處理。
• 不同平臺(tái) template兼容，比如<span> -> <text>,<div> -> <view>等等，這塊原則是基于上層DSL語(yǔ)義的規(guī)則并具備各端適用性。
• 不同平臺(tái) Javascript 兼容。在此階段我們對(duì)這些語(yǔ)法糖進(jìn)行適配處理，比如說(shuō)window 或是document  等。

上述適配工作完成后，我們需要將不同版本的AST轉(zhuǎn)換成多端適配代碼，再借助 loader生成不同端目錄結(jié)構(gòu)。

通過(guò)對(duì) babel，AST 的梳理，能夠發(fā)現(xiàn)一個(gè)問(wèn)題：開(kāi)發(fā)多端框架，會(huì)產(chǎn)生相應(yīng)的研發(fā)成本，后續(xù)框架的維護(hù)、擴(kuò)展需要長(zhǎng)期人力投入。

我們真的需要去純手寫(xiě)一個(gè)多端框架么？下面是成熟開(kāi)源多端框架研究梳理。

1.3、技術(shù)選型：各廠多端框架調(diào)研

截至到目前，已經(jīng)有包括但不限于 Google，F(xiàn)acebook，阿里，騰訊，美團(tuán)，京東，滴滴發(fā)布了自己的開(kāi)源多端通用框架， 詳細(xì)清單如下：

• Google：Flutter( https://github.com/flutter/flutter)
• Facebook：React-Native( https://github.com/facebook/react-native)
• 阿里：Weex( https://github.com/apache/incubator-weex)
• 美團(tuán)：mpvue( https://github.com/Meituan-Dianping/mpvue)
• DCloud：uni-app( https://github.com/dcloudio/uni-app)
• 京東Taro( https://github.com/NervJS/taro)
• 滴滴：chameleon( https://github.com/didi/chameleon)

簡(jiǎn)單對(duì)比：

從技術(shù)層面來(lái)說(shuō)，F(xiàn)lutter屬于全包型，從底層引擎到中層DSL，到上層業(yè)務(wù)框架全部包含在里面，這就從極大程度上保證了一套代碼多端渲染時(shí)的一致性。

RN和Weex嚴(yán)格來(lái)說(shuō)不屬于多端通用框架，不能原生支持小程序端和快應(yīng)用端。

京東出品的Taro框架是一套遵循 React 語(yǔ)法規(guī)范的多端開(kāi)發(fā)解決方案。

最終從業(yè)務(wù)技術(shù)選型出發(fā)，我們優(yōu)先選擇了Dcloud團(tuán)隊(duì)的uni-app。

1.3.1、uni-app

uni-app在設(shè)計(jì)思路上遵循通過(guò)轉(zhuǎn)義 view和viewModel代碼為AST語(yǔ)法樹(shù)，并將AST轉(zhuǎn)化為各終端匹配的代碼，完成多端的適配。

借用官方對(duì)該框架的描述：

uni-app 是一個(gè)使用 Vue.js 開(kāi)發(fā)小程序、H5、App 的統(tǒng)一前端框架。開(kāi)發(fā)者使用 Vue 語(yǔ)法編寫(xiě)代碼，uni-app 框架將其編譯到 小程序（微信/支付寶/百度/字節(jié)跳動(dòng)/QQ/釘釘）、App（iOS/Android）、H5 等多個(gè)平臺(tái)，保證其正確運(yùn)行并達(dá)到優(yōu)秀體驗(yàn)。

uni-app 框架特點(diǎn)如下：

• 完整的 vue 開(kāi)發(fā)體驗(yàn)。
• 徹底的組件化開(kāi)發(fā)能力。
• 完美支持vuex數(shù)據(jù)管理方案。

上述特點(diǎn)無(wú)縫與悟空技術(shù)棧對(duì)接，同時(shí)該框架支持多端發(fā)布，可以編譯成小程序、H5 等平臺(tái)代碼。

1.3.2、uni-app 對(duì) vue 的改造

uni-app 作為小程序和 vue 的中間層，在編譯和運(yùn)行時(shí)對(duì) 數(shù)據(jù)同步和事件代理做了改造，保證開(kāi)發(fā)者使用 vue 語(yǔ)法開(kāi)發(fā)就能對(duì)接不同端小程序。

數(shù)據(jù)同步：當(dāng)組件觸發(fā)數(shù)據(jù)變化時(shí)，uni-app 修改了 initProperties 初始化屬性方法，在數(shù)組和對(duì)象遍歷元素?cái)?shù)據(jù)，并且創(chuàng)建 observer 監(jiān)聽(tīng) value 變化，將數(shù)據(jù)同步至小程序。

事件代理：uni-app 作為中間層將不同小程序的事件轉(zhuǎn)換為 vue 的事件，并支持大部分 web 事件。

原理上來(lái)說(shuō)多端框架都是通過(guò)內(nèi)嵌式DSL來(lái)實(shí)現(xiàn)。然后根據(jù)各端的差異性，使用一套 DSL 來(lái)描述，用多套AST轉(zhuǎn)換規(guī)則來(lái)支撐。

四、多端微組件動(dòng)態(tài)構(gòu)建目標(biāo)活動(dòng)

1、使用 uni-app 構(gòu)造多端微組件

下面我們通過(guò)步驟演示的方式，來(lái)演示通過(guò) uni-app 開(kāi)發(fā)一個(gè)微組件，以及平臺(tái)實(shí)現(xiàn)微組件動(dòng)態(tài)渲染。

步驟一：本地 多端 SFC 組件

<template>
  <view>
    <image  :src="item.imgSrc" mode="aspectFill"></image>
  </view>
</template>
<script>
export default {
  props: ['item']
}
</script>

該多端SFC文件開(kāi)發(fā)方式與普通 vue 的 SFC 組件類(lèi)似，只是語(yǔ)法上遵循 uni 提供的組件和 api。

步驟二：編譯成 umd.js

如何將多端 SFC 組件編譯成 umd 文件？

cli 腳手架支持采用@vue/cli+@dcloudio/vue-cli-plugin-uniUNI_PLATFORM 的方式，根據(jù)參數(shù)自定義目標(biāo)小程序的 umd. js 文件, 并且還可以通過(guò) cli 自定義編譯平臺(tái)：

{
  /**
     package.json其它原有配置
     */
  "uni-app": {
    // 擴(kuò)展配置
    "scripts": {
      "custom-platform": {
        //自定義編譯平臺(tái)配置，可通過(guò)cli方式調(diào)用
        "title": "自定義擴(kuò)展名稱(chēng)", // 在HBuilderX中會(huì)顯示在 運(yùn)行/發(fā)行 菜單中
        "BROWSER": "", //運(yùn)行到的目標(biāo)瀏覽器，僅當(dāng)UNI_PLATFORM為H5時(shí)有效
        "env": {
          //環(huán)境變量
          "UNI_PLATFORM": "" //基準(zhǔn)平臺(tái)
        },
        "define": {
          //自定義條件編譯
          "CUSTOM-CONST": true //自定義條件編譯常量，建議為大寫(xiě)
        }
      }
    }
  }

uni 腳手架集成 vue-cli-service 構(gòu)建方式，生成 componet.umd.min.js:

cross-env NODE_ENV=production UNI_PLATFORM=H5 vue-cli-service build --target lib --name code './src/plugin/code.vue'  --dest ./src/plugin/dist  --no-clean

步驟三：線上渲染

如何在動(dòng)態(tài)組件的umd.js中的組件對(duì)象導(dǎo)出并在web端使用呢？首先看下多端的 umd.js：

;(function(e, t) {
  'object' === typeof exports && 'object' === typeof module
    ? (module.exports = t())
    : 'function' === typeof define && define.amd
    ? define([], t)
    : 'object' === typeof exports
    ? (exports['code'] = t())
    : (e['code'] = t())
})('undefined' !== typeof self ? self : this, function() {
  return (function(e) {
    var t = {}
    ...
    ...
    ...
  })['default']

代碼的形式與普通微組件轉(zhuǎn)換為 umd.js 是一致的，所以 plugin 組件渲染的方式也是通過(guò) vue 自帶 component 動(dòng)態(tài)組件來(lái)渲染。

<template>
  <div>
    <component :is="mode" v-if="mode"></component>
  </div>
</template>
<script>
export default {
  data() {
    return {
      mode: null
    };
  },
  methods: {
    async load() {
      ...
      //此時(shí)內(nèi)部的self變量，被外部變量mode代替，成功將組件對(duì)象導(dǎo)出
      new Function("self", `return ${await data.text()}`)(mode);
      this.mode = mode.code;
      ...
    }
  }
};
</script>

微組件與普通微組件的顯著區(qū)別如下：

• 多端微組件 api 與普通組件不一致。
• 底層能力需要 uni 支撐。
• 必須通過(guò) mpType 在生命周期里聲明渲染多端組件。

多端微組件的渲染特點(diǎn)是同時(shí)在一個(gè)頁(yè)面內(nèi)渲染，需要頁(yè)面組件 page-index 遍歷組件直接渲染到 view 中：

2、多端微組件數(shù)據(jù)管理

按照平臺(tái)開(kāi)發(fā)規(guī)范，一個(gè)標(biāo)準(zhǔn)的微組件結(jié)構(gòu)是這樣：

├── code.vue     # 編輯器中渲染的UI組件
├── prop.vue     # 屬性面板中渲染的配置組件
├── setting.json # 存儲(chǔ)初始化基礎(chǔ)配置和業(yè)務(wù)配置
└── package.json # 依賴(lài)信息

在平臺(tái)服務(wù)中，H5 設(shè)計(jì)器中配置面板prop.vue運(yùn)行的 H5 環(huán)境，而多端組件code.vue運(yùn)行在頁(yè)面設(shè)計(jì)區(qū)。

在 H5 編輯器設(shè)計(jì)上，我們采用獨(dú)立的沙箱環(huán)境，設(shè)計(jì)區(qū)和平臺(tái)環(huán)境相互解耦，多端微組件復(fù)用 H5 專(zhuān)題頁(yè)(組件與組件之間)，平臺(tái)的編輯器環(huán)境(組件和平臺(tái)之間)。

這種設(shè)計(jì)可以解決如下問(wèn)題：

• 解決組件的可配置化
• 組件環(huán)境與平臺(tái)環(huán)境解耦
• 將專(zhuān)題數(shù)據(jù)和多端環(huán)境進(jìn)行解耦

微組件的數(shù)據(jù)是圍繞著 item 去變化的，code.vue 只需要遵循 vue 單文件組件的開(kāi)發(fā)規(guī)則，以及使用 uni 提供組件去開(kāi)發(fā)，極大的降低了組件的開(kāi)發(fā)門(mén)檻，最終 code.vue 平臺(tái)會(huì)使用 uni/cli 直接編譯成 UMD 文件，運(yùn)行至編輯器的沙箱環(huán)境中，完全復(fù)用組件之間數(shù)據(jù)傳遞的規(guī)則，具體的運(yùn)行邏輯圖見(jiàn)：

多端微組件完全遵循 vue 語(yǔ)法，無(wú)需太多學(xué)習(xí)成本，如果看懂了上述開(kāi)發(fā)流程以及運(yùn)行方式，那么恭喜，你已經(jīng)掌握了多端改造的精髓。

3、多端微組件如何構(gòu)建目標(biāo)應(yīng)用

多端微組件與常規(guī)微組件的業(yè)務(wù)流程是一致的，最終通過(guò)不同的組件搭配和數(shù)據(jù)配置，生成符合運(yùn)營(yíng)預(yù)期的專(zhuān)題，發(fā)布后生成站點(diǎn)。

值得注意的是：微組件通過(guò) node 服務(wù)下發(fā)，可以自定義初始腳手架，構(gòu)建命令，多端微組件基于該特點(diǎn)以及普通微組件建 H5 應(yīng)用的方式，將 uni 腳手架作為站點(diǎn)底層腳手架，動(dòng)態(tài)拉取站點(diǎn)配置的多端微組件，最終根據(jù)動(dòng)態(tài)修改 UNI_PLATFORM 構(gòu)建命令生成目標(biāo)小程序代碼包。

上圖解釋了整個(gè)站點(diǎn)構(gòu)建流程，可以看到多端服務(wù)組件配合遠(yuǎn)程腳手架可以根據(jù)不同的構(gòu)建命令生成對(duì)應(yīng)平臺(tái)的應(yīng)用資源包。

4、一個(gè)完整的微組件 demo

我們通過(guò)簡(jiǎn)單的 demo 體驗(yàn)下多端微組件開(kāi)發(fā)模式。

以下展示最高頻率使用的圖片組件為列，code.vue 單文件組件可以使用 vue 語(yǔ)法直接開(kāi)發(fā)。

<!-- template語(yǔ)法，直接使用image標(biāo)簽 -->
<template>
    <image :style="style" :src="item.imgSrc" mode="aspectFill"></image>
</template>
<script>
export default {
  //item為配置數(shù)據(jù)，prop數(shù)據(jù)修改item通過(guò)vuex直接同步至code
  props: ['item'],
  computed: {
    style() {
     //根據(jù)item數(shù)據(jù)設(shè)置圖片大小
      let style = {}
      style.width = this.item.width
      style.height = this.item.width/this.item.vivo_scale
      return style
    }
  }
}
</script>

配置側(cè) prop.vue 只需要展示圖片的鏈接地址，讓運(yùn)營(yíng)實(shí)時(shí)配置、修改圖片鏈接。

prop 配置側(cè)運(yùn)行在 pc 端，無(wú)需使用 uni 語(yǔ)法，遵循傳 vue 單文件開(kāi)發(fā)規(guī)范。

<template>
  <el-form label-width="70px" :model="item" class="vivo-hot-config">
    <el-form-item label="素材圖片">
      <media-picker :defaultSelect="item.imgSrc" @select-change="selectImg"></media-picker>
      <div class="jy-size">建議上傳50KB以?xún)?nèi)圖片</div>
    </el-form-item>
  </el-form>
</template>
<script>
import MediaPicker from '@wukong/mediaPicker'
export default {
  components: {
    MediaPicker
  },
  name: '',
  props: ['item'],
  methods: {
    selectImg(img) {
      if (img.mediaPath) {
        this.item.imgSrc = img.mediaPath
        image.onload = () => {
          this.item.vivo_scale = image.width / image.height
        }
      } else {
        this.item.imgUrl = ''
      }
    }
  }
}
</script>
</style>

其中MediaPicker是平臺(tái)給開(kāi)發(fā)者提供的媒體庫(kù)內(nèi)置組件，用來(lái)連接開(kāi)發(fā)者與平臺(tái)，開(kāi)發(fā)者根據(jù)內(nèi)置的 api 就可以獲取平臺(tái)素材庫(kù)能力。

對(duì)于配置數(shù)據(jù)prop.vue，沿用原有構(gòu)建邏輯，而 code.vue 則是用 uni 語(yǔ)法開(kāi)發(fā)，最終通過(guò) uni+vue 打包方式，生成 code.umd.min.js。

初始化的配置參數(shù)只需要聲明圖片的配置：長(zhǎng)、寬、鏈接。

{
  "imgSrc": "https://www.baidu.com/img/bd_logo1.png",
  "height": 320,
  "vivo_scale": 1
}[object Object]

最終展示下集成至平臺(tái)的簡(jiǎn)單圖片組件：

（查看 原圖請(qǐng)點(diǎn)擊原文鏈接 ）

五、快應(yīng)用深度支撐

1、快應(yīng)用基本特征

快應(yīng)用是基于手機(jī)硬件平臺(tái)的新型應(yīng)用形態(tài)，標(biāo)準(zhǔn)是由主流手機(jī)廠商組成的快應(yīng)用聯(lián)盟聯(lián)合制定的，以平臺(tái)化的生態(tài)模式對(duì)個(gè)人開(kāi)發(fā)者和企業(yè)開(kāi)發(fā)者全品類(lèi)開(kāi)放。

2、快應(yīng)用核心能力及優(yōu)勢(shì)

為了扶持快應(yīng)用生態(tài)，賦能開(kāi)發(fā)者，拓展場(chǎng)景未來(lái)，vivo 啟動(dòng)&ldquo;快應(yīng)用百萬(wàn)計(jì)劃&rdquo;，面向廣大開(kāi)發(fā)者開(kāi)放申請(qǐng)。億級(jí)流量投入，聯(lián)合定制化扶持方案， 打造百萬(wàn)級(jí) DAU 行業(yè)標(biāo)桿，共同創(chuàng)建完整健康的快應(yīng)用生態(tài)。

vvivo 對(duì)快應(yīng)用的投入和支持也是非常龐大的：

• 系統(tǒng)層級(jí)添加桌面能力：保證留存
• 分享，支付能力：支持第三方分享和支付
• 語(yǔ)音場(chǎng)景支持：支持語(yǔ)音喚醒快應(yīng)用
• vivo 賬號(hào)打通能力：支持一鍵 vivo 賬號(hào)授權(quán)登 錄，可透?jìng)魇謾C(jī)號(hào)
• URL 跳轉(zhuǎn)能力：任何渠道 CP 的 H5 頁(yè)面可拉起快應(yīng)用
• 添加負(fù)一屏卡片能力：快應(yīng)用內(nèi)可添加對(duì)應(yīng)卡片至負(fù)一屏
• POI 能力：根據(jù)地理位置提示服務(wù)

3、快應(yīng)用深度定制

在此大前提下，悟空提供傳統(tǒng)手動(dòng)開(kāi)發(fā)快應(yīng)用模式轉(zhuǎn)換為自助快應(yīng)用建站，以此來(lái)擴(kuò)充 IOT，推廣活動(dòng)，電商場(chǎng)景等玩法。

多端微組件至快應(yīng)用小程序轉(zhuǎn)換流程：

多端微組件配置化專(zhuān)題后，我們可以選擇轉(zhuǎn)換不同的客戶端，并且 vivo 提供了小程序轉(zhuǎn)快應(yīng)用的能力，轉(zhuǎn)換工具本身根據(jù)快應(yīng)用標(biāo)準(zhǔn)，對(duì)邏輯層和代碼做了深層的定制，保證渲染速度和使用體驗(yàn)。

六、探索成果演示

經(jīng)過(guò)小伙伴們的共同努力以及 uni-app 的技術(shù)支撐，關(guān)鍵技術(shù)環(huán)境已全部打通，內(nèi)部產(chǎn)品正在有條不紊的落地，靜待花開(kāi)。下面 demo 展示下最終配置效果：

• 基于悟空編輯器可視化能力，實(shí)現(xiàn)多端組件實(shí)時(shí)預(yù)覽，可視化配置
• 多端編譯，可視化選擇將站點(diǎn)打包成小程序，快應(yīng)用，支付寶，頭條小程序運(yùn)行
• 基于 uni-app 的組件開(kāi)發(fā)模式，一套組件，運(yùn)行多個(gè)平臺(tái)

（查看 原圖請(qǐng)點(diǎn)擊原文鏈接 ）

對(duì)于活動(dòng)的角色而言：

• 開(kāi)發(fā)者：實(shí)現(xiàn)了組件復(fù)用，遵循 vue 語(yǔ)法，無(wú)需知識(shí)遷移
• 運(yùn)營(yíng)：上線多種形態(tài)的產(chǎn)品引流，增加投放的渠道
• 產(chǎn)品：低成本拓展產(chǎn)品矩陣

七、開(kāi)發(fā)多端微組件注意事項(xiàng)

uni-app 為抹平不同小程序端的差異做了很多工作， 多端組件開(kāi)發(fā)過(guò)程中也有注意點(diǎn)：

• 不能直接操作 dom，也不能使用 document、window、localstorage、cookie 等 ，只能通過(guò) uni 提供的 api 完成
• 原生 web 庫(kù)無(wú)法支持，只能使用 uni 插件市場(chǎng)推薦的第三方庫(kù)
• 開(kāi)發(fā)時(shí)需盡量規(guī)避邏輯層與視圖層分離帶來(lái)的通信損耗
• 如如果組件有特定客戶端的業(yè)務(wù)邏輯，可以使用 uni 提供的特色 條件編譯

八、寫(xiě)在最后

通過(guò)本文對(duì)多端改造的介紹，相信大家已體驗(yàn)多端微組件開(kāi)發(fā)模式，并對(duì)多端活動(dòng)配置平臺(tái)如何實(shí)現(xiàn)插拔式、自適配各小程序有一定的想法。

上述的探索只是悟空多端之路的開(kāi)始，在豐富組件生態(tài)以及提供多端解決方案上，我們還有很長(zhǎng)的路要走，后續(xù)實(shí)踐出階段性成果也會(huì)分享給大家，歡迎一起溝通討論。