Taro 正式釋出 3.4 版本: 全面支援 Preact & Vue 3.2

距 Taro v3.4 beta 版本的釋出已有一段時間，期間我們完善了對 Preact 和 Vue3 的支援，加入了一些有趣的特性，更是對 H5 作了大幅度的優化與調整，並於近期釋出了 v3.4 的正式版本。

上月我們還推出了支援開發鴻蒙應用的 v3.5.0 canary 版本，歡迎各位同學關注~

一、支援使用 Preact—

開發小程式應用時我們經常會受到包體積的掣肘，大型應用常常為了“尺土寸金”的包體積開展瘦身行動。在此背景下 React 將近 100k 的體積則顯得有點過於奢侈。因此 Taro v3.4 實現了對 Preact 的支援，僅需少量配置即可從 React 切換到 Preact，有效地降低了包體積。

Preact^[1] 是一款體積超小的類 React 框架，提供和 React 幾乎一致的 API，相容 React 生態，而體積只有 5k 左右。

適配思路與具體用法請參閱 《Taro 3.4 beta 釋出：支援 Preact 為應用開闢更多體積空間》

二、更好地支援 Vue 3.2—

1. 支援 Composition API 版本的小程式生命週期鉤子

Composition APIs^[2]

Vue 3.2 正式推出了 script setup^[3] 語法，過去 Taro 的 Options 式小程式生命週期鉤子難以配合 script setup 語法進行使用。因此 Taro v3.4 提供了 Composition API 版本的小程式生命週期鉤子，方便開發者配合 setup 語法組織和複用程式碼邏輯。

例子：

<script setup>
import { useDidShow } from '@tarojs/taro'

useDidShow(() => console.log('onShow'))
</script>

2. 支援 <style> v-bind 語法

Vue 3.2 的 <style> v-bind 語法讓我們可以對樣式進行資料繫結。它的實現使用了 DOM 的 MutationObserver API，但之前 Taro DOM 沒有模擬實現此 API，因此使用 <style> v-bind 時會報錯。

感謝 @b2nil^[4] 同學，參照 worker-dom^[5] 為 Taro DOM 實現了 MutationObserver API，讓我們可以使用 <style> v-bind  語法。

Taro DOM 只針對 Vue3 暴露了 MutationObserver API，使用 React 或 Vue2 的同學不需要擔心會增大程式碼體積。

3. 暴露 VueLoader 的配置

CompilerOptions^[6]

開發者有時需要修改 VueLoader 的配置，例如使用小程式原生元件時需要配置 compilerOptions.isCustomElement。以往開發者只能通過 WebpackChain 去修改，Taro v3.4 暴露了 VueLoader 的配置，讓開發者可以更方便地進行修改。

三、H5—

1. 自定義多路由配置

Taro-H5 過去並不支援多路由訪問同一個頁面例項的操作，即便通過自定義路由配置也並不能在多個路由中訪問同一個頁面。

因此 Taro-H5 提供了自定義多路由配置的引數，供開發者根據需求自行配置。

h5.router.customRoutes^[7]

module.exports = {
  // ...
  h5: {
    // ...
    router: {
      customRoutes: {
        // "頁面路徑": "自定義路由"
        '/pages/index/index': '/index',
        '/pages/detail/index': ['/detail'] // 可以通過陣列為頁面配置多個自定義路由
      }
    }
  }
}

2. 路由動畫 by @ShaoGongBra^[8]

Taro-H5 支援了路由動畫，開發者可以通過配置 app.config.js 來控制頁面的動畫效果，也可以通過覆蓋 CSS 樣式來調整動畫。當然一些場景下，比如頁面需要使用 position: fixed; 會因為 translate3d 影響實際效果，可以將動畫禁用。

animation^[9]

export default {
  // ...
  animation: {
    // 動畫切換時間，單位毫秒
    duration: 300,
    // 動畫切換時間，單位毫秒
    delay: 50
  }
  // ...
}

3. dynamic-import-node

Taro-H5 打包時會將頁面和元件拆分成獨立的檔案按需載入，但這麼做會導致沒有用到的頁面和元件依舊會被打包，導致編譯體積變大，在一些特殊場景中（比如 PWA 等需要嚴格限制包體大小時）會因此受到不小的困擾。

所以我們通過 babel 外掛提供了移除懶載入的方法：

module.exports = {
  presets: [
    ['taro', {
      framework: 'react',
      hot: false,
      'dynamic-import-node': true
    }]
  ]
}

四、新增 defineAppConfig 與 definePageConfig 編譯巨集—

再次感謝 @b2nil^[10] 同學為 Taro 新增了此特性。文件地址：defineAppConfig^[11]、definePageConfig^[12]

defineAppConfig

開發者可以使用 defineAppConfig 包裹 App 配置物件，以獲得全域性配置的型別提示和自動補全，如：

// app.config.ts
export default defineAppConfig({
  pages: ['pages/index/index'],
  window: {
    navigationBarTitleText: 'WeChat'
  }
})

definePageConfig

使用 definePageConfig 包裹 Page 配置物件，同樣可以獲得頁面配置的型別提示和自動補全，如：

// page.config.ts
export default definePageConfig({
  navigationBarTitleText: '首頁'
})

除此之外，開發者可以不提供頁面的配置檔案，直接在頁面邏輯檔案中使用 definePageConfig 定義頁面配置。

如在 React 中：

// page.tsx
definePageConfig({
  navigationBarTitleText: '首頁'
})

export default function Index () {}

在 Vue 中：

<script>
definePageConfig({
  navigationBarTitleText: '首頁'
})

export default {}
</script>

五、其它重要特性與優化—

效能

• 修復 eventSource 導致的記憶體洩漏的問題，相關 commit ^[13]。
• 修復 CustomWrapper 巢狀使用後失效的問題，感謝 @CS-Tao ^[14] 的貢獻。
• 執行時體積優化，相比 Taro v3.3 版本大約減少了 30k 空間。

特性

• 支援微信小程式開發者工具的 熱過載 ^[15] 功能。
• 支援支付寶小程式 2.0 構建。
• H5 端支援配置渲染頁面的 容器 id ^[16]。
• H5 端路由規則調整，Query 引數不再新增到 pageId 中，同時 TabBar 頁面不會重新建立重複節點。
• H5 端支援 entryPagePath 引數，by @liuchuzhang ^[17]
• H5 端支援 CoverView & CoverImage 元件，by @jiaozitang ^[18]
• H5 端支援 NodesRef.context & NodesRef.node 方法
• H5 端支援通過 useResize 方法監聽 resize 事件

修復

• 修復預渲染失敗的問題。
• 修復多個頁面使用同一個元件時，因為元件定義了 id 而導致事件觸發失效的問題。
• 修復 H5 端多頁面滾動事件偶發性觸發錯誤問題。
• 修復 3.x 中 H5 端 API 失效的 Shaking 能力。

六、Breaking Changes—

• 舊專案升級到 Taro v3.4 需要安裝對應的 框架適配外掛，詳情瀏覽升級指南。
• 百度小程式使用 onInit 代替 onLoad 生命週期，以優化首次啟動時間。
• H5 端調整了 showModal 返回的 errMsg 引數，和小程式介面對齊，如果專案內針對這個差異做過適配，可以在升級後移除。 #11040 ^[19]

升級指南—

1. 把 Taro CLI 更新到 v3.4.0：

npm i -g @tarojs/cli

2. 更新專案依賴

如果安裝失敗或開啟專案失敗，可以刪除 node_modules、yarn.lock、package-lock.json 後重新安裝依賴再嘗試。

修改 package.json 檔案中 Taro 相關依賴的版本修改為 3.4.0，再重新安裝依賴。

3.【Breaking Changes】安裝對應的框架適配外掛

因為 Taro v3.4 把各前端框架的適配邏輯拆分到對應的外掛中，因此舊專案升級時需要安裝對應框架的適配外掛：

• 使用 React，請安裝 @tarojs/plugin-framework-react
• 使用 Vue2，請安裝 @tarojs/plugin-framework-vue2
• 使用 Vue3，請安裝 @tarojs/plugin-framework-vue3

最後—

接下來 Taro v3.6 的工作重心將會放在小程式效能優化、編譯系統升級（如升級 Webpack5）和優化 H5 能力（如輸出 SSR 方案、優化路由系統等）上。

Taro 迭代的另一條主線是對 鴻蒙應用 && OpenHarmony 的適配，Taro 與 OpenHarmony 團隊成立了跨平臺 UI 興趣組^[20]，將聯合社區共同展開適配工作。目前第一階段的開發工作已完成，併發布了 Taro v3.5-canary 版本。

相關諮詢：

• 鴻蒙 && OpenHarmony 適配小組 ^[21]
• 適配進度 ^[22]

鴻蒙 & OpenHarmony 交流群：

最後，衷心感謝參與了 Taro 開源共建的各位同學，也歡迎更多的同學參與進來！

參考資料