距 Taro v3.4 beta 版本的釋出已有一段時間，期間我們完善了對 Preact 和 Vue3 的支援，加入了一些有趣的特性，更是對 H5 作了大幅度的優化與調整，並於近期釋出了 v3.4 的正式版本。
上月我們還推出了支援開發鴻蒙應用的 v3.5.0 canary 版本，歡迎各位同學關注~
一、支援使用 Preact
開發小程式應用時我們經常會受到包體積的掣肘，大型應用常常為了「尺土寸金」的包體積開展瘦身行動。在此背景下 React 將近 100k 的體積則顯得有點過於奢侈。因此 Taro v3.4 實現了對 Preact 的支援，僅需少量設定即可從 React 切換到 Preact，有效地降低了包體積。
是一款體積超小的類 React 框架，提供和 React 幾乎一致的 API，相容 React 生態，而體積只有 5k 左右。
適配思路與具體用法請參閱
二、更好地支援 Vue 3.2
1. 支援 Composition API 版本的小程式生命週期勾點
Vue 3.2 正式推出了 語法，過去 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 時會報錯。
感謝 同學，參照 為 Taro DOM 實現了 MutationObserver API，讓我們可以使用 <style> v-bind 語法。
Taro DOM 只針對 Vue3 暴露了
MutationObserverAPI，使用 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
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 編譯宏
再次感謝 同學為 Taro 新增了此特性。 檔案地址：、
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導致的記憶體漏失的問題，相關 。 - 修復
CustomWrapper巢狀使用後失效的問題，感謝 的貢獻。 - 執行時體積優化，相比 Taro v3.3 版本大約減少了 30k 空間。
特性
- 支援微信小程式開發者工具的熱過載功能，。
- 支援支付寶小程式 2.0 構建。
- H5 端支援設定渲染頁面的容器 id，
- H5 端路由規則調整，Query 引數不再新增到
pageId中，同時TabBar頁面不會重新建立重複節點。 - H5 端支援
entryPagePath引數，by - H5 端支援
CoverView&CoverImage元件，by - 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 引數，和小程式介面對齊，如果專案內針對這個差異做過適配，可以在升級後移除。
升級指南
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 交流群：
最後，衷心感謝參與了 Taro 開源共建的各位同學，也歡迎更多的同學參與進來！