距 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 开源共建的各位同学，也欢迎更多的同学参与进来！

参考资料