近年來業(yè)界推出的小程序平臺(tái)越來越多，但 Taro 核心維護(hù)的平臺(tái)只有 6 個(gè)（微信、支付寶、百度、頭條、QQ、京東小程序），因此常常有同學(xué)提出能不能支持某某平臺(tái)的 Feature Request。

基于目前的架構(gòu)，對(duì)于單一平臺(tái)的兼容性代碼分布于 Taro 核心庫(kù)的各個(gè)角落，涉及編譯時(shí)與運(yùn)行時(shí)等部分。支持一個(gè)新的平臺(tái)需要改動(dòng)所有的這些地方，開發(fā)復(fù)雜度高，同時(shí)社區(qū)也難以參與貢獻(xiàn)。

為此我們萌生了打造一個(gè)開放式框架的想法。目標(biāo)是可以通過插件的形式擴(kuò)展 Taro 的端平臺(tái)支持能力：

• 插件開發(fā)者無需修改 Taro 核心庫(kù)代碼，即可編寫出一個(gè)端平臺(tái)插件。
• 插件使用者只需安裝、配置端平臺(tái)插件，即可把代碼編譯到指定平臺(tái)。
• 開發(fā)者可以繼承現(xiàn)有的端平臺(tái)插件，然后對(duì)平臺(tái)的適配邏輯進(jìn)行自定義。

端平臺(tái)插件架構(gòu)圖

Taro 基于開放式架構(gòu)的改動(dòng)

1. 同步了小程序最新特性

我們把內(nèi)置支持的 6 個(gè)平臺(tái)封裝成了插件，CLI 默認(rèn)會(huì)全部加載這些插件。封裝的過程中，我們檢索了各小程序最新的組件、API，并全數(shù)進(jìn)行更新與支持，對(duì)齊各小程序最新的能力。

2. 新增支持轉(zhuǎn)換的平臺(tái)

借助開放式架構(gòu)，我們編寫了若干端平臺(tái)插件，開發(fā)者安裝后即可使用：

• 企業(yè)微信插件：@tarojs/plugin-platform-weapp-qy
• 釘釘小程序插件：@tarojs/plugin-platform-alipay-dd
• 支付寶 IOT 小程序插件：@tarojs/plugin-platform-alipay-iot
• 快手小程序插件（體驗(yàn)版）：@tarojs/plugin-platform-kwai

對(duì)開發(fā)者的影響

沒有影響，改動(dòng)屬于 Taro 內(nèi)部架構(gòu)重構(gòu)，不會(huì)影響開發(fā)者使用。

還可以做什么有意思的事

除了擴(kuò)展新的編譯平臺(tái)，我們還可以通過繼承于現(xiàn)有的端平臺(tái)插件，來編寫自定義的端平臺(tái)插件，對(duì)平臺(tái)的適配邏輯進(jìn)行自定義：

1. 快速修復(fù)問題

由于小程序平臺(tái)眾多，而且它們也在不斷地迭代，往往會(huì)出現(xiàn) Taro 對(duì)某個(gè)小程序新推出的組件或 API 支持不及時(shí)的問題。這時(shí)開發(fā)者首先需要聯(lián)系 Taro 團(tuán)隊(duì)，再等待我們跟進(jìn)修復(fù)、發(fā)布新版本后才能正常使用，平均需要等待一周或兩周的時(shí)間才能得到解決。

而基于開放式架構(gòu)，開發(fā)者能夠通過繼承某個(gè)端平臺(tái)插件，迅速開發(fā)出自定義端平臺(tái)插件，完成對(duì)這些新組件或 API 的支持，無需等待 Taro 發(fā)布版本。

為微信小程序拓展 API 的例子：

1. 運(yùn)行時(shí)注入 API：

/** plugin/apis.ts */
export function initNativeApi (taro) {
  // 掛載額外 API：Taro.xxx()
  taro.xxx = function () {}
}

/** plugin/runtime.ts */
import { mergeReconciler } from '@tarojs/shared'
import { initNativeApi } from './apis'

// 把 initNativeApi 合并到 reconciler 中。
// 這樣可以侵入 Taro 運(yùn)行時(shí)并修改 Taro 對(duì)象，達(dá)到增加 API 的目的
mergeReconciler({
  initNativeApi
})
復(fù)制代碼

2. 端平臺(tái)插件入口：

/** plugin/program.ts */
import { Weapp } from '@tarojs/plugin-platform-weapp'

// 繼承微信小程序
export default class Example extends Weapp {
  platform = 'example'
  // 步驟 1 中，runtime 文件的路徑
  runtimePath = `@tarojs/plugin-platform-example/dist/runtime`
}

/** plugin/index.ts */
import Example from './program'
import type { IPluginContext } from '@tarojs/service'

export default (ctx: IPluginContext) => {
  ctx.registerPlatform({
    name: 'example',
    useConfigName: 'mini',
    async fn ({ config }) {
      const program = new Example(ctx, config)
      program.start()
    }
  })
}
復(fù)制代碼

2. 屬性精簡(jiǎn)

因?yàn)樾〕绦蚪M件的屬性和事件都必須靜態(tài)寫死，不可以動(dòng)態(tài)添加，所以 Taro 會(huì)把組件的所有屬性和事件全部在模板里提前進(jìn)行綁定。

但實(shí)際項(xiàng)目中很多情況下并不會(huì)使用到組件的所有屬性和事件，循環(huán)這些冗余的屬性和事件綁定也會(huì)占據(jù)很大一部分的體積，另外太多的事件綁定也會(huì)在一定程度上降低小程序的性能。

以下是 View 組件模板的偽代碼：

<template name="tmpl_0_view">
  <view
    hover-class="..."
    hover-stop-propagation="..."
    hover-start-time="..."
    hover-stay-time="..."
    animation="..."
    onTouchStart="..."
    onTouchMove="..."
    onTouchEnd="..."
    onTouchCancel="..."
    onLongTap="..."
    onAnimationStart="..."
    onAnimationIteration="..."
    onAnimationEnd="..."
    onTransitionEnd="..."
    disable-scroll="..."
    hidden="..."
    onAppear="..."
    onDisappear="..."
    onFirstAppear="..."
    style="..."
    class="..."
    onTap="..."
    id="..."
  >
    ...
  </view>
</template>
復(fù)制代碼

Taro 需要把 View 組件的所有屬性和事件提前進(jìn)行綁定，才能滿足不同開發(fā)者的使用需求。但可能對(duì)于某位開發(fā)者來說，整個(gè)項(xiàng)目的 View 組件都沒有使用到 hover-stop-propagation 這個(gè)屬性，那么則可以考慮把它精簡(jiǎn)掉，不編譯到 View 組件的模板當(dāng)中。

需要注意的是，對(duì)屬性的精簡(jiǎn)可能會(huì)引起不必要的問題、使項(xiàng)目的維護(hù)變得困難，特別當(dāng)項(xiàng)目變大，開發(fā)者眾多時(shí)，需要謹(jǐn)慎設(shè)計(jì)和使用。

v3.1 除了包括開放式架構(gòu)的調(diào)整外，也不忘鞏固核心。以下是 v3.1 對(duì)重要問題的修復(fù)情況，有一些在 v3.0 的 patch 版本已經(jīng)推出，一些則是 v3.1 中才推出，均予以列出：

1. [Breaking Change]修復(fù) Vue 中 App 生命周期被調(diào)用兩次的問題

注意，此修復(fù)含有【Breaking Change】，如果你正在把 Vue 項(xiàng)目從 v3.0 升級(jí)到 v3.1，需要對(duì)入口組件進(jìn)行如下修改：

// app.js

// v3.0
// Taro 運(yùn)行時(shí)內(nèi)部本來就會(huì)調(diào)用一次 new Vue，
// 用戶的入口組件多調(diào)用一次的話，會(huì)導(dǎo)致生命周期函數(shù)重復(fù)觸發(fā)
const App = new Vue({
  // ...
})

// v3.1
// 用戶在入口文件中只需要導(dǎo)出入口組件的配置對(duì)象，不需要再調(diào)用 new Vue
const App = {
  // ...
}
復(fù)制代碼

2. 優(yōu)化反向轉(zhuǎn)換功能

v3.1 中我們對(duì)反向轉(zhuǎn)換功能（Taro convert）進(jìn)行了廣泛的驗(yàn)證，修復(fù)了大量問題，現(xiàn)已達(dá)到比較高可用的狀態(tài)。

主要變動(dòng)：

• 支持使用 Behavior
• 支持使用自定義 tabbar
• 支持配置全局 usingComponents
• 修復(fù) catch 事件不能阻止冒泡的問題
• 修復(fù)不支持掛載額外屬性到 app 對(duì)象的問題
• 修復(fù)循環(huán)的 key 值沒有被正確編譯的問題
• 修復(fù)編譯時(shí)沒有處理樣式中引用的字體的問題

v3.0 推出后反饋?zhàn)疃嗟膯栴}之一，就是在 touchmove 事件回調(diào)中調(diào)用 e.stopPropagation() 并不能阻止滑動(dòng)穿透。

這是因?yàn)?Taro 3 的事件冒泡機(jī)制是單獨(dú)在小程序邏輯層實(shí)現(xiàn)，所有事件都是綁定的 bind 而不是 catch。因此touchmove 事件回調(diào)中調(diào)用 e.stopPropagation() 只會(huì)阻止上層組件的事件回調(diào)觸發(fā)，而沒有 catchtouchmove 能阻止滑動(dòng)穿透的能力。

v3.1 中我們?yōu)?View 組件增加了 catchMove 屬性，只要 catchMove 屬性值為 true，就會(huì)使用 catchtouchmove 代替 bindtouchmove 進(jìn)行事件綁定，從而獲得阻止滑動(dòng)穿透的能力。

用法：

<View class='parent'>
  <View class='modal' catchMove>滑動(dòng) .modal 時(shí)，并不會(huì)令 .parent 也一起滑動(dòng)</View>
</View>
復(fù)制代碼

4. 修復(fù)使用了 HOC 后分享生命周期方法不觸發(fā)的問題

倘若我們?cè)?v3.0 的 React 框架下，把頁面使用 HOC 進(jìn)行包裹，如 react-redux 的 @connect，那么我們?cè)O(shè)置的一些分享生命周期：onShareAppMessage, onShareTimeline 都將不會(huì)被觸發(fā)。這時(shí)需要在頁面的配置文件中對(duì)應(yīng)設(shè)置 enableShareAppMessage: true、enableShareTimeline: true 才能解決。

v3.1 會(huì)在編譯時(shí)掃描 onShareAppMessage、 onShareTimeline 是否有被調(diào)用，進(jìn)而自動(dòng)在頁面配置文件中加上對(duì)應(yīng)配置，大部分場(chǎng)景下不需要用戶手動(dòng)設(shè)置。

注意，如果分享生命周期被封裝在基類或自定義 Hooks 中，還是需要手動(dòng)加上對(duì)應(yīng)配置。

在 v3.0，支付寶小程序使用原生自定義組件時(shí)，會(huì)報(bào)“元素不存在”的錯(cuò)誤。

這是因?yàn)橹Ц秾毿〕绦蛑幸?guī)定，頁面引用到的自定義組件，需要在頁面對(duì)應(yīng)的 axml 文件中定義。而 Taro 會(huì)把自定義組件定義在全局模板文件 base.axml 中。

因此 v3.1 對(duì)

v3.0 剛推出，很多同學(xué)反饋小程序體積過大的問題，其中一個(gè)原因是編譯產(chǎn)物中 base.xml 這個(gè)模板的體積太大了。

自 v3.0.9 后，我們對(duì)模板生成邏輯進(jìn)行了重構(gòu)：可能嵌套引用自身的組件，模板默認(rèn)生成 16 次，如 View。不會(huì)嵌套引用自身的組件，模板只會(huì)生成一次，如 Map。

以微信小程序?yàn)槔?，在最極端的情況下體積優(yōu)化率達(dá) 85% 以上：

三、升級(jí)指南

從 v2.x 升級(jí)的同學(xué)需要先按 遷移指南 進(jìn)行操作。

從 v3.x 升級(jí)的同學(xué)，首先需要安裝 v3.1 的 CLI 工具：

npm i -g @tarojs/cli@next
復(fù)制代碼

然后進(jìn)入項(xiàng)目，把 package.json 文件中 taro 相關(guān)依賴的版本修改為 3.1.0-beta.4，再重新安裝依賴（建議先把 node_modules 文件夾刪除）。至此升級(jí)結(jié)束。

Breaking

v3.1 帶來了一個(gè) Breaking Change，使用 Vue 進(jìn)行開發(fā)的同學(xué)需要按指示進(jìn)行修改。

作者：凹凸實(shí)驗(yàn)室
來源：掘金
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。