2020-06-18 前端经验总结

2020-06-18 本文已影响0人林哥学前端

1.微信网页录音授权，每次先判断有没有授权，没有授权就先执行wx.startRecord，成功回调后存一个状态值存到localStorage，然后立刻执行wx.stopRecord，用户再次点击录音按钮，正常流程执行录音方法

2.海报优化海报生成后缓存起来，再次生成的时候直接从缓存里取出来

3.swiper, iframe使用gif图导致部分手机出现闪屏问题
解决：使用 transform: translateZ(); 添加至其父级元素上

4.ios 自带滑动回弹特性
可以监听触摸事件，然后preventDefault，阻止ios回弹

5.html2canvas 生成图片，使用背景图，可能导致生成图片底部出现横线，生成出来的图片模糊，建议使用img

6.html2canvas插件:
ie不支持promise;使用useCORS属性（为ture）时会直接走catch;不使用useCORS
属性时,跨域图片无法在生成的canvas中显示
解决：引入插件解决promise兼容问题；不使用useCORS属性将图片转为base64

7.元素使用transform：translate(-50%,-50%)，当元素的宽高为奇数时，元素内部的文字、
图片和其他元素会显示模糊。
解决：当元素使用transform：translate(-50%,-50%)时，此元素的宽高须是偶数

8.animate动画事件

9.在整屏的手机页面中，使用absolute top 0 left 0 right 0 bottom 0 来实现，使用100vh会收手机下部导航栏影响