Taro开发多端应用

  • 时间:2019-03-26 00:02 作者:mochixuan 来源:mochixuan 阅读:24
  • 扫一扫,手机访问
摘要:官方解释: 使用 Taro,我们可以只书写一套代码,再通过 Taro 的编译工具,将源代码分别编译出可以在不同端(微信/百度/支付宝/字节跳动小程序、H5、React Native 等)运行的代码。使用前第一次看到Taro是在github搜索React插件时看到(个人习惯,有时候会去搜索一个语言的插

官方解释: 使用 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
H5
H5
H5
微信小程序截图
image
支付宝小程序截图
image
今日头条小程序截图
image

代码注意事项

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

GitHub应用地址

  • 全部评论(0)
最新发布的资讯信息
【网页前端|JS】五年Java程序员该掌握的技术点,这些都不懂,还想拿高薪吗?(2019-04-24 22:19)
【系统环境|】2019蚂蚁金服面试总结(Java方向)(2019-04-18 16:19)
【系统环境|】notepad++ 三位数字正则替换规则(2019-04-12 23:02)
【系统环境|服务器应用】网络工程师跨交换机的Vlan配置与管理知识(2019-03-26 02:14)
【系统环境|服务器应用】最小化的定制版linux系统:CoreOS(2019-03-26 02:14)
【系统环境|服务器应用】分布式系统面试题:分布式事务处理方案?(2019-03-26 02:13)
【系统环境|服务器应用】带着网关去旅行(系列二):防止vps上ssh端口被恶意扫描(2019-03-26 02:13)
【系统环境|服务器应用】美团iOS面试总结(2019-03-26 02:13)
【系统环境|服务器应用】百度iOS面试总结(2019-03-26 02:13)
【系统环境|服务器应用】Java大佬之学习历程(三)(2019-03-26 02:13)
手机二维码手机访问领取大礼包
返回顶部