【ArchSummit架构师峰会】探讨数据与人工智能相互驱动的关系>>> 了解详情
写点什么

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:335342

评论 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
回复
没有更多了
发现更多内容

【云服务器】云服务器哪家好用便宜服务好?

行云管家

云计算 企业上云 云服务器 行云管家

专业移动办公解决方案!远程控制软件RayLink内测火热进行中!

RayLink远程工具

远程控制软件 远程办公软件 远控软件 远程桌面连接 RayLink

docker-compose下的java应用启动顺序两部曲之一:问题分析

程序员欣宸

Java Docker Docker-compose 11月月更

vue这些原理你都知道吗?(面试版)

bb_xiaxia1998

Vue

React源码解读之任务调度

flyzz177

React

安防小间距LED显示屏的解决方案是什么

Dylan

LED显示屏 户外LED显示屏 led显示屏厂家

从零开始实现一个Promise

helloworld1024fd

JavaScript

【LeetCode】验证栈序列Java题解

Albert

算法 LeetCode 11月月更

React核心技术浅析

夏天的味道123

React

热备与冷备分别是什么意思?怎么通俗理解?

行云管家

高可用 热备 冷备

2022年中国汽车OTA行业发展洞察

易观分析

汽车 OTA

谈谈vue面试那些题

bb_xiaxia1998

Vue

react hook 源码完全解读

flyzz177

React

vue面试之Composition-API响应式包装对象原理

bb_xiaxia1998

Vue

什么是 HTML 语义化,有什么好处

肥晨

11月月更 HTML语义化 语义化标签

【GitHub60K+Star】12W字Java后端技术总结,助力2023年春招

程序知音

程序员 java面试 面试技巧 后端技术 Java面试八股文

一文总结JavaScript手写面试题

helloworld1024fd

JavaScript

React源码中的dom-diff

夏天的味道123

React

9个GaussDB常用的对象语句

华为云开发者联盟

数据库 后端 华为云 企业号十月 PK 榜

从零手写react-router

helloworld1024fd

JavaScript

梁胜博士:软件供应链安全两手抓,既要安全左移也要全链路防护丨活动回顾

SEAL安全

DevOps DevSecOps 软件供应链 安全左移 软件供应链安全

那些年面挂的js手写题

helloworld1024fd

JavaScript

现在加入写作社区,惊喜等你开启!

InfoQ写作社区官方

热门活动

从延迟处理讲起,JavaScript 也能惰性编程?

掘金安东尼

前端 11月月更

如何准备好一场vue面试

bb_xiaxia1998

Vue

React源码解读之更新的创建

flyzz177

React

React生命周期深度完全解读

夏天的味道123

React

为何大企业都纷纷选择低代码做数字化转型?

优秀

数字化 低代码开发

深入浅出文件系统新形态

焱融科技

云计算 高性能 文件存储

vue2项目搭建-使用VUE CLI3.0搭建项目vue2+scss+element简易版

肥晨

脚手架 11月月更 vue2项目搭建

分享10个降低PCB成本的技巧!可收藏

华秋PCB

PCB PCB打样 PCB设计

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