- 小程序id导致的点击获取
$refs
异常
现象:taro项目小程序里,页面A点击跳去同个页面A,再返回第一个页面A时,点击获取页面$refs
,取到为空。
原因:一开始觉得是页面组件的卸载有问题,返回时点击获取的
$refs
实际上是第二个页面卸载的页面的$refs
,所以取的不是当前第一个页面的$refs
。经过分析,发现点击按钮上有个id,导致返回时触发的点击实际上第二个页面的点击事件,但是第二个页面已经卸载了,所以取不到。总结:小程序文档里id是整个页面唯一,所以导致点击的时候触发获取对象异常。h5中页面跳转则是通过设置页面display:block/none处理,如果当前页面有同个id,则也会导致获取id对象不对的情况。所以尽量不用id,而用ref,确实要用的话,需要随机生成id值,确保前后页面不存在相同id。(后续可新增生成随机尾号id的工具方法)
注:据同事了解,层级较深也有可能获取不到动态生成的id,这里可以留意下。
- taro里面的组件及页面的css需要用独立的类名包裹起来,不能单独暴露在外面,除非不会影响到其他的公共css,因为taro的css的scope是无效的,所以打包出来的css都是公共的。
.root-css-name{
.your-css{
//...
}
}
- 小程序input框letter-spacing失效
- taro的text标签元素嵌套层级不能过深,最多15层,超出则不能显示
-
在taro的input设置了一个id,解析出来的id是在input外面那层div的,所以涉及到具体input的事件设置需要注意,取id里面input标签。
<input
id="hxwsCode"
v-model="code"
type="number"
>
// js
document.getElementById('hxwsCode').firstChild.blur();
- 用户在input输入框输入调起键盘,输入完未有用户交互的情况下代码控制跳转到第二个页面,会出现键盘未收起直接带到第二个页面的情况,此时可以进行优化处理,在前一个页面主动收起键盘。
// 主动收起键盘
if (this.isInMiniProgram) {
Taro.hideKeyboard()
} else {
document.getElementById('hxwsCode').firstChild.blur();
}
-
taro的dom层级超过15层就会出现样式问题,需要调整层级
-
taro的picker组件,选择mode=date时,如果开始日期start不是当天而是自定义时间,则需要传value值,官方也是写value值必传,不然会报错。当start为当天时间的时候不传value则不报错额。