Taro 在小程序和H5的踩坑记录

57 阅读 0 评论 38 点赞

我是靠谱客的博主默默玉米，最近开发中收集的这篇文章主要介绍Taro 在小程序和H5的踩坑记录，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

Taro 踩坑记录

1、@taro/cli版本必须跟package.json的版本一致，否则使用Taro.xxx会报「 is not a function 」的错误

例如：「_tarojs_taro__WEBPACK_IMPORTED_MODULE_2___default.a.navigateTo is not a function」

解决方案1：重新按照官网文档初始化项目

解决方案2：package.json 文件引入的 Taro 的版本号改成与 Taro cli 工具的版本号保持一致（当前是3.0.18）；

2、taro-ui form 表单的submit事件

https://github.com/NervJS/taro-ui/issues/1189

3、taro-ui 使用 modal 组件的时候自定义内容和简化用法只能二选其一

使用AtContent来自定义内容的话，其他的title等参数也必须使用自定义的

4、taro-ui input输入框输入第一个字后或输入框内容删除完全部内容后，键盘隐藏了（不应该隐藏）；

键盘隐藏后，再进行编辑，光标处于第一个字符之前了（应该是在最后一个字符之后）==> 解决方案：添加cusor 为文本长度

快速输入内容会出现光标乱跳文字错乱的问题（未解决 --> 感觉是setState的原因）

5、app.tsx 在render中添加渲染组件不起作用

https://taro-docs.jd.com/taro/docs/react

在小程序端添加外部div 无效，在h5有效

6、taro ui InputNumber 组件在小程序的应用，设置了最小值后，无法删除最小值，只能输入以最小值为起始的值

贴上自己的博客链接～

https://blog.csdn.net/qq_39410421/article/details/117283092

7、在小程序中使用taro.createSelectorQuery 返回null，要跟 Taro.nextTick 搭配使用

8、taro ui AtImagePicker 组件sourceType属性在h5不起作用

https://github.com/NervJS/taro/issues/6347

9、Taro.getStorageSync 和 localStorage.setItem不能搭配使用，Taro.getStorageSync获取不到 localStorage.setItem的值

eg:

localStorage.setItem("test", "测试");

setTimeout(() => {

console.log(Taro.getStorageSync("test"), "getStorageSync");

}, 1000);

10、小程序刷新web-view页面会增加history（这个应该是小程序的坑）

https://www.php.cn/xiaochengxu-407648.html

https://developers.weixin.qq.com/community/develop/doc/000666cbbb4d003b5348e5e755e400

11、Taro.previewImage在h5中无法缩放图片
可结合react-photo-view库使用
https://gitee.com/MinJieLiu/react-photo-view/tree/master

贴上自己的博客地址～

https://blog.csdn.net/qq_39410421/article/details/117387844

12、enablePullDownRefresh 在h5 上滑后下拉就触发了，且下拉之后无法上滑（未找到解决方案，先去掉了下拉刷新，自己根据scroll写下拉刷新的话要注意防抖）

13、taro-ui的textarea组件在小程序应用中存在的问题：1、设置了maxLength为200，复制粘贴一个超过maxLength的文本，文件截断为200字，但count属性显示的文本长度不正确，且部分安卓手机可以自动删除前面的文本继续输入，在ios的话在输入过程中会截取拼音字母（最终解决方案为不限制maxLength，超出红色提示用户超出字数，ui参考微信反馈页面）2、在ios上会存在padding样式，无法设置，目前解决方案是判断手机系统，在ios上设置margin-top:12px，在iPhone12/xr没问题，其他机型未知（小屏幕机型疑似没问题）