Taro 3.1 beta 發佈: 開放式架構新增 4 端支持

時間 2020-12-27

標籤 html node react git github npm json redux 小程序微信小程序欄目系統架構简体版

原文原文鏈接

做者：凹凸曼-JJhtml

自 7 月初咱們正式發佈了 Taro 3，至今半年時間已然略去。期間咱們不斷地修復着問題，同時也在構想着下一個 minor 版本。node

面對小程序平臺愈來愈多的大環境，Taro 是選擇偏安一隅，只支持部分的主流小程序，仍是成爲全部小程序平臺開發、多端轉換的基礎設施，咱們在 v3.1 給出了答案：開放式架構。react

1、開放式架構

背景

近年來業界推出的小程序平臺愈來愈多，但 Taro 核心維護的平臺只有 6 個（微信、支付寶、百度、頭條、QQ、京東小程序），所以經常有同窗提出能不能支持某某平臺的 Feature Request。git

基於目前的架構，對於單一平臺的兼容性代碼分佈於 Taro 核心庫的各個角落，涉及編譯時與運行時等部分。支持一個新的平臺須要改動全部的這些地方，開發複雜度高，同時社區也難以參與貢獻。github

爲此咱們萌生了打造一個開放式框架的想法。目標是能夠經過插件的形式擴展 Taro 的端平臺支持能力：npm

插件開發者無需修改 Taro 核心庫代碼，便可編寫出一個端平臺插件。
插件使用者只需安裝、配置端平臺插件，便可把代碼編譯到指定平臺。
開發者能夠繼承現有的端平臺插件，而後對平臺的適配邏輯進行自定義。

端平臺插件架構圖

Taro 基於開放式架構的改動

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

咱們把內置支持的 6 個平臺封裝成了插件，CLI 默認會所有加載這些插件。封裝的過程當中，咱們檢索了各小程序最新的組件、API，並全數進行更新與支持，對齊各小程序最新的能力。json

2. 新增支持轉換的平臺

藉助開放式架構，咱們編寫了若干端平臺插件，開發者安裝後便可使用：redux

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

對開發者的影響

沒有影響，改動屬於 Taro 內部架構重構，不會影響開發者使用。小程序

還能夠作什麼有意思的事

除了擴展新的編譯平臺，咱們還能夠經過繼承於現有的端平臺插件，來編寫自定義的端平臺插件，對平臺的適配邏輯進行自定義：微信小程序

如何編寫端平臺插件：文檔地址

1. 快速修復問題

因爲小程序平臺衆多，並且它們也在不斷地迭代，每每會出現 Taro 對某個小程序新推出的組件或 API 支持不及時的問題。這時開發者首先須要聯繫 Taro 團隊，再等待咱們跟進修復、發佈新版本後才能正常使用，平均須要等待一週或兩週的時間才能獲得解決。

而基於開放式架構，開發者可以經過繼承某個端平臺插件，迅速開發出自定義端平臺插件，完成對這些新組件或 API 的支持，無需等待 Taro 發佈版本。

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

運行時注入 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 運行時並修改 Taro 對象，達到增長 API 的目的
mergeReconciler({
  initNativeApi
})

端平臺插件入口：

/** 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()
    }
  })
}

2. 屬性精簡

由於小程序組件的屬性和事件都必須靜態寫死，不能夠動態添加，因此 Taro 會把組件的全部屬性和事件所有在模板裏提早進行綁定。

但實際項目中不少狀況下並不會使用到組件的全部屬性和事件，循環這些冗餘的屬性和事件綁定也會佔據很大一部分的體積，另外太多的事件綁定也會在必定程度上下降小程序的性能。

如下是 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>

Taro 須要把 View 組件的全部屬性和事件提早進行綁定，才能知足不一樣開發者的使用需求。但可能對於某位開發者來講，整個項目的 View 組件都沒有使用到 hover-stop-propagation 這個屬性，那麼則能夠考慮把它精簡掉，不編譯到 View 組件的模板當中。

須要注意的是，對屬性的精簡可能會引發沒必要要的問題、使項目的維護變得困難，特別當項目變大，開發者衆多時，須要謹慎設計和使用。

2、重要問題修復

v3.1 除了包括開放式架構的調整外，也不忘鞏固核心。如下是 v3.1 對重要問題的修復狀況，有一些在 v3.0 的 patch 版本已經推出，一些則是 v3.1 中才推出，均予以列出：

1. [Breaking Change]修復 Vue 中 App 生命週期被調用兩次的問題

注意，此修復含有【Breaking Change】，若是你正在把 Vue 項目從 v3.0 升級到 v3.1，須要對入口組件進行以下修改：

// app.js

// v3.0
// Taro 運行時內部原本就會調用一次 new Vue，
// 用戶的入口組件多調用一次的話，會致使生命週期函數重複觸發
const App = new Vue({
  // ...
})

// v3.1
// 用戶在入口文件中只須要導出入口組件的配置對象，不須要再調用 new Vue
const App = {
  // ...
}

2. 優化反向轉換功能

v3.1 中咱們對反向轉換功能（Taro convert）進行了普遍的驗證，修復了大量問題，現已達到比較高可用的狀態。

詳細文檔：https://taro-docs.jd.com/taro/docs/next/taroize。

主要變更：

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

反向轉換例子

咱們嘗試使用 taro convert 轉換了四個 GitHub 上最熱門的開源微信小程序應用，它們轉換以後都表現良好：

EastWorld/wechat-app-mall - 微信小程序商城

tumobi/nideshop-mini-program - 基於 Node.js + MySQL 開發的開源微信小程序商城

RebeccaHanjw/weapp-wechat-zhihu - 仿知乎

jectychen/wechat-v2ex - V2EX

3. 支持阻止小程序滑動穿透

v3.0 推出後反饋最多的問題之一，就是在 touchmove 事件回調中調用 e.stopPropagation() 並不能阻止滑動穿透。

這是由於 Taro 3 的事件冒泡機制是單獨在小程序邏輯層實現，全部事件都是綁定的 bind 而不是 catch。所以touchmove 事件回調中調用 e.stopPropagation() 只會阻止上層組件的事件回調觸發，而沒有 catchtouchmove 能阻止滑動穿透的能力。

v3.1 中咱們爲 View 組件增長了 catchMove 屬性，只要 catchMove 屬性值爲 true，就會使用 catchtouchmove 代替 bindtouchmove 進行事件綁定，從而得到阻止滑動穿透的能力。

用法：

<View class='parent'>
  <View class='modal' catchMove>滑動 .modal 時，並不會令 .parent 也一塊兒滑動</View>
</View>

4. 修復使用了 HOC 後分享生命週期方法不觸發的問題

假若咱們在 v3.0 的 React 框架下，把頁面使用 HOC 進行包裹，如 react-redux 的 @connect，那麼咱們設置的一些分享生命週期：onShareAppMessage, onShareTimeline 都將不會被觸發。這時須要在頁面的配置文件中對應設置 enableShareAppMessage: true、enableShareTimeline: true 才能解決。

v3.1 會在編譯時掃描 onShareAppMessage、 onShareTimeline 是否有被調用，進而自動在頁面配置文件中加上對應配置，大部分場景下不須要用戶手動設置。