使用taro遇到的问题及总结

• 小程序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标签。

  
  image.png

<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层就会出现样式问题，需要调整层级

  
  image.png

• taro的picker组件，选择mode=date时，如果开始日期start不是当天而是自定义时间，则需要传value值，官方也是写value值必传，不然会报错。当start为当天时间的时候不传value则不报错额。

  
  image.png