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

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/tel13259437538/article/details/81950904

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 页面内的 jsajax 请求也必须是 https 的。
注:两个条件缺一不可。

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

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

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

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

注:

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

解决方法

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

结束语

Tip:

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

猜你喜欢

转载自blog.csdn.net/tel13259437538/article/details/81950904