写点什么

Taro 1.1 全面支持微信 / 百度 / 支付宝小程序了!

  • 2018-11-08
  • 本文字数:2258 字

    阅读完需:约 7 分钟

Taro 1.1 全面支持微信/百度/支付宝小程序了!

9 月份, 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 自定义

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

https://github.com/NervJS/taro/blob/master/CHANGELOG.md

未来规划

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

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

https://github.com/NervJS/taro/blob/master/PLANS.md

小程序转 Taro 代码开启内测

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

复制代码
$ npm i -g @tarojs/cli@canary

欢迎针对这一功能,提供宝贵意见,意见入口请戳:
https://github.com/NervJS/taro/issues/955

同时,为了帮助 Taro 更好地成长,让 Taro 更好地回馈所有开发者,欢迎您给 Taro 提供优秀想法,或者直接贡献代码: https://github.com/NervJS/taro/pulls

2018-11-08 11:335987

评论 10 条评论

发布
用户头像
haha
2018-11-09 13:13
回复
用户头像
Hello World!
2018-11-09 09:08
回复
用户头像
体验一下新版网站
2018-11-08 17:09
回复
欢迎到来
2018-11-09 00:28
回复
用户头像
用着挺爽的,加油
2018-11-08 14:27
回复
用户头像
这个厉害了。
2018-11-08 14:11
回复
用户头像
牛逼了!
2018-11-08 13:10
回复
用户头像
比mpvue更全能
2018-11-08 11:13
回复
用户头像
最后的超链接多加了个句号
2018-11-08 10:20
回复
用户头像
强大!
2018-11-08 09:11
回复
没有更多了
发现更多内容

架构师训练营第1周_学习总结

方舟勇士

课程总结

架构师训练营-作业2-学习总结

狂奔嘀兔纸

极客大学架构师训练营

程序员为什么技术这么厉害,赚得钱却不多?

金刚小书童

程序员 职业规划 技术管理

谈谈阿里云发布新一代容器、Serverless 等云原生产品

关贺宇

阿里云 容器 云原生 中间件

Week01 学习笔记

任小龙

极客时间 - 架构师训练营 - week1 - 食堂就餐卡系统设计

毛聪

极客时间 极客大学架构师训练营 食堂就餐卡系统设计

极客大学架构师训练营第一周学习总结

竹森先生

学习 架构设计 极客大学架构师训练营

week1-食堂就餐卡系统设计

不在调上

ChaosBlade:从零开始的混沌工程(二)

郭旭东

云原生 混沌工程

食堂就餐卡系统架构设计

任小龙

食堂就餐卡系统架构设计文档

hifly

极客大学架构师训练营 UML 架构文档 部署图 时序图

架构师训练营第1周作业二:学习总结

sunpengjian

我们需要干货吗?

Neco.W

能力提升 经验分享 干货

架构师训练营-第一周-食堂就餐卡系统设计

Anrika

架构师 极客大学架构师训练营

架构师训练营-第一周学习总结

hellohuan

极客大学架构师训练营

《Web全栈实用编程》一书征集意见

老魚

程序员 大前端 Web 后端 全栈

设计模式之单件模式

公众号:程序猿成神之路

Java 设计模式

基于UML的食堂就餐卡系统设计

王海

极客大学架构师训练营

从软件架构说起

傻傻的帅

架构 架构要素 架构设计原则

IT自由职业者是怎么样的感受和体验

古月木易

IT职场

ZooKeeper核心原理及应用场景

奈学教育

zookeeper

架构师训练营第1周作业一:食堂就餐卡系统设计

sunpengjian

【话题讨论】「世界上最好的语言」?25周岁的 PHP “配” “不配”

InfoQ写作社区官方

php 写作平台 PHP25周年 热门活动

区块链技术如何应用于版权保护?

CECBC

区块链技术 维权 著作权 版权保护 侵权

产品路线图–您的产品战略路径指南

涛哥 数字产品和业务架构

敏捷 产品经理

食堂就餐卡系统设计

hellohuan

架构 极客大学架构师训练营

ZooKeeper核心原理及应用场景

古月木易

第一周课后作业——食堂就餐卡系统概要设计

jiangnanage

架构训练营第一周学习总结

陈靓-哲露

干货|微服务线上生命周期管理

博文视点Broadview

容器 微服务 架构师

架构师训练营第一周-食堂就餐卡系统设计

王铭铭

Taro 1.1 全面支持微信/百度/支付宝小程序了!_移动_凹凸实验室_InfoQ精选文章