微信小程序web-view组件嵌入h5页面导致显示不正常的问题

Write By Monkeyfly

以下内容均为原创，如需转载请注明出处。

前提

• 已知存在一个微信小程序，该小程序的某个页面通过web-view组件嵌套了我们微信公众号的一个h5下单页面。
• 在小程序内嵌套的这个h5下单页面中，进行下单操作后会跳转至下单成功页面。
• 说明：下单成功后，页面会显示用js计算的取件时间、图片广告位、下单成功列表以及再下一单按钮。
• 然后，问题就来了：下单成功后，安卓手机可以正常显示下单成功页面，且功能正常；而苹果手机直接显示了一张空白页面，下单成功列表并没有被渲染出来，除了样式之外不显示任何数据。
• 由于对小程序的开发并不是很熟悉，所以一开始就走错了路，将问题的重心全部放在了“安卓和苹果手机系统的差异上”，导致花费了很长时间都没有任何结果。
• 因为要尽快定位问题所在，我们这边又没有小程序的开发环境，所以只能在h5页面打断点进行调试，调试的最终结果是：在跳转至下单成功页面时，苹果手机根本就alert()不出来任何东西，而安卓手机可以alert()出来。虽然现象很奇怪，但还是不清楚原因是什么。
• 百度了许久，最终也就只找到了这一个有用的信息：微信小程序web-view组件嵌入h5页面内的请求是否必须都是https - CSDN博客

问题分析

对 web-view 组件不了解的小伙伴们，直接查看官方文档介绍即可。入口地址：web-view · 小程序

介绍：web-view 组件是一个可以用来承载网页的容器，会自动铺满整个小程序页面。

官方示例代码如下：

用法特别简单：

<!-- wxml -->
<!-- 指向微信公众平台首页的 web-view -->
<web-view src="https://mp.weixin.qq.com/"></web-view>

查资料得知：
1. 首先，web-view 组件的 src属性 指向的网页链接必须是 https 开头的。
2. 其次，h5 页面内的 js 和 ajax 请求也必须是 https 的。
注：两个条件缺一不可。

问题：微信小程序提供的 web-view 组件在嵌入 h5 页面时， h5 页面内的请求是否必须都是 https 的呢？
回答：经过各种努力，最终得到的结果是：web-view 组件嵌套的 h5 页面内的所有请求，都必须都是 https 开头的，否则就会出错。

后来，让开发小程序的人员特地赶过来和我们一起联调，尽快找出问题的根源。

在微信开发者工具上经过多次调试得出的结论：

• 如果 ajax 请求仍然使用 http 形式开头的，那么该请求就会被小程序阻塞（即blocked），无法发出请求。
• 所以，还是乖乖按照小程序的硬性规定，使用 https 形式的接口进行请求吧。毕竟微信也是为了统一开发以及安全方面考虑的。

注：

• http 请求被阻塞，页面自然显示不正常（即下单成功列表无法显示）。
• 广告位的实现方式是：页面使用 <script>标签 引入了 http 开头的 静态js配置文件。这就导致广告位的 js 配置文件无法引入。因此，自然就会被阻塞，广告也无法获取。

解决方法

将页面中凡是涉及到与 http 有关的东西（无论是 ajax请求 还是跳转链接，亦或是 src 和 url 属性的指向路径），必须全部替换为https。否则，每遇到一个 http ，小程序就会 阻塞(blocked) 一个 http。

结束语

Tip：

• 在微信开发者工具上的模拟器中，可以在 <web-view/> 组件内嵌套的 h5 页面上通过 “右键鼠标 - 调试”，打开 <web-view/> 组件所嵌入的 h5 页面的调试功能，这样就能直观的在控制台内看到具体的报错信息和位置，方便定位问题。
• 上面提到的 http请求阻塞的报错信息，在调试模式下就会原形毕露了。