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

 

参考资料

[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