Taro 3.1 版本正式发布:面向定制化的小程序开发

马丁路德
• 阅读 1898

自 Taro 3.1 体验版推出后,我们不断地根据社区的反馈意见对 3.1 版本进行打磨。主要改进了开放式架构、引入了 CustomWrapper 组件以解决性能问题、提出了原生小程序渐进式混合使用 Taro 的解决方案。

经历了 12 个 beta 版本后,终于迎来了 3.1 正式版🎉

一、Highlights

1. 开放式架构

近年来业界推出的小程序平台越来越多,但 Taro 核心维护的平台只有 6 个,因此常常有同学提出能不能支持某某平台的 Feature Request。

基于目前的架构,支持一个新的平台开发复杂度高,同时社区也难以参与贡献。

为此我们把 Taro 打造成为一个开放式框架,通过端平台插件能支持任意小程序平台

基于开放式架构,我们新增了一些有趣的插件,也十分期待大家利用它施展创意。

新增的插件:

插件 功能
@tarojs/plugin-platform-weapp-qy 编译企业微信小程序
@tarojs/plugin-platform-alipay-dd 编译钉钉小程序
@tarojs/plugin-platform-alipay-iot 编译支付宝 IOT 小程序
@tarojs/plugin-inject 为所有小程序平台快速新增 API组件调整组件属性

2. 新增小程序性能优化组件 CustomWrapper

Taro3 使用 <template> 进行渲染,所有的 setData 都由页面对象调用。如果页面结构比较复杂,应用更新的性能就会下降。

为此我们引入了一个基础组件 CustomWrapper,它的作用是创建一个原生自定义组件。对后代节点的 setData 将由此自定义组件进行调用,达到局部更新的效果,从而提升更新性能。

开发者可以使用 CustomWrapper 去包裹遇到更新性能问题的组件:

<CustomWrapper>
  <GoodsList>
    <Item />
    <Item />
    // ...
  </GoodsList>
</CustomWrapper> 

更详细的性能优化原理请见《Taro 助力京喜拼拼项目性能体验优化》

3. 原生小程序渐进式混合使用 Taro 开发

过去我们对在 Taro 项目中混合使用原生的支持度较高。相反地,对在原生项目中混合使用 Taro 却没有太重视。但是市面上有着存量的原生开发小程序,他们接入 Taro 开发的改造成本往往非常大,最后只得放弃混合开发的想法。

经过与京喜拼拼项目的合作,也驱使了我们更加关注这部分需求。Taro 推出了一套完整的原生项目混合使用 Taro 的方案。

方案主要支持了三种场景:

  • 在原生项目中使用 Taro 开发的页面。
  • 在原生项目的分包中运行完整的 Taro 项目。
  • 在原生项目中使用 Taro 开发的自定义组件。

希望以上方案能满足打算逐步接入 Taro 开发的同学。更多意见也欢迎在 Github 上给我们留言。

4. 拥抱 React 17、TypeScript 4

4.1. 使用方法

新项目:

模板默认依赖 React 17、TypeScript 4,可以直接使用。

旧项目:

手动升级项目依赖:

  • react: ^17.0.0
  • react-dom: ^17.0.0
  • typescript: ^4.1.0
  • @typescript-eslint/parser: ^4.15.1
  • @typescript-eslint/eslint-plugin: ^4.15.1

设置 ESLint 配置:

// .eslintrc
module.exports = {
  "extends": ["taro/react"],
  "rules": {
    "react/jsx-uses-react": "off",
    "react/react-in-jsx-scope": "off"
  }
} 

4.2. React 默认支持 New JSX Transform

New JSX Transform 让开发者不再需要在书写 JSX 前先引入 React

如果不希望打开此功能,可以修改 Babel 配置的 reactJsxRuntime 选项为 classes

// babel.config.js
module.exports = {
  presets: [
    ['taro', {
      framework: 'react',
      ts: true,
      reactJsxRuntime: 'classes'
    }]
  ]
} 

4.3. React H5 端默认开启 fast-refresh

如果不希望打开此功能,可以修改 Taro 配置和 Babel 配置:

// config/index.js
const config = {
  h5: {
    devServer: {
      hot: false
    }
  }
}

// babel.config.js
module.exports = {
  presets: [
    ['taro', {
      framework: 'react',
      ts: true,
      hot: false
    }]
  ]
} 

二、Breakings

1. React

项目的 React 版本必须 >= 16.14.0,或使用 17.0.0+

2. Vue2

修复 Vue2 入口组件生命周期多次触发的问题,#7179

用户编写的入口组件需要修改如下:

// app.js

// 3.0 中需要创建 Vue 对象
const App = new Vue({})

// 3.1 中只需要返回对象字面量
const App = {} 

3. Linaria

使用 Linaria 时,需要修改 linaria.config.js 的内容。

module.exports = {
  rules: [
    {
      action: require("linaria/evaluators").shaker,
    },
    {
      // 此处的正则有改变
      test: /node_modules[\/\\](?!@tarojs)/,
      action: "ignore"
    }
  ]
} 

三、特性

  • 组件 View 增加 catchMove 属性,解决滚动穿透问题。
  • 同步所有内置小程序官方最新的 API、组件能力。

四、问题修复

1. 重要

  • 修复百度小程序渲染问题,#7293。
  • 修复、增强微信小程序转换为 Taro 的能力。
  • 优化打包体积。
  • 支付宝小程序支持引用自定义组件。
  • 修复小程序分享 API 在使用 redux 时无法生效的问题,#7232。

2. 小程序

  • 修复多端文件没按照 Webpack extension 配置解析的问题,#6786,#7265 。
  • 修复 style 属性设置失败的问题,#8678。

3. H5

  • 修复 H5 端 HMR 失效的问题。
  • 支持路由 404 时触发 App.onPageNotFound,#7474。
  • 修复表单组件 slot 兼容问题,#7363。
  • 修复 ViewText 组件多行截断样式失败问题,#7472 #6741。
  • 组件的 style 属性支持设置 CSS 变量,#7452。

五、升级指南

从 v2.x 升级的同学需要先按 迁移指南 进行操作。

从 v3.x 升级的同学,首先需要安装 v3.1 的 CLI 工具:

npm i -g @tarojs/cli 

然后进入项目,删除 node_modulesyarn.lockpackage-lock.json

最后把 package.json 文件中 Taro 相关依赖的版本修改为 ^3.1.0,再重新安装依赖。至此升级结束。

六、未来规划

得益于 58 技术团队 的全力支持,Taro 3 即将支持 React Native,现已推出 3.2.0 的 Beta 版本,3.2.0 正式版将于本月底推出。欢迎抢先体验:《增加 React Native 支持的 Taro 3.2.0 版本测试通告》

七、感谢

开源不易,贵在坚持。Taro 团队衷心感谢各位参与过本项目开源建设的朋友,无论是为 Taro 提交过代码、建设周边生态,还是反馈过问题,甚至只是茶余饭后讨论、吐槽 Taro 的各位。

点赞
收藏
评论区
推荐文章
blmius blmius
2年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
Jacquelyn38 Jacquelyn38
2年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
Wesley13 Wesley13
2年前
java将前端的json数组字符串转换为列表
记录下在前端通过ajax提交了一个json数组的字符串,在后端如何转换为列表。前端数据转化与请求varcontracts{id:'1',name:'yanggb合同1'},{id:'2',name:'yanggb合同2'},{id:'3',name:'yang
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
Wesley13 Wesley13
2年前
mysql设置时区
mysql设置时区mysql\_query("SETtime\_zone'8:00'")ordie('时区设置失败,请联系管理员!');中国在东8区所以加8方法二:selectcount(user\_id)asdevice,CONVERT\_TZ(FROM\_UNIXTIME(reg\_time),'08:00','0
Wesley13 Wesley13
2年前
00:Java简单了解
浅谈Java之概述Java是SUN(StanfordUniversityNetwork),斯坦福大学网络公司)1995年推出的一门高级编程语言。Java是一种面向Internet的编程语言。随着Java技术在web方面的不断成熟,已经成为Web应用程序的首选开发语言。Java是简单易学,完全面向对象,安全可靠,与平台无关的编程语言。
Stella981 Stella981
2年前
Django中Admin中的一些参数配置
设置在列表中显示的字段,id为django模型默认的主键list_display('id','name','sex','profession','email','qq','phone','status','create_time')设置在列表可编辑字段list_editable
Wesley13 Wesley13
2年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
为什么mysql不推荐使用雪花ID作为主键
作者:毛辰飞背景在mysql中设计表的时候,mysql官方推荐不要使用uuid或者不连续不重复的雪花id(long形且唯一),而是推荐连续自增的主键id,官方的推荐是auto_increment,那么为什么不建议采用uuid,使用uuid究
Python进阶者 Python进阶者
2个月前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这