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
请求阻塞的报错信息,在调试模式下就会原形毕露了。