Taro开发多端应用

23次阅读

共计 1475 个字符,预计需要花费 4 分钟才能阅读完成。

官方解释: 使用 Taro,我们可以只书写一套代码,再通过 Taro 的编译工具,将源代码分别编译出可以在不同端(微信 / 百度 / 支付宝 / 字节跳动小程序、H5、React-Native 等)运行的代码。
使用前
第一次看到 Taro 是在 github 搜索 React 插件时看到(个人习惯, 有时候会去搜索一个语言的插件在 GitHub 再按照 Star 排名,看看各个插件功能,后期开发时用到这功能有个印象),感觉挺好的插件,以后开发小程序和快应用应该用的到,因为它直接使用 react 可以开发多端,相比于去看各个厂家小程序开发文档,使用 Taro 几乎没有学习成本。
为什么要了解它
这次使用它开发一个简单的网页南瓜棋,小时候玩的一个游戏,逻辑还是比较简单的,主要是去了解下 Taro 优缺点,以后开发公司简单小程序、快应用等做好准备,主要是了解他的局限性。
开发感受
具体看文档,我简单说下感受,我的前端水平: 简单的 HTML、CSS 了解复杂的网页不会(动画啥的还得看文档),React-Native 水平应该还是不错,主流的 React-Native 框架都会搭建,开发,原生调试,编写没问题,ES6 没问题。React 看了 2 周吧,入门。这个 Taro,直接写按照文档走,没出现问题。
缺点

由于之前大段时间开发 RN 的所以开发时直接使用 style={styles. 你的}这种开发,开发完 H5 时,打算运行在小程序上发现尴尬了,样式全乱了,后面给尺寸加 px。
用 Mobx 在 store 里面有个方法我命名 onChessGo,H5 运行没问题,小程序不行,排查了一段时间发现微信小程序里的 Mobx->store 方法不能已 on 开头,这个要注意。
好像暂时是不能引用三方 UI 库的和 UI 组件库的,这和 Taro 功能有关,可能一个小程序的库肯定不能用在 React-Native,这个缺陷会加大开发复杂页面的时间,可能对于原生 (各个小程序新功能) 新功能支持可能也不会太及时,由于页面简单,了解时间端更多的缺陷也没有看到。
return tsx 时在非 render 里面是不能运行的在微信小程序里,H5 没问题。

优点

快速开发各端的应用,不需要任何学习成本(我这前端小白都直接开写),还提供各个应用的原生功能的接口方便用户调用。
确实可以多端打包,亲测有效,但演示和一些细节要注意了。
Taro 自己开发了一个 UI 库 (Taro-ui) 满足了大部分的组件需求, 最后最重要的一点是个人认为大多数小程序、H5、快应用都是用于引流或者简单功能开发,这些功能开发 Taro 应该都可以满足,还有就是时间和人力成本 Taro 也是有优势。

应用南瓜棋

H5 截图

微信小程序截图

支付宝小程序截图

今日头条小程序截图

代码注意事项

由于之前以为在 H5 上运行,其他地方样式就一样,可是后面发现不行,所以样式用的内联样式,建议大家用 css、less、scss 这样 H5 和其他端样式应该一样。
有些命名不能用例如 Mobx 里 store 里的方法 @action 不能以 on 开发,微信小程序就调不懂。
今日头条小程序打包后有问题确实了 project.config.json, 反正我这边编译后导入不了,我新建了一个 project.config.json 复制过去,可能是这个原因导致下面的 UI 不见了。
我这边测试来了正常: H5、微信小程序、支付宝小程序, 编译后缺少东西但可以运行:今日头条小程序,其他的没测试太耗时。

GitHub 应用地址

React-Native 篇
七分设计感的纯 React-Native 项目 Mung
一个完整小巧的 Redux 全家桶项目
react-native 拖拽排序
多功能 React-Native-Toast 组件

正文完
 0