内容简介:自 Taro 3.1 体验版推出后,我们不断地根据社区的反馈意见对 3.1 版本进行打磨。主要改进了开放式架构、引入了 CustomWrapper 组件以解决性能问题、提出了原生小程序渐进式混合使用 Taro 的解决方案。 经历了 12...
自 Taro 3.1 体验版推出后,我们不断地根据社区的反馈意见对 3.1 版本进行打磨。主要改进了开放式架构、引入了 CustomWrapper
组件以解决性能问题、提出了原生小程序渐进式混合使用 Taro 的解决方案。
经历了 12 个 beta 版本后,终于迎来了 3.1 正式版????
一、Highlights
1. 开放式架构
近年来业界推出的小程序平台越来越多,但 Taro 核心维护的平台只有 6 个,因此常常有同学提出能不能支持某某平台的 Feature Request。
基于目前的架构,支持一个新的平台开发复杂度高,同时社区也难以参与贡献。
为此我们把 Taro 打造成为一个开放式框架,通过端平台插件能支持任意小程序平台:
-
插件开发者无需修改 Taro 项目源码,即可编写出一个端平台插件[1]。
-
插件使用者只需安装、配置端平台插件[2],即可把代码编译到指定平台。
基于开放式架构,我们新增了一些有趣的插件,也十分期待大家利用它施展创意。
新增的插件:
插件 | 功能 |
---|---|
@tarojs/plugin-platform-weapp-qy[3] | 编译企业微信小程序 |
@tarojs/plugin-platform-alipay-dd[4] | 编译钉钉小程序 |
@tarojs/plugin-platform-alipay-iot[5] | 编译支付宝 IOT 小程序 |
@tarojs/plugin-inject[6] | 为所有小程序平台快速新增 API、组件,调整组件属性等 |
2. 新增小程序性能优化组件 CustomWrapper
Taro3 使用 <template>
进行渲染,所有的 setData
都由页面对象调用。如果页面结构比较复杂,应用更新的性能就会下降。
为此我们引入了一个基础组件 CustomWrapper
,它的作用是创建一个原生自定义组件。对后代节点的 setData
将由此自定义组件进行调用,达到局部更新的效果,从而提升更新性能。
开发者可以使用 CustomWrapper
去包裹遇到更新性能问题的组件:
<CustomWrapper>
<GoodsList>
<Item />
<Item />
// ...
</GoodsList>
</CustomWrapper>
更详细的性能优化原理请见《Taro 助力京喜拼拼项目性能体验优化》[7]
3. 原生小程序渐进式混合使用 Taro 开发
过去我们对在 Taro 项目中混合使用原生的支持度较高。相反地,对在原生项目中混合使用 Taro 却没有太重视。但是市面上有着存量的原生开发小程序,他们接入 Taro 开发的改造成本往往非常大,最后只得放弃混合开发的想法。
经过与京喜拼拼项目的合作[8],也驱使了我们更加关注这部分需求。Taro 推出了一套完整的原生项目混合使用 Taro 的方案。
方案[9]主要支持了三种场景:
-
在原生项目中使用 Taro 开发的页面。
-
在原生项目的分包中运行完整的 Taro 项目。
-
在原生项目中使用 Taro 开发的自定义组件。
希望以上方案能满足打算逐步接入 Taro 开发的同学。更多意见也欢迎在 Github[10] 上给我们留言。
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[11]
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[12]
如果不希望打开此功能,可以修改 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
属性,解决滚动穿透[13]问题。 -
同步所有内置小程序官方最新的 API、组件能力。
四、问题修复
1. 重要
-
修复百度小程序渲染问题,#7293。
-
修复、增强微信小程序转换为 Taro 的能力。
-
优化打包体积。
-
支付宝小程序支持引用自定义组件。
-
修复小程序分享 API 在使用 redux 时无法生效的问题,#7232。
2. 小程序
-
修复多端文件没按照 Webpack
extension
配置解析的问题,#6786,#7265 。 -
修复 style 属性设置失败的问题,#8678。
3. H5
-
修复 H5 端 HMR 失效的问题。
-
支持路由 404 时触发
App.onPageNotFound
,#7474。 -
修复表单组件
slot
兼容问题,#7363。 -
修复
View
和Text
组件多行截断样式失败问题,#7472 #6741。 -
组件的
style
属性支持设置 CSS 变量,#7452。
五、升级指南
从 v2.x 升级的同学需要先按 迁移指南[14] 进行操作。
从 v3.x 升级的同学,首先需要安装 v3.1 的 CLI 工具:
npm i -g @tarojs/cli
然后进入项目,删除 node_modules、yarn.lock、package-lock.json。
最后把 package.json
文件中 Taro 相关依赖的版本修改为 ^3.1.0
,再重新安装依赖。至此升级结束。
六、未来规划
得益于 58 技术团队[15] 的全力支持,Taro 3 即将支持 React Native,现已推出 3.2.0 的 Beta 版本,3.2.0 正式版将于本月底推出。欢迎抢先体验:《增加 React Native 支持的 Taro 3.2.0 版本测试通告》[16]
七、感谢
开源不易,贵在坚持。Taro 团队衷心感谢各位参与过本项目开源建设的朋友,无论是为 Taro 提交过代码、建设周边生态,还是反馈过问题,甚至只是茶余饭后讨论、吐槽 Taro 的各位。
现诚挚邀请您与 Taro 官方团队交流您的使用情况,有你相伴,Taro更加精彩!问卷地址[17]
最后,特别感谢为 Taro 从 v3.0 走到 v3.1 贡献过代码的各位同学,不分先后:
-
@wuchangming
-
@SyMind
-
@zhuxianguo
-
@Songkeys
-
@vdfor
-
@ZeroTo0ne
-
@zhaoguoweiLLHC
-
@Spencer17x
-
@wingsico
-
@w91
-
@fjc0k
-
@Leechael
-
@southorange1228
-
@alexlees
-
@cncolder
-
@rottenpen
-
@gcxfd
-
@twocucao
-
@pengtikui
-
@kala888
-
@LengYXin
-
@iugo
-
@jin-yufeng
-
@xuchengzone
-
@csolin
-
@xiaoyao96
-
@baranwang
-
@fred8617
-
@huanz
-
@Cslove
-
@002huiguo
-
@jazzqi
-
@Jetsly
-
@yuezk
-
@lukezhange001
-
@k55k32
-
@Soul-Stone
-
@hisanshao
-
@gjc9620
-
@younthu
-
@digiaries
-
@GoodbyeNJN
-
@Swordword
-
@helsonxiao
-
@Ininit
-
@atzcl
-
@taoqf
-
@Aysnine
-
@cjz9032
-
@z3rog
-
@doublethinkio
-
@Jackyzm
-
@ywzou
-
@koalaink
-
@mosqlee
-
@wangjuerong
-
@kdxcxs
-
@LiHDong
-
@ryougifujino
-
@GitaiQAQ
-
@logix-o
-
@CallMeXYZ
参考资料
[1]
编写出一个端平台插件: https://taro-docs.jd.com/taro/docs/next/platform-plugin-how
[2]
安装、配置端平台插件: https://taro-docs.jd.com/taro/docs/next/platform-plugin#%E7%AB%AF%E5%B9%B3%E5%8F%B0%E6%8F%92%E4%BB%B6%E4%BD%BF%E7%94%A8%E6%96%B9%E6%B3%95%EF%BC%9A
[3]
@tarojs/plugin-platform-weapp-qy: https://github.com/NervJS/taro-plugin-platform-weapp-qy
[4]
@tarojs/plugin-platform-alipay-dd: https://github.com/NervJS/taro-plugin-platform-alipay-dd
[5]
@tarojs/plugin-platform-alipay-iot: https://github.com/NervJS/taro-plugin-platform-alipay-iot
[6]
@tarojs/plugin-inject: https://github.com/NervJS/taro-plugin-inject
[7]
《Taro 助力京喜拼拼项目性能体验优化》: https://docs.taro.zone/blog/2021-02-08-taro-jxpp#2-%E6%B8%B2%E6%9F%93%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96
[8]
经过与京喜拼拼项目的合作: https://docs.taro.zone/blog/2021-02-08-taro-jxpp
[9]
方案: https://docs.taro.zone/docs/taro-in-miniapp
[10]
Github: https://github.com/NervJS/taro
[11]
New JSX Transform: https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html
[12]
fast-refresh: https://github.com/facebook/react/issues/16604#issuecomment-528663101
[13]
滚动穿透: https://docs.taro.zone/docs/next/react#%E9%98%BB%E6%AD%A2%E6%BB%9A%E5%8A%A8%E7%A9%BF%E9%80%8F
[14]
迁移指南: https://taro-docs.jd.com/taro/docs/next/migration
[15]
58 技术团队: https://github.com/wuba
[16]
《增加 React Native 支持的 Taro 3.2.0 版本测试通告》: https://taro-docs.jd.com/taro/blog/2020-12-02-taro-3-2-0-cannary-1
[17]
问卷地址: https://wj.qq.com/s2/6494361/09cf
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:- 微软发布自己定制的 Linux 内核和发行版,面向物联网
- 面向企业定制化需求的移动应用平台:以Android端为例
- 定制优化 Nextcloud 镜像
- goim 架构与定制
- “私人定制” CLI 工具
- Docker 定制镜像
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
《数据结构》算法实现及解析
高一凡 / 西安电子科技大学出版社 / 2002-10-1 / 35.0
《数据结构算法实现及解析》配有光盘,光盘中包括书中所有程序及用标准C语言改写的程序。所有程序均在计算机上运行通过。《数据结构算法实现及解析》适用于使用教科书的大中专学生和自学者。书中的基本操作函数也可供从事计算机工程与应用工作的科技人员参考和采用。一起来看看 《《数据结构》算法实现及解析》 这本书的介绍吧!