H5制作结论成果存在问题及分析 问题现象：微信自定义分享时，需要更换新的缩略图，但是在更换上新缩略图后，分享微信链接给朋友时，缩略图显示失效。 解决方案： 经过debugger对比新旧两张缩略图的信息发现，当缩略图的大小太小时，无法获取到正常的缩略图地址url。调研了解到微信自定义分享时，缩略图大小需要10K以上，调整图片大小信息即可解决问题。 IOS端-H5开发问题 输入法隐藏页面留白 问题现象：iOS端软键盘失去焦点（隐藏）后，页面不会回弹，页面下方会留下输入法块的白色块。 暴力解决方案：软键盘收起（隐藏）后，滚动一下页面，页面中的留白块块就会消失。所以只要在输入完毕后实现一下‘滚动’的操作就可以解决问题。 问题现象:存在多个input输入框且页面可以滚动时，切换输入框产生回弹闪烁，影响用户体验；同时iOS微信中依旧存在软键盘收起留白问题。 终极解决方案:经过调研了解到微信版本6.7.4以上会出现该问题。首先判断当前的设备以及当前微信版本号；其次当软键盘收起时，设置setTimeout方法，模拟软键盘弹起；最后获取当前滚动高度位置，软键盘收起滚动回当前滚动高度减1的位置即可。 长按二维码无法识别 问题现象：在ios中，部分iPhone机型（大屏幕、高分辨率等）微信中长按二维码无法识别， 解决方案：添加padding、给二维码添加透明的二维码识别区，增加二维码的识别面积；简化二维码周围的信息元素，增加二维码计算识别度。 问题现象：增加二维码识别面积后，iPhone高版本机型可以长按识别，但在使用过程中会突然就复现无法识别问题。 解决方案：经过测试，二维码组件页面识别没有问题，由上一级路由跳转过来二维码组件就会复现无法识别问题；路由跳转方式用的react-router的history.push方式，更换跳转方式为window.location.href = "跳转路由"即可解决。 ios只加载首屏信息 问题现象：扫码进入H5页面（可滚动页面），页面首屏存在图片资源信息，当页面滚动后，页面信息无法加载。 解决方案：汲取网上的开发经验发现，在H5滚动容器的样式里加了一个overflow：hidden，去掉该样式属性就解决问题。 Android端-H5开发问题 video层级问题 问题现象：点击登录弹窗可以正常显示，在点击播放视频后，video层级变成了最高级，再次点击登录弹窗被video遮挡了，无论怎么给登录弹窗z-index都无法正常显示弹窗。 本文来源：https://www.wddqw.com/doc/f6f17f507d21af45b307e87101f69e314332fabf.html