官方解释: 使用 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 应用地址 https://github.com/mochixuan/PumpkinChess
来源: https://juejin.im/post/5c7e26fe6fb9a04a07311e7f