乐趣区

关于javascript:Taro-正式发布-34-版本-全面支持-Preact-Vue-32

jiezi

距 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 适配小组
  • 适配进度

鸿蒙 & OpenHarmony 交换群：

最初，衷心感谢参加了 Taro 开源共建的各位同学，也欢送更多的同学参加进来！

欢送关注凹凸实验室博客：aotu.io

或者关注凹凸实验室公众号（AOTULabs），不定时推送文章。

退出移动版