一. 多端踩过的那些技术坑
| 名称 | 问题描述 | 解决方案 | 备注 |
|---|---|---|---|
| 不支持自定义字体大小 | H5不支持字体换行 | ||
| taro 弹窗组件问题 | h5上层级需要手动处理 | 使用portral改写弹窗 | |
| taro slider滑块组件问题 | 1、 兼容性不好，H5下面，部分浏览器无法滑动，左侧滑块滑动之后会退出页面 2、取不到最新的值，滑动之后发现取到的还是滑动之前的值 | ||
| taro 100vh兼容问题 | Chrome和Safari,QQ不太兼容 动态设置高度 | ||
| fixed定位问题 | fixed定位本身问题 | 最好别用fixed定位，通过布局排版实现元素位置 | |
| taro下拉刷新问题 在H5中不起作用 | 需自定义下拉刷新 | ||
| 多行文本省略号 | 多行文本省略号写在css中不起作用 | 写在style中，在style中写属性可实现 | |
| 匿名函数问题 | 小程序中能调用方法，H5中不行 | bind（this），或者函数使用 =(data)=> 方式 | |
| refs嵌套层级不一样 | web多了一个wrappedInstance | 父组件调用子组件的方法时，数据结构问题 web多了一层wrappedInstance 根据小程序或者web做判断 | |
| 多个根路由兼容 | h5.router.basename不能动态定义 | 在html指定，打包时替换为指定变量 | |
| 弹框层级不一样 | 小程序自动提升层级，web层级没有提升到最外面，有的时候弹窗会被其他z-index定位元素的下面 | 使用Portral重构，将弹窗 层级放到最外层 | |
| 搜索框通过键盘搜索 | taro原始组件Form上缺少action参数接收 | h5模式下继承原组件中转 | |
| 首页banner有时不能轮播 | 在轮播列表数据没有下载下来的时候去渲染dom , 数据下载下来后不会循环播放，只播放一轮 | 在数据没请求到值之前不去渲染dom，可以先写个占位框子 | 1.3.37版本有问题，2.0.4正常，2.1.5以上有问题 |
| 百度小程序页面初始化props为空 | |||
| hooks+function | 性能问题 | 推荐使用 hooks+function 写法进行页面编码，对性能有提升 | 目前hooks未见明显提升，但之后有提升空间 |
| 渲染问题 | 渲染数据会有漏数据、不渲染现象 | 拆出来单纯传值过去 | |
| 图片宽度无法自适应 | css width: auto无效 | 使用mode属性及js计算，有的时候mode属性也不能满足，要去实时计算 | |
| 分包目录 | 分包问题，小程序包大小限制 | 开发初期做好分包目录，不要等到后期再改 | |
| 同页面数据串掉问题 | 当前项目页面栈存在两个及以上相同页面上的时候，返回的时候会出现数据以及样式问题 | 在明显的会有相同页面栈存在是，这种页面跳转的时候要清掉当前数据 | 使用redux有误 |
二. 多端专项复盘总结
- 根据多端的经验，对于新技术的尝试在前期的规划和时间预估上需要留至少2-3天的缓冲时间，来解决突发技术疑难问题，兼容问题
- 新增加的功能考虑到多平台的兼容，按目前经验基本需要2天的兼容调整时间
网友评论