Taro 3.1 版本正式发布：面向定制化的小程序开发-低调大师

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

2021-03-26 486

自 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

微信关注我们

原文链接：https://www.oschina.net/news/134721/taro-3-1-released

转载内容版权归作者及来源网站所有！

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。

EVM 3.0 发布，迈向超轻量物联网浏览器更进一步

1. EVM是什么？ EVM 全称 Embedded Virtual Machine，本质上是一款通用、精简的嵌入式虚拟机，由语法解析前端框架和字节码运行后端构成，可运行在资源受限制的单片机上。 2. EVM物联网应用生态建设 3. 更新内容增加cortex-m3/m4/a9平台支持; 增加bouffalolab博流BL602芯片支持; 增加cat1 4G芯片ASR3601芯片支持; 增加IOT.js支持，为物联网提供一个基于 Web 技术的可相互操作的服务平台; 增加对MicroPython的兼容支持，原生支持js调用micropython的标准库和第三方库; 增加对WebAssembly的原生支持，可以将C/C++/Java/Go/Rust等语言编译成WASM，在JS层原生调用wasm的API; ecma增加unicode支持 EVUE增加lvgl5.3的支持，原生兼容lvgl5.3/lvgl7; EVUE模拟器增加对lvgl5.3支持，支持在线运行evue和epk应用发布《EVM 应用开发标准 1.0》更新在线帮助手册；更新项目目录结构，支持集成更多RTOS和组件、模块；...

2021-03-26

971

Java通用代码生成器光2.2.0 智慧尝鲜版十二升级了经典Spring格式打包，支持Maven 光2.2.0 智慧尝鲜版十二升级了对smeu技术栈的支持，使其支持Maven,即msmeu技术栈，并含有所有光的先进特性，尝鲜版十二支持sbmeu,smeu,msmeu三种技术栈。支持图片类型，支持四种数据库。即MariaDB,MySQL,Oracle和PostgreSQL。EasyUI升级至最新，新支持导出Ｗord格式数据。代码生成器war包请部署在Tomcat8.5 webapps目录下。目前，尝鲜版十二支持MariaDB，MySQL,PostgreSQL和Oracle四种数据库，支持sbmeu,smeu和msmeu三种技术栈，一共有9种输出结果。项目地址：https://gitee.com/jerryshensjf/LightSBMEU 发行版下载地址：https://gitee.com/jerryshensjf/LightSBMEU/attach_files 尝鲜版十一，使用Oracle，B站视频:https://www.bilibili.com/video/BV1fy4y...

2021-03-26

547

资源下载

更多资源

优质分享App

近一个月的开发和优化，本站点的第一个app全新上线。该app采用极致压缩，本体才4.36MB。系统里面做了大量数据访问、缓存优化。方便用户在手机上查看文章。后续会推出HarmonyOS的适配版本。

Mario

马里奥是站在游戏界顶峰的超人气多面角色。马里奥靠吃蘑菇成长，特征是大鼻子、头戴帽子、身穿背带裤，还留着胡子。与他的双胞胎兄弟路易基一起，长年担任任天堂的招牌角色。

腾讯云软件源

为解决软件依赖安装时官方源访问速度慢的问题，腾讯云为一些软件搭建了缓存服务。您可以通过使用腾讯云软件源站来提升依赖包的安装速度。为了方便用户自由搭建服务架构，目前腾讯云软件源站支持公网访问和内网访问。

Rocky Linux

Rocky Linux（中文名：洛基）是由Gregory Kurtzer于2020年12月发起的企业级Linux发行版，作为CentOS稳定版停止维护后与RHEL（Red Hat Enterprise Linux）完全兼容的开源替代方案，由社区拥有并管理，支持x86_64、aarch64等架构。其通过重新编译RHEL源代码提供长期稳定性，采用模块化包装和SELinux安全架构，默认包含GNOME桌面环境及XFS文件系统，支持十年生命周期更新。