Skip to main content

Taro 1.1 发布，全面支持微信/百度/支付宝小程序

· 9 min read
luckyadam

在 9 月 16 日的掘金小程序大会上，Taro 正式发布了 1.0 版本。

作为一个多端统一开发框架，Taro 1.0 版本为广大开发者带来了许多激动人心的特性，帮助开发者们更方便快捷地开发多端应用。

前进的脚步没有停下，历时一个多月，Taro 1.1 版本正式来袭！

从 1.0 到 1.1，期间产生了 500 余次 Commit，发布了 23 个版本，Taro 一直保持高速的迭代频率，只为不断打磨，为它注入更多优秀的特性，让更多开发者受益。

Taro 1.1 正式来袭​

更丰富的平台转换支持​

自从微信小程序诞生以来，小程序的优势大家有目共睹，各大互联网厂商开始摩拳擦掌，纷纷布局小程序领域，其中势头最劲的当属百度智能小程序和支付宝小程序。对于前端而言，既是机遇，因为平台愈多，带来的机会愈多；也是挑战，因为不同的平台总会各有差异，为每个平台维护一份代码，成本显然太高。

为了降低多端应用的开发成本，在已全面支持 微信小程序 的基础上，Taro 在 1.1 版本中加入了对 百度智能小程序 和 支付宝小程序 的支持。

支持百度智能小程序​

升级到 1.1 版本后，即可获得将现有项目转换成百度智能小程序的能力。

使用如下命令进行百度智能小程序端编译预览及打包：

# npm script
$ npm run dev:swan
$ npm run build:swan
# 仅限全局安装
$ taro build --type swan --watch
$ taro build --type swan
# npx 用户也可以使用
$ npx taro build --type swan --watch
$ npx taro build --type swan

选择百度智能小程序模式，需要你下载并打开百度开发者工具，然后在项目编译完后选择项目根目录下 dist 目录进行预览。

目前已有使用 Taro 开发的首款百度智能小程序 “京东好物街” 正式上线，可以使用百度 APP，扫描以下二维码进行体验：

支持支付宝小程序​

支付宝小程序的转换方式与百度智能小程序一致。

你可以使用如下命令进行百度智能小程序端编译预览及打包：

# npm script
$ npm run dev:alipay
$ npm run build:alipay
# 仅限全局安装
$ taro build --type alipay --watch
$ taro build --type alipay
# npx 用户也可以使用
$ npx taro build --type alipay --watch
$ npx taro build --type alipay

选择支付宝小程序模式，需要你下载并打开支付宝小程序开发者工具，然后在项目编译完后选择项目根目录下 dist 目录进行预览。

新增平台标识​

在加入 百度智能小程序 和 支付宝小程序 支持后，目前 Taro 已经提供了对 5 个平台的支持，分别是 微信/百度/支付宝/React Native/H5，为了方便开发者书写平台差异化代码，Taro 为每个平台提供了平台标识，并可以通过 process.env.TARO_ENV 来获得，其取值分别如下

  • weapp，代表微信小程序
  • h5，代表 H5
  • rn，代表 React Native
  • swan，代表百度智能小程序，1.1 版本新增
  • alipay，代表支付宝小程序，1.1 版本新增

开放多端 UI 库打包能力​

在 1.0 版本中，Taro 的 build 命令新增了 --ui 参数，来将按照一定规则组织的代码打包成可以在 Taro 中使用的多端 UI 库。 并且，基于这一功能，Taro 推出了首个可以跨多端使用的多端 UI 库 Taro UI。

为了完善 Taro 生态，扩展 Taro 社区，在 1.1 版本中开放了多端 UI 库的打包能力，并提供了详细的开发指南。

同时 Taro 也提供了官方的多端 UI 库示例，这是一个完整规范的 UI 库开发例子，包含必要的项目改造以及测试套件，基于这个示例，开发者可以快速地开发一个多端 UI 库项目。

还有更多​

在 1.0 版本中，Taro 提供了对 微信小程序、H5 以及 React Native 的支持，而 1.1 版本，在原有支持的基础之上，对每一个平台进行不断完善，让其更加丰富完整。

微信小程序​

  • F 调用 this.setState 时，JSON Diff 算法 Bug 修复
  • F 修复 this.setState 回调里再调用 this.setState 的 Bug
  • A 新增 componentWillPreload 生命周期，用于数据预加载
  • A 支持在同一作用域对 JSX 赋值
  • F 多层 Map 循环嵌套包含条件判断时问题修复
  • F 中文字符被编译成 unicode 码问题修复
  • F 三元表达式解析问题修复
  • A 提升字符串模板的性能

H5​

  • A H5 支持分包配置
  • F 修复 H5 后台页面依然执行生命周期的问题
  • F 修复 PUT 、DELETE 等请求 body 为对象时无法发送 body 的问题
  • A 增加 setTabBarStyle 与 setTabBarItem API
  • A 增加 arrayBufferToBase64 与 base64ToArrayBuffer API
  • A 编译打包支持将公共 npm 包抽离成 lib 库

React Native​

  • A 支持 TypeScript
  • F 修复项目初始化后 less 编译报错
  • A 添加 config.window.navigationStyle 配置
  • A 添加 showNavigationBarLoading 与 hideNavigationBarLoading API
  • A 增加 arrayBufferToBase64 与 base64ToArrayBuffer API
  • F 修复样式支持警告
  • A watch 模式时代码按需编译
  • F 修复同一文件夹下多个JS文件样式引用错误
  • F app.json 的 expo 配置改为可覆盖
  • A 支持 Taro.pxTransform
  • F iconPath 和 selectedPath 的为同一个路径导致的重复引用的报错
  • A 在 config 中添加 rn 的 expo 配置
  • A 支持 deviceRatio 自定义

更完整的功能迭代记录请参阅 CHANGELOG

未来规划​

Taro 将会继续保持高效迭代，以满足日益增长的多端开发需求

目前已经确认的开发计划可以参见 Taro 版本开发计划。

小程序转 Taro 代码开启内测​

值得注意的是，激动人心的小程序转 Taro 代码功能已经开发完成，进入内测阶段，可以通过如下命令安装到 canary 版本，进行体验

$ npm i -g @tarojs/cli@canary

欢迎针对这一功能，提供宝贵意见，意见入口请戳 👈👈👈

同时，为了帮助 Taro 更好地成长，让 Taro 更好地回馈所有开发者，欢迎您给 Taro 提供优秀想法，或者直接贡献代码。