2023年7月2日发(作者：)

微信⼩程序web-view组件嵌⼊h5页⾯导致显⽰不正常的问题Write By Monkeyfly以下内容均为原创，如需转载请注明出处。前提已知存在⼀个微信⼩程序，该⼩程序的某个页⾯通过web-view组件嵌套了我们微信公众号的⼀个h5下单页⾯。在⼩程序内嵌套的这个h5下单页⾯中，进⾏下单操作后会跳转⾄下单成功页⾯。说明：下单成功后，页⾯会显⽰⽤js计算的取件时间、图⽚⼴告位、下单成功列表以及再下⼀单按钮。然后，问题就来了：下单成功后，安卓⼿机可以正常显⽰下单成功页⾯，且功能正常；⽽苹果⼿机直接显⽰了⼀张空⽩页⾯，下单成功列表并没有被渲染出来，除了样式之外不显⽰任何数据。由于对⼩程序的开发并不是很熟悉，所以⼀开始就⾛错了路，将问题的重⼼全部放在了“安卓和苹果⼿机系统的差异上”，导致花费了很长时间都没有任何结果。因为要尽快定位问题所在，我们这边⼜没有⼩程序的开发环境，所以只能在h5页⾯打断点进⾏调试，调试的最终结果是：在跳转⾄下单成功页⾯时，苹果⼿机根本就alert()不出来任何东西，⽽安卓⼿机可以alert()出来。虽然现象很奇怪，但还是不清楚原因是什么。百度了许久，最终也就只找到了这⼀个有⽤的信息：问题分析对

web-view 组件不了解的⼩伙伴们，直接查看官⽅⽂档介绍即可。⼊⼝地址：介绍：web-view 组件是⼀个可以⽤来承载⽹页的容器，会⾃动铺满整个⼩程序页⾯。官⽅⽰例代码如下：12345⽤法特别简单：查资料得知： 1. ⾸先，web-view 组件的 src属性 指向的⽹页链接必须是 https 开头的。 2. 其次，h5 页⾯内的 js 和 ajax 请求也必须是https 的。 注：两个条件缺⼀不可。问题：微信⼩程序提供的 web-view 组件在嵌⼊ h5 页⾯时， h5 页⾯内的请求是否必须都是 https 的呢？ 回答：经过各种努⼒，最终得到的结果是：web-view 组件嵌套的 h5 页⾯内的所有请求，都必须都是 https 开头的，否则就会出错。后来，让开发⼩程序的⼈员特地赶过来和我们⼀起联调，尽快找出问题的根源。在微信开发者⼯具上经过多次调试得出的结论：如果 ajax 请求仍然使⽤ http 形式开头的，那么该请求就会被⼩程序阻塞（即blocked），⽆法发出请求。所以，还是乖乖按照⼩程序的硬性规定，使⽤ https 形式的接⼝进⾏请求吧。毕竟微信也是为了统⼀开发以及安全⽅⾯考虑的。注：http 请求被阻塞，页⾯⾃然显⽰不正常（即下单成功列表⽆法显⽰）。⼴告位的实现⽅式是：页⾯使⽤