Taro开发遇到的坑&总结
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.涉及到开发框架
在小程序开发中,必须确保所有相关的登录操作均需由开发者主动发起。具体而言,在小程序自身无法直接引发 login 操作的情况下,则需通过向用户提供 login 弹窗或其他 login 页面的方式实现其功能。需要注意的是,在审核流程中,若出现由小程序自动发起的 login 操作,则将被视为强制用户完成登录操作而不予通过;因此,在设计相关功能时,请确保系统提供一个暂不具备 login 功能的入口以便开发者使用,并且对于涉及特定用户群体的小程序(如公司内部人员等),可在提交阶段备注相关信息以提高审核成功率
3.涉及到切换账户
若一个网页的功能设计能够实现账户切换功能,则该网页必须包含用户的详细信息以及相应的操作指引;否则将无法满足用户体验的需求。
如果一个网页的功能设计存在缺陷,在缺少用户基本信息的情况下无法完成功能操作,则这种设计难以满足用户的实际需求。
4.涉及到视频功能
不论是小程序还是H5应用,
视频功能通常包含基本操作,
但这些原本具备的功能在某些情况下仅限于实现基础播放,
若要支持倍速播放、调整清晰度等功能,
则必须自行开发相关逻辑,
这将增加开发周期并可能影响兼容性和用户体验。
通常的做法是后端存储多种清晰度的视频文件,
前端只需在播放时替换对应的URL即可实现不同清晰度切换,
但前端无法通过视频控制面板添加切换按钮,
因此这类功能难以轻易实现。
视频功能的使用方面

建议写法:

②关于在视频上添加元素
示例:

通常情况下会采用absolute定位技术来标记重点区域。然而,在实际应用中发现,在华为畅享9S设备中发现一个问题:当对该特定元素设置任意高度的z-index值时仍无法实现可见性展示。经过深入调查发现这一现象的根本原因在于该元素采用了View容器结构。解决方案是采用CoverView组件,并将z-index属性设置至最大值(类似于-1或其他极大值),这种方法非常有效
5.涉及到小程序路由
在小程序应用开发中,在调用navigateTo方法进行网页跳转时需要注意以下事项:如果页面栈深度超过十层,则会触发错误提示。当出现错误提示时,请确保所有相关操作已正确完成。对于产品需求文档中提到需要返回上一层场景的情况,请及时与相关开发人员沟通并采取相应措施以避免触发错误提示。推荐的方法包括使用reLaunch和redirectTo等技术手段来实现安全可靠的跳转操作。
6.涉及到发送请求
在同时向某个接口发起多次请求时会发现:尽管点击次数达到了预期(即调用了多次),但实际上仅有一次提交被成功处理(即仅有一次被成功发送)。查阅相关资料后发现:通常建议在请求中添加唯一标识符以区分不同请求。然而,在这种情况下传递的不同参数并未产生明显效果(即没什么用)。初步判断问题出在同步请求机制上。因此转而采用异步编程模式以解决此问题)。



解决方案:



7.涉及到接入网易易盾(行为图形验证码)
目前仅限于支持微信小程序以及百度小程序作为行为图形验证码的应用场景。若是要在Taro中进行后续接入并编译成小程序,则必须依照微信小程序的接入方式进行操作。即便采用微信小程序第三方插件或组件进行编译,Taro也只能生成相应的小程序类型。因此,在业务需求涉及网易易盾时,则需特别注明这一要求。
8.、涉及到兼容性
以下是对文本的同义改写
9.涉及到静态文件
在上传代码时经常会遇到整个文件包体积过大的提示。很多时候主要是由于静态资源过大而导致整个包体积超过小程序的最大承载能力2M。因此我们需要采取措施来解决静态资源过大的问题。对于图片类资源,则可以直接使用在线图片压缩工具来进行优化。对于视频和音频等多媒体类型的内容,则需要通过外链或链接的方式进行导入。
10.涉及到编译&调试
通常情况下,默认情况下进行小程序的打包操作多采用普通编译策略。在实际应用中发现该方法存在不足之处:每次操作均从初始页面启动;若修改的页面并非首页,则必须经过多次导航操作才能到达调试界面;频繁的操作会带来心理压力。针对上述问题的具体解决方案在于编辑配置文件并加入相应的设置逻辑,请参考下图获取详细说明

list中可以随意添加自己想调试的页面路径,若该页面需要传参,则在query字段中填写。当我们调试到该页面,如下图:


填完并保存后会显示编译栏中的对应页面。在调试阶段,在调试栏中无需选择普通编译选项;可以直接选择目标页面(如图10-4所示),这样可以直接跳转至目标页面(无需逐步点击进入),而传递给系统的参数则来自.json文件中的设置。即实现:自定义编译

11.涉及到测试&审核
开发团队完成部分功能模块后尚未达到全测阶段时, 可先将编码移至小程序后台等待审批. 若一旦代码未被批准, 则可提前了解未被批准的原因. 若有与产品设计相关的问题, 则应立即反馈给产品经理并修复该问题. 若有自身编码错误的问题, 则应立即识别出错误并修复. 无需等到后续测试环节才发现潜在缺陷. 此外, 产品团队也应在测试启动前确保相关测试用例及人员已同步到位.
12、涉及到神策埋点
Taro平台实现神策埋点接入主要通过调用集成 SDK 的功能模块进行操作。具体步骤如下:
① 安装必要的软件开发包(使用 npm 命令)执行安装操作;
② 在 app.js 文件中引入相关模块,并设置必要的初始参数完成连接配置

③初始化:
(1)首先进行登录获取到code

(2)通过(1)获取到的code去获取openid(小程序的用户唯一标识,该openid是神策埋点初始化SDK 时要求使用的)

在生命周期componentDidMount事件(也包含其他生命周期事件)中调用sensorsInit函数后
相关技术文档帮助:
1、音频资源:https://segmentfault.com/q/1010000023527238
2、视频资源:https://taro-docs.jd.com/taro/docs/components/media/video[()]
