福州搜外内站

福州搜外内站

如何将微信小程序转多端应用

如何将微信小程序转多端应用呢?

Taro 是一个多端统一开发框架,它支持使用 React 的开发方式来编写可以同时在微信小程序、Web 、React Native 等多个平台上运行的应用,帮助开发者提升开发效率,改善开发体验,降低多端研发成本。


开源之初,由于种种原因,Taro 的微信小程序端组件化采用的是小程序 < template /> 标签来实现的,利用小程序 < template /> 标签的特性,将组件 JS 文件编译成 JS + WXML 模板,在父组件(页面)的模板中通过 < template /> 标签引用子组件的 WXML 模板来进行拼接,从而达到组件化的目的。


实践证明,Template 模板方案是一个失败的组件化方案,Taro 开源初期的 Bug 主要来源于此。因为这一方案将 JS 逻辑与模板拆分开了,需要手工来保证 JS 与模板中数据一致,这样在循环组件渲染、组件多重嵌套的情况下,要保证组件正确渲染与 props 正确传递的难度非常大,实现的成本也非常高。而且,囿于小程序 < template /> 标签的缺陷,一些功能(例如自定义组件包含子元素,等)无法实现。


所以,在经过艰辛的探索与实践之后,我们采用了小程序原生组件化来作为 Taro 的小程序端组件化方案,并且通过一些处理,绕开了小程序组件化的诸多限制,为 Taro 的稳定性打下了坚实基础,并带来了以下好处:


小程序端组件化更加健壮

尽可能减少由于框架带来的性能问题

依托官方组件化,方便以后解锁更多可能


就像博客大战时代博客服务商提供了「搬家」工具一样,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 <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 选择开源的意义所在。


上一篇文章 : 如何进行网络营销 下一篇文章 : 程序员编程书籍推荐
cache
Processed in 0.026949 Second.