uni-app web-View加载H5页面无法显示

uni-app web-View加载H5页面无法显示

开发环境 版本号 项目创建方式
Mac 11,4 HBuilderX 
产品分类：uniapp/App

PC开发环境操作系统：Mac

PC开发环境操作系统版本号：11，4

HBuilderX类型：正式

HBuilderX版本号：3.2.3

手机系统：Android

手机系统版本号：Android 10

手机厂商：OPPO

手机机型：oppoReno

页面类型：vue

打包方式：云端

示例代码：

let url = 'https://zxpsit.cpic.com.cn/vipclaim/pages/reportCase/reportInfo.html'
uni.navigateTo({
url:"../webView/web-view?isBlack=1"
})
uni.$emit("GoStaticURL", {url: url});

操作步骤：

就是打不开

预期结果：

能正常打开，这个链接在浏览器可以打开，在苹果手机的uniapp项目也可以打开，只有安卓打不开

实际结果：

在安卓的webView打不开，在苹果可以打开

bug描述：

https://zxpsit.cpic.com.cn/vipclaim/pages/reportCase/reportInfo.html  web-View加载这个链接加不出来，
报错：error  请求的页面无法打开：https://zxpsit.cpic.com.cn/vipclaim/pages/reportCase/reportInfo.html at file:///android_asset/data/dcloud_error.html:41

更多关于uni-app web-View加载H5页面无法显示的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

Chrome浏览器也无法打开 zxpsit.cpic.com.cn 的响应时间过长。

更多关于uni-app web-View加载H5页面无法显示的实战教程也可以访问 https://www.itying.com/category-93-b0.html


https://zxpsit.cpic.com.cn/vipclaim/pages/reportCase/reportInfo.html?data={"endDate"%3A"20210915"%2C"sign"%3A"2APO9uiTtpQOgbCXbo8GvPUQQvESlDnUg316yzi7zEqzGwboFAFu%2FmFPcn%2Ffe%2F4h"%2C"customerId"%3A"207091314741298"%2C"policyNo"%3A""%2C"telephone"%3A"sHmPOEdD5H4l1toFDjUQ0Q%3D%3D"%2C"dataSource"%3A"KG"}

这个就是在谷歌浏览器打开的

根据你提供的信息，这是一个典型的Android平台WebView加载特定H5页面失败的问题。问题核心在于Android WebView的安全策略限制。

主要原因分析：

  1. 混合内容（Mixed Content）问题：你的H5页面（https://zxpsit.cpic.com.cn）可能加载了HTTP资源（如图片、脚本、样式表），而Android WebView默认禁止在HTTPS页面中加载HTTP内容。iOS的WebView对此限制较宽松。

  2. TLS/SSL证书问题：虽然该链接在浏览器能打开，但WebView的证书验证可能更严格。检查该域名是否使用了不被Android系统信任的证书（如自签名证书、过期的SSL证书等）。

  3. WebView配置差异：uni-app在Android和iOS平台使用的WebView内核不同，配置也存在差异。

解决方案：

方案一：修改Android WebView配置（推荐） 在manifest.json中配置Android WebView允许混合内容：

{
  "app-plus": {
    "android": {
      "webview": {
        "mixedContentMode": "compatibility"
      }
    }
  }
}

修改后需重新打包。

方案二：检查并修复H5页面 让H5开发人员确保页面所有资源都使用HTTPS协议，并检查SSL证书的有效性。

方案三：使用条件编译处理平台差异

// #ifdef APP-PLUS
let webview = this.$scope.$getAppWebview();
// #ifdef APP-PLUS && APP-ANDROID
webview.setStyle({
  webview: {
    mixedContentMode: 'always'
  }
});
// #endif
// #endif
回到顶部