Taro 1.2:将已有微信小程序转换为多端应用

Easter79 等级 155 0 0

在距离 Taro 1.1 发布 之后一个月,经历了 500 多次提交和 17 个预览版本的迭代之后,我们有信心在今天发布 Taro 1.2 正式版。

Taro 1.2 比起 Taro 1.1 和其它的小程序开发框架,增加了许多首次在小程序框架上实现的功能,这些功能包括但不限于:

  • 微信小程序转多端应用

  • 字节跳动(头条)小程序支持

  • CSS Modules 支持

  • MobX 支持

微信小程序转多端应用

就像博客大战时代博客服务商提供了「搬家」工具一样,Taro 现在也提供了「搬家」工具让你方便地入驻 Taro 社区。

转换原有微信小程序应用非常简单,只需要安装 Taro 命令行工具,定位到待转项目根目录,运行命令:

$ taro convert

Taro 就会把转换好的代码生成在根目录下的 taroConvert 文件夹。

转换后的代码是高可读性的 JSX 代码,没有额外的庞大组件库开销。你可以轻易地进行二次开发,或者直接将这些代码通过 taro build 命令生成任意 Taro 已经支持平台的应用。

我们已经尝试使用 taro convert 成功转换了四个 GitHub 上最热门的开源微信小程序应用,它们转换之后都表现良好:

  • EastWorld/wechat-app-mall ★5000+ - 微信小程序商城

  • tumobi/nideshop-mini-program ★3000+ - 基于 Node.js + MySQL 开发的开源微信小程序商城

  • RebeccaHanjw/weapp-wechat-zhihu ★1000+ - 仿知乎

  • jectychen/wechat-v2ex ★400+ - V2EX

taro convert 不仅仅能支持转换微信小程序应用,它还能转换微信小程序第三方组件。

例如 wxParse 经过 taro convert编译之后还能突破原有只能解析 11 层 HTML 嵌套的限制,理论上可以解析无限层 HTML 嵌套。

更多详情可以访问文档了解更多

https://nervjs.github.io/taro/docs/taroize.html

字节跳动(头条)小程序支持

作为一个「多端统一开发框架」,Taro 当然也不会放过字节跳动小程序。在 Taro 1.2,你可以通过如下命令进行字节跳动小程序端的编译预览及打包:

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

选择字节跳动小程序模式,你需要下载并打开字节跳动小程序开发者工具,然后在项目编译完后选择项目根目录下 dist 目录进行预览。

相应地,Taro 的平台标识 process.env.TARO_ENV 也增加了新成员tt,代表字节跳动小程序。

CSS Modules 支持

在 Taro 最早开源的时候我们就支持了 SCSSLESSStylus,而在 Taro 1.2 中我们百尺竿头更进一步,给社区带来了 JSX 的好伙伴:CSS Modules。

对于 Taro 而言支持 CSS Modules 有着重要的意义。

Taro 在 1.0 的时候已经支持组件的 style 传入 JavaScript 对象,支持了 CSS Modules 之后组件的 className 也能做这点——这意味着 Taro 完全可以做到 JSX 的一项特性:「Everything in JavaScript」。

同时,通过编辑器的自动补全和校验功能,开发者再也不用担心 CSS 类误输入和 CSS 类的命名问题。

你可以查阅文档 【CSS Modules 的使用】 找到 CSS Modules 的开启方法。

CSS Modules 的支持主要由 Taro 社区的个人开发者 @MrKou47 (MrKou47) 开发,感谢他的贡献。

MobX 支持

在小程序应用变得日趋复杂的今天,越来越多的开发者选择使用独立的状态管理工具。

在 Taro 1.1 你可以选择 Redux 的体系的 redux-thunkdva-coreredux-saga 等工具。在 Taro 1.2 我们又带来了 taro-mobx

在 Taro 中使用 MobX 非常简单,你可以通过 taro init <your app> 命令创建一个全新的 MobX 模板项目。也可以查阅 【使用 MobX 】文档将 taro-mobx 接入已有项目。

MobX 的支持主要由 Taro 社区的个人开发者 @nanjingboy (Tom Huang) 开发,感谢他的贡献。

更多特性

面对社区里给力的个人贡献者,Taro 官方团队也没有闲着。在 Taro 1.2 开发期间通过 commit 关闭了 169 个 issue 的同时,我们还披星戴月带来了更多特性。其中值得一提的是:

  • H5 路由系统彻底重构

  • 小程序组件的 props 支持传入 JSX 元素

  • 支持 JSX 元素写在 switch-case 中,并支持 if-elseswitch-case 的多重嵌套

  • 支持引用别名(alias)

  • 与百度小程序和字节跳动小程序官方通力合作,抹平了一大波和微信小程序的差异

你可以通过 CHANGELOG 查阅完整的功能迭代纪录。

写在最后

Taro 1.2 最为激动人心的功能显然是「微信小程序转 Taro」 功能,通过这个功能已有的微信小程序应用能转化更好维护的 Taro(类 React) 代码,也能把 Taro 代码转化为多端应用。

但更重要的是,本次 Taro 1.2 更新的两个核心功能点均由个人开发者贡献——这完全体现了 Taro 社区的活跃、强大和开放。我们也会长期地维护与社区开发者们的关系,与开发者们一同成长,互利互赢。这也是 Taro 选择开源的意义所在。

如果你有任何想法,或者没有想法,Taro 都非常欢迎你来吐槽或观光:

https://github.com/NervJS/taro

本文分享自微信公众号 - 凹凸实验室(AOTULabs)。
如有侵权,请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”,欢迎正在阅读的你也加入,一起分享。

收藏
评论区

相关推荐

喜大普奔,微信终于支持外网打开小程序啦!
前言 千呼万唤始出来,微信小程序终于支持以URL Scheme的形式从外部唤起了。 long long ago 我们只能在微信内的网页中使用微信开发标签小程序跳转按钮
微信小程序modal
首先创建一个组件component,组件命名可以为modal modal.wxml的内容为 <view class'modalmask' wx:if'{{show}}' bindtap'clickMask' <view class'modalcontent' <scrollview scrolly class'mainc
微信小程序轮播图
实现效果 wxml代码 <view style"height:20rpx;"</view <view class"swiper"
服务号跳转微信小程序的坑
服务号跳转微信小程序一直报错 {"errcode":40165,"errmsg":"invalid weapp pagepath hint: 8yDcBa01023942"}
微信小程序 - 路由实践
欢迎来到我博客阅读:1\. 前言在微信小程序由一个 App()实例,和众多Page()组成。而在小程序中所有页面的路由全部由框架进行管理,框架以栈的形式维护了所有页面,然后提供了以下 API 来进行路由之间的跳转:1. wx.navigateTo2. wx.redirectTo3. wx.navigateBack4.
微信小程序体验composition-api(类似vue3)
微信小程序compositionapi用该是什么样子? 使用使用起来应该像是这个样子wxue(options) setup配置应该是包含一个setup选项是一个函数,返回的函数可以this.xxx调用,返回的数据可以this.data.xxx用到,如下import wxue, reactive from 'wxue'wxue( setup(option
5G消息与微信小程序互联互通?北京国都互联这么做……
最近微信小程序上线了一个超级流量的新入口 URL Scheme,据微信官网介绍,scheme码适用于短信、邮件、外部网页等拉起小程序的业务场景。通过小程序页面的URL Scheme,可以在短信、邮件或微信外部的网页中打开微信小程序。意义在于将微信流量生态延伸到微信以外渠道,进一步完善了小程序和外部渠道互通的营销场景。 **北京国都互联**第一时
1小时搭建微信小程序后端
CoNami小程序Demo端到端开发指南 ==================== 1\. 注册登录微信公众平台 -------------- 登录[https://mp.weixin.qq.com,里面有详细的指引,这里就不赘述了。这里注册最后得到的比较重要的东西包括两个](https://www.oschina.net/action/GoToLink
App唤起微信小程序和回调
在同一开放平台账号下的移动应用及小程序无需关联即可完成跳转,非同一开放平台账号下的小程序需与移动应用(APP)成功关联后才支持跳转。 可在“管理中心-移动应用-应用详情-关联小程序信息”,为通过审核的移动应用发起关联小程序操作。 ### 唤起 App打开下程序他有两种方式: 1,通过App分享小程序卡片 到微信,然后在微信上点击小程序卡片打开小程序,
Taro
**微信小程序转Taro  (转发[https://nervjs.github.io/taro/docs/taroize.html](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Fnervjs.github.io%2Ftaro%2Fdocs%2Ftaroize.html))** Taro
Taro 1.2:将已有微信小程序转换为多端应用
在距离 Taro 1.1 发布 之后一个月,经历了 **500** 多次提交和 **17** 个预览版本的迭代之后,我们有信心在今天发布 Taro 1.2 正式版。 Taro 1.2 比起 Taro 1.1 和其它的小程序开发框架,增加了许多首次在小程序框架上实现的功能,这些功能包括但不限于: * 微信小程序转多端应用 * 字节跳动(头
Taro 牵手腾讯有数,助力小程序数据化运营
> “  > > Taro 引入了腾讯有数的微信小程序无痕埋点能力,为 Taro 的开发者提供真·零开发的 8 大无痕埋点能力以及自定义埋点能力,包含小程序启动、显示、隐藏、页面浏览、页面离开、分享、下拉刷新、上拉触底等八大自动化埋点能力以及搜索、商品归因等定制化埋点,以及经营分析、直播分析、导购分析等能力,让你的小程序可以基于微信生态,串联全场景多触点,
Taro小程序自定义顶部导航栏
微信自带的顶部导航栏是无法支持自定义icon和增加元素的,在开发小程序的时候自带的根本满足不了需求,分享一个封装好的组件,支持自定义icon、扩展dom,适配安卓、ios、h5,全面屏。 我用的是京东的Taro多端编译框架写的小程序,原生的也可以适用,用到的微信/taro的api做调整就行,实现效果如下。 ![在这里插入图片描述](https://i
Taro小程序采坑记
[Taro](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Ftaro.aotu.io%2F),京东凹凸实验室出品的适配多端的一个框架, **Taro** 是一套遵循 [React](https://www.oschina.net/action/GoToLink?url=https%3A%2
taro小程序展示富文本
在微信小程序下会用到wxParse这个东西来达到html转换wxml的效果, taro小程序官方也给出了示例,[地址](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Fgithub.com%2FNervJS%2Ftaro-components-test%2Fblob%2Fmaster%2F