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

語言: CN / TW / HK

距 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: {
    // 動畫切換時間,單位毫秒
    duration300,
    // 動畫切換時間,單位毫秒
    delay50
  }
  // ...
}

3. dynamic-import-node

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

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

module.exports = {
  presets: [
    ['taro', {
      framework'react',
      hotfalse,
      '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_modulesyarn.lockpackage-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 開源共建的各位同學,也歡迎更多的同學參與進來!

參考資料

[1]

Preact: https://preactjs.com/

[2]

Composition APIs: https://docs.taro.zone/docs/next/composition-api

[3]

script setup: https://v3.vuejs.org/api/sfc-script-setup.html#basic-syntax

[4]

@b2nil: https://github.com/b2nil

[5]

worker-dom: https://github.com/ampproject/worker-dom

[6]

CompilerOptions: https://docs.taro.zone/docs/next/vue3#compileroptions

[7]

h5.router.customRoutes: https://docs.taro.zone/docs/next/config-detail#h5routercustomroutes

[8]

@ShaoGongBra: https://github.com/ShaoGongBra

[9]

animation: https://docs.taro.zone/docs/next/app-config#animation

[10]

@b2nil: https://github.com/b2nil

[11]

defineAppConfig: https://docs.taro.zone/docs/next/app-config#defineappconfig-%E5%AE%8F%E5%87%BD%E6%95%B0

[12]

definePageConfig: https://docs.taro.zone/docs/next/page-config#definepageconfig-%E5%AE%8F%E5%87%BD%E6%95%B0

[13]

https://github.com/NervJS/taro/commit/41c7cef9b0832306e096121b84a26947b896416e

[14]

@CS-Tao: https://github.com/CS-Tao

[15]

熱過載: https://docs.taro.zone/docs/next/mini-troubleshooting#%E7%83%AD%E9%87%8D%E8%BD%BD

[16]

容器 id: https://docs.taro.zone/docs/next/app-config#appid

[17]

@liuchuzhang: https://github.com/liuchuzhang

[18]

@jiaozitang: https://github.com/jiaozitang

[19]

#11040: https://github.com/NervJS/taro/issues/11040

[20]

跨平臺 UI 興趣組: https://gitee.com/NervJS/community/blob/master/sig/sig-crossplatformui/sig_crossplatformui_cn.md

[21]

鴻蒙 && OpenHarmony 適配小組: https://github.com/NervJS/taro/discussions/categories/%E9%B8%BF%E8%92%99-openharmony-%E9%80%82%E9%85%8D%E5%B0%8F%E7%BB%84

[22]

適配進度: https://github.com/NervJS/taro/projects/2


本文分享自微信公眾號 - 凹凸實驗室(AOTULabs)。
如有侵權,請聯絡 [email protected] 刪除。
本文參與“OSC源創計劃”,歡迎正在閱讀的你也加入,一起分享。