微信小程序转换为多端应用教学

在距离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 上最热门的开源微信小程序应用，它们转换之后都表现良好：

• 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 嵌套。

  更多详情可以访问文档nervjs.github.io/taro/docs/t…了解更多。

  字节跳动（头条）小程序支持

  作为一个「多端统一开发框架」，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 命令创建一个全新的 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 都非常欢迎你来吐槽或观光：