跳到主要内容

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

· 阅读需 8 分钟
隔壁老李

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

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

微信小程序转多端应用​

就像博客大战时代博客服务商提供了「搬家」工具一样，Taro 现在也提供了「搬家」工具让你方便地入驻 Taro 社区。转换原有微信小程序应用非常简单，只需要安装 Taro 命令行工具，定位到待转项目根目录，运行命令：
$ taro convert

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

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

taro convert 不仅仅能支持转换微信小程序应用，它还能转换微信小程序第三方组件。例如 wxParse 经过 taro convert 编译之后还能突破原有只能解析 11 层 HTML 嵌套的限制，理论上可以解析无限层 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 最早开源的时候我们就支持了 SCSS 、 LESS 和 Stylus，而在 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-thunk 、dva-core、redux-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-else 和 switch-case 的多重嵌套
  • 支持引用别名（alias）
  • 与百度小程序和抖音小程序官方通力合作，抹平了一大波和微信小程序的差异

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

写在最后​

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

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

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

https://github.com/NervJS/taro