Taro开发遇到的坑&总结

时间:2024-04-08 12:35:03

1. 涉及到开发框架

①语言框架:
目前使用到的开发框架主要以Vue为主,Taro开发提供了多种语言和框架,其中就有Vue,既然对Vue较为熟悉,那是否可以使用Vue为开发语言基础进行小程序的开发?可以是可以,但不建议。我亲身体验过,谈谈我的感受。首先,Taro中无论是组件库还是API亦或是UI框架,皆以React为例,虽然UI框架也有针对Vue而开发的Taro UI Vue(链接:http://taro-ui-vue.fontend.com/#/),但还是有一定的缺陷。说白了就是,Taro 是针对React进行设计的,那么React相对于Vue而言势必会成熟很多;其次,当遇到问题时询问度娘,查询到相关Taro的信息原本就很少,若是使用Vue做为开发语言,想必遇到问题时查询到的相关资料会更少,则势必会延长开发时间。
②UI框架:
开发时必定会使用到UI框架 Taro UI,Taro UI文档中字段以及说明是有缺陷的,但它是根据微信小程序官方组件以及API等进行搭建产出的,所以,当使用Taro UI中的组件某些属性未生效时,最好是去看微信小程序官方开发文档。举例:Taro UI 的AtInput 组件中的autoFocus(是否自动聚焦)属性,虽然效果生效,但对比微信小程序开发文档中的input组件发现,其实该属性微信小程序已经准备作废了,它建议使用focus属性;还有,AtInput的confirmType(设置键盘右下角按钮的文字)属性,Taro UI文档中只说明了类型string,以及默认值为”完成“,若将该属性值设置为”设置“,无论的IOS亦或是Android都是没有效果的,查看微信小程序开发文档input组件发现,该属性是提供几个可选值的,若想要设置按钮的文字,”完成“=》”done“,”搜索“=》”search”…故而,建议在开发时Taro UI和微信小程序官方开发文档同时查看较好,避免在遇到问题时找不出原因。

2.涉及到开发框架

小程序中,不能由小程序自身自动触发登录指令,只能给予用户一个触发登录弹框或其他登录页面的功能,若由小程序自身触发登录逻辑,审核时小程序会将其操作当做是强制用户登录而不给予审核通过。且需要提供暂不登录入口,若该小程序是针对指定人群使用,例如公司内部人员,某个业务的人群等,可在提交审核时进行备注,有利于审核的通过。

3.涉及到切换账户

若可以进行账户的切换,页面中就需要显示用户信息并给予切换账户的触发点。页面中不显示用户信息以及不支持切换账户的操作不太合理,且用户体验也不太好。

4.涉及到视频功能

无论是小程序亦或是H5,视频功能大多都是,视频原本存在什么功能变只能使用什么功能,若要支持倍速,切换清晰度等功能,只能是开发自行开发,但这会延长开发周期,且可能兼容性,体验感不好。若是切换清晰度,一般的做法是后端上传不同清晰度的视频,前端切换时替换视频URL即可,但前端无法在视频控制栏中添加切换清晰度的按钮,故而该项也不好实现。

①关于API、属性调用、获取
视频功能的使用,Taro提供相关的API:Taro.createVideoContext,若要获取/设置属性,或是调用相关的方法,请使用此写法,否则调用相关方法或获取设置属性无效。但此种写法只能获取设置属性,不能调用相关方法,至于如果成功调用方法的写法方式目前还没有找到。
失效写法:
Taro开发遇到的坑&总结
建议写法:
Taro开发遇到的坑&总结
②关于在视频上添加元素
示例:
Taro开发遇到的坑&总结
一般而言,圈红处大多使用absolute进行定位,但会发现,目前在华为畅享9S上,该元素无论z-index设置多大均未显示显示,这是由于该元素使用的是View标签。解决方式:使用CoverView,且z-index设为最大值(类似于9999)即可。

5.涉及到小程序路由

小程序中使用navigateTo进行页面的跳转时需注意页面栈最多十层,一旦超过十层就会报错。若产品需求中提及到返回到上一页时,需告知该情况。建议使用reLaunch、redirectTo。

6.涉及到发送请求

若同时向一个接口发送多次请求会发现,虽然调用了多次,但实际发送的只有一次,返回的数据只有最开始调用的那一次即第一次,网上查询过这个问题,给出的解决方案是加入无用的不同的请求参数以示区分。但,在同时调用该接口时,传的参数本身就是不同的,然而没什么用。判断是同步请求导致的,最终,使用async、await进行异步请求解决。
问题:
Taro开发遇到的坑&总结
Taro开发遇到的坑&总结
Taro开发遇到的坑&总结
解决方案:
Taro开发遇到的坑&总结
Taro开发遇到的坑&总结
Taro开发遇到的坑&总结

7.涉及到接入网易易盾(行为图形验证码)

行为图形验证码目前只支持微信小程序、百度小程序,若是想要在Taro中接入之后再进行编译成小程序,只能按照微信小程序接入方式进行接入,但若是按照微信小程序方式接入,即使用微信小程序第三方插件(组件),Taro便只能编译为微信小程序,故而,当业务需要接入网易易盾时需要注明这一点。

8.、涉及到兼容性

以上有提到在视频(Video)上添加显示额外元素使用View组件显示无效并使用CoverView的问题,其实该问题是兼容性的问题,使用View在IOS显示正常,但在安卓上,有些正常,有些不正常,这不仅仅和系统有关,也和微信版本有关。即使是在同个系统同个微信版本中,有些机型需要将微信升级到最新版本才会显示正常,有些组件API使用调用无效也是同理。

9.涉及到静态文件

有时我们上传代码时会提示整个文件包过大,大多时候都是静态文件太大导致整个包超过了小程序最大包的容量2M,故而我们要对静态文件进行处理。若是图片可以使用tiny图片压缩工具进行压缩,若是视频、音频等文件,请使用外链即链接的形式进行引入使用。

10.涉及到编译&调试

编译小程序一般都是普通编译,使用普通编译,每一次编译都会从首页开始,当开发修改的页面不是首页时,每修改保存一次后,都需要从首页开始一步步点击跳转到调试页,这会消耗开发时间,开发一次次反复的点击跳转也会烦躁。解决方式,在project.config.json文件中添加相关代码,如下图
Taro开发遇到的坑&总结
list中可以随意添加自己想调试的页面路径,若该页面需要传参,则在query字段中填写。当我们调试到该页面,如下图:
Taro开发遇到的坑&总结
Taro开发遇到的坑&总结
填写完毕后保存,就会发现编译栏中出现该页。调试时,调试栏项不用选择普通编译,直接选择该页面即可,如图10-4,如此就可以直接跳转到该页面,不需要一步步点击进行跳转后进入,而传的参数便是.json文件中填写的参数。此为:自定义编译。
Taro开发遇到的坑&总结

11.涉及到测试&审核

开发人员开发到达到可以测试但未到提测时间时,可先将代码提到小程序后台进行审核,若审核不通过可以早些发现不通过的理由,若与产品本身设计有关,可及时告知产品并进行修改,若是自身代码问题,则可及时发现并进行修改,避免提测进行审核时才发现问题,浪费了时间。产品也应在测试之前边将相关测试人员添加到小程序后台项目成员中。

相关技术文档帮助:
1、音频:https://segmentfault.com/q/1010000023527238
2、视频:https://taro-docs.jd.com/taro/docs/components/media/video