微信公众号网页开发的坑

最近做了一个微信公众号的网页开发，遇到了不少的坑，终于理解了什么叫做移动端的IE浏览器，说多了都是泪，先记录一下遇到的问题:

阻止video元素默认的全屏播放

• 问题：video标签默认是全屏播放的，从全屏退出后，如果滚动页面，video元素会变成fixed定位，并且始终悬浮在其他元素的上方，遮挡住下方的元素，很影响视觉的有木有。
• 解决办法： 一开始用的从mdn看到的 playsinline="true"属性，发现并没有作用，不应该啊，后来经过一系列的搜索才发现还有两个类似的属性，加起来就是 playsinline="true" x5-playsinline="true" webkit-playsinline="true"。微信浏览器使用的x5内核，所以有一个x5-playsinline的属性专门处理这种情况。

video元素悬浮在遮罩层的上方

• 问题：某些情况下，video元素表现的很正常，但是遮罩层出现的时候会发现video元素把遮罩层给遮住了，导致遮罩层未能实现遮罩的功能，这就很尴尬了。
• 解决办法： 即使设置遮罩层的 z-index 无限大，仍然无法解决。就只能在遮罩层出现的时候，隐藏video元素了。隐藏video元素的时候，最好使用v-show指令，而不是v-if指令，否则关闭遮罩层后视频的观看进度会重置。

遮罩层的二维码图片无法识别（IOS）

• 问题：该项目里使用了遮罩层来显示客服二维码，Android手机表现良好，但是IOS长按却没有出现识别二维码的选项。
• 解决办法： 将遮罩层的定位方式从 fixed 变成 absolute。变成 absolute 定位方式后，页面又变成可滑动的了，所以遮罩层打开的时候设置 body 的高度为一个屏幕的高度，遮罩层关闭的时候取消该样式。

iframe内部的页面无法进行微信签名

• 问题：该项目里被嵌套的页面有一个是需要支付的，支付所需的各种参数都正确无误，但就是调不起微信支付的功能。
• 解决办法： 后来想起来，微信可能出于安全问题的考虑，iframe内部的页面无法进行微信签名，所以调不起微信支付的功能也就不足为奇了，毕竟连微信签名都没通过嘛，哈哈。那怎么解决呢？因为这两个页面都是自己写的，所以是可以通过 postMessage 方式来进行父子间的页面通信的。最后的解决方式就是：在支付的前一个页面，通过 postMessage 向主页面发送一个跳转的消息，由主页面来进行跳转（跨域的时候子页面是无法控制主页面的地址跳转的，所以这里需要使用 postMessage）。

iframe内部的应用宝下载一直处于转圈方式

• 问题：该项目里被嵌套的页面有一个是跳转到应用宝下载应用的，但是嵌套到iframe内部后发现下载按钮一直在转圈，下载什么的就别想了。
• 解决办法： 一开始还以为是应用宝出问题了，后来经过排查发现可能又是iframe的问题，所以采用了类似上面的办法，使用 postMessage 让主页面跳转到应用宝的下载页即可。

结语

至于滚动优化什么的都是老生常谈的问题了，我就不多说了。iframe这东西真不是一般的坑，能不使用就不要使用吧，要不然坑你没商量（我以前几乎没用过iframe，怪不得以前那么顺利呢O(∩_∩)O）。