Taro多端小程序开发笔记

最近使用taro开发了一款多端小程序，项目主要是面向B端企业的一款商旅产品，先以钉钉小程序、H5为准，后面会陆续适配到各个平台，以下是我在项目中遇到的一些问题，记录下来，希望能帮助到大家。

问题：H5平台适用下拉刷新时，页面里如果有fixed定位的元素，在元素达不到页面高度时，会出现错位。

分析：小程序平台对自己的组件有优化，而浏览器是虚怀若谷的。

解决方案：给当面页面设置和屏幕一样的最小高度。

问题：各个平台特性的API都比较相似，可以很好的适配，但是H5是完全不支持的，如果使用会报错。

分析：小程序是平台，H5是浏览器

解决方案：具有平台特性的API使用时，增加平台判断，相关API：process.env.TARO_ENV。

问题：小程序（例如钉钉）使用redux状态管理时，无法存储太大的数据，目前已知全国城市列表接口，3000多条数据会报错

分析：因为数据太大，小程序会认为影响预期结果，所以抛出错误

解决方案：不需要共享的数据，避免使用redux

问题：小程序在处"2021-12-30"格式日期转字时间戳的时候，开发预览环境都正常，但是IOS设备会展示为NaN

分析：IOS设备不支持带 “-” 的日期格式

解决方案：将2021-12-30日期转为2021/12/30，代码：replace(/-/g, '/'))

问题：钉钉小程序在执行request请求时，如果data数据格式为number时，会抛出参数错误异常，并停止发送请求

分析：H5没有这个问题，是钉钉请求SDK的特性，当传递的参数格式不为{}时，就认定你的参数错误

解决方案：data参数格式要写为{}，如果只是基本数据类型的参数，就写在路径里，不要当做data传递。

问题：钉钉小程序的taro复选框组件莫名出现了两条边框，但是找不到样式在哪，盘查后发现是该元素设置了伪元素before、after

分析：该元素设置了伪元素样式，钉钉小程序的开发者工具不支持伪元素的调试

解决方案：先避免使用伪元素的写法，等平台都兼容了之后在使用。

问题：在H5使用taro-ui的range范围选择器组件时，如果有两个相邻的页面都有用到，会在切换到第二个页面时组件失效，刷新才踩正常

分析：因为组员在使用这个组件时，使用类名设置dispaly:none控制的，上个页面的dom元素依然在body里，而这个组件在H5是用类名获取的宽度的，结果第一个类名没有宽度，会导致宽度为0，从而定位失效

解决方案：是这个组件库也确实有问题，在H5平台没兼容，最后我把这个组件拿过来自己修复了一下bug解决的，然后通过jsx三元运算符控制是否渲染。