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

凹凸實驗室發表於2022-01-21
ReactVue

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

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

一、支援使用 Preact

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

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

適配思路與具體用法請參閱 《Taro v3.4 釋出 beta 版本 —— 支援使用 Preact 進行開發》

二、更好地支援 Vue 3.2

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

文件地址

Vue 3.2 正式推出了 script setup 語法，過去 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 同學，參照 worker-dom 為 Taro DOM 實現了 MutationObserver API，讓我們可以使用 <style> v-bind 語法。

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

3. 暴露 VueLoader 的配置

文件地址

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

三、H5

1. 自定義多路由配置

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

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

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

2. 路由動畫 by @ShaoGongBra

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

文件地址
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 同學為 Taro 新增了此特性。 文件地址：defineAppConfig、definePageConfig

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。
  • 修復 CustomWrapper 巢狀使用後失效的問題，感謝 @CS-Tao 的貢獻。
  • 執行時體積優化，相比 Taro v3.3 版本大約減少了 30k 空間。

特性

  • 支援微信小程式開發者工具的熱過載功能，文件地址。
  • 支援支付寶小程式 2.0 構建。
  • H5 端支援配置渲染頁面的容器 id，文件地址
  • H5 端路由規則調整，Query 引數不再新增到 pageId 中，同時 TabBar 頁面不會重新建立重複節點。
  • H5 端支援 entryPagePath 引數，by @liuchuzhang
  • H5 端支援 CoverView & CoverImage 元件，by @jiaozitang
  • 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

升級指南

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 興趣組，將聯合社群共同展開適配工作。目前第一階段的開發工作已完成，併發布了 Taro v3.5-canary 版本。

相關諮詢：

鴻蒙 & OpenHarmony 交流群：

/img/bVcWgWt

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

歡迎關注凹凸實驗室部落格：aotu.io

或者關注凹凸實驗室公眾號（AOTULabs），不定時推送文章。

相關文章