Taro开发多端应用

官方解释: 使用 Taro，咱们能够只书写一套代码，再经过 Taro 的编译工具，将源代码分别编译出能够在不一样端（微信/百度/支付宝/字节跳动小程序、H五、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)知足了大部分的组件需求,最后最重要的一点是我的认为大多数小程序、H五、快应用都是用于引流或者简单功能开发，这些功能开发Taro应该均可以知足，还有就是时间和人力成本Taro也是有优点。

应用南瓜棋

---

H5截图

---

微信小程序截图

---

支付宝小程序截图

---

今日头条小程序截图

代码注意事项

• 1. 因为以前觉得在H5上运行，其余地方样式就同样，但是后面发现不行，因此样式用的内联样式，建议你们用css、less、scss这样H5和其余端样式应该同样。
• 2. 有些命名不能用例如Mobx里store里的方法@action不能以on开发，微信小程序就调不懂。
• 3. 今日头条小程序打包后有问题确实了project.config.json,反正我这边编译后导入不了，我新建了一个project.config.json复制过去，多是这个缘由致使下面的UI不见了。
• 4. 我这边测试来了正常: H五、微信小程序、支付宝小程序,编译后缺乏东西但能够运行：今日头条小程序，其余的没测试太耗时。

GitHub应用地址

---

React-Native 篇

七分设计感的纯React-Native项目Mung

一个完整小巧的Redux全家桶项目

react-native拖拽排序

多功能React-Native-Toast组件