使用Taro重构公司项目所得
2019-05-17 本文已影响0人
花亭子老纯
这次的重构主要是针对（微信，支付宝，百度）小程序
我先说说自己这一个来月使用的心里想法，总体来说这个框架解决了大部分的问题，让我使用react语法开发的很顺畅。框架总体来说，微信兼容的要全面些在官网也可以明显看出来，支付宝和百度就会有蛮多的api没有支持，需要写原生的。
下面就开始我的入坑之旅了
首先安装官网的文档我一步步小心安装好所有的文件
然后就怀着好奇的心态运行了命令 npm run dev:weapp,控制台就开始运作起来了，我知道自己安装成功了，等到运行完成在dist有了文件，但是一个念头上心来，他不区分平台去打印的吗，于是乎我看了看文档直接动手改了输出结构
image.png
再次的结果让我看到了兴奋的结果，他按目录输出了。
我接着看文档，觉得最有必要看看的是‘最佳实践’，里面很多类容值得注意，不然打包的时候会有灵异事件发生。
然后要说的就是一些一下子看不到的东西，就是组件方面的问题，后续不知道会不会改，但是我用的时候是这样的。
- 不要在componentDidShow中获取this.$router,改到componentWillMount中获取
- this.$router可以获取到别的小程序和推文跳转进来带过来的参数和小程序文档里面结果是一样的，只是小程序是通过onlaunch传进来的参数
- 表单的input不要使用disable这个属性，因为在支付宝小程序里面样式写死了透明度为0.3是不可以更改的
- 所有的事件带上on开头命名
- 自定义组件样式要和组件写在一起，微信里面的打包是不会用公用的样式的，所以写在公用外层的样式会失效
- Button组件是要，会默认加上了边框，可以使用:afte{content:'',border:none}覆盖
- Image标签是写了默认宽度的，所以需要根据实际情况覆盖掉
- 因为支付宝没有地址组件，所以建议统一自定义一个地址组件
- 建议使用rudux不然在百度小程序子组件的隐藏和显示操作频繁会出bug,暂时不知道原因，用redux控制就可以解决这个问题亲测。
- Picker组件必须用一个View包起来，不然当你的初始值是空的时候你永远点击不到了，因为他自身没有高度，无法点击触发（但是如果你的初始化有值的话可以忽略）
- Label只能对input有效果，对picker是没有作用的和小程序不同这个地方
- 授权登陆组件微信百度可以用，其它平台需要另外开发.(每个平台都有蛮多不一样，后期估计统一可能性不大)
- 分享每个平台也不一样，小程序需要在每个页面绑定onShareAppMessage,建议写个公用的
- 支付组件只有微信可以用，其它平台需要自行开发
最后再说点什么吧
开发这个三个平台亲测不会有什么大的问题，为了不重复造轮子还是可以使用的。
其它一些功能，等待去摸索了，其它配置我没改，都是用的默认
