uni-app webview白屏问题

开发环境	版本号	项目创建方式
Mac	12	HBuilderX

产品分类：uniapp/App

PC开发环境操作系统：Mac

PC开发环境操作系统版本号：12

HBuilderX类型：正式

HBuilderX版本号：3.4.12

手机系统：iOS

手机系统版本号：iOS 15

手机厂商：苹果

手机机型：xr

页面类型：vue

vue版本：vue2

打包方式：云端

项目创建方式：HBuilderX

### 示例代码：

```html
<webview src="https://ask.dcloud.net.cn/" [@message](/user/message)="onMessage" update-title />

操作步骤：

后台一段时间

预期结果：

显示网页或者重启app

实际结果：

白屏，有标题显示

bug描述：

整个项目就一个webview，如果app进入后台，过段时间就白屏，但有标题显示。

yibo5220 1楼•14 天前

我通过onshow 延迟3秒监听判断当前页面的渲染高度 uni.createSelectorQuery().in(this).selectViewport();如果白屏的时候，高度会小于uni.getSystemInfoSync().windowHeight，但也不绝对

sinazl 2楼•14 天前

在 uni-app 中使用 webview 组件时，可能会遇到白屏问题。以下是一些常见的原因和解决方法：

1. 检查 URL 是否正确

确保 webview 加载的 URL 是有效的，并且可以通过浏览器正常访问。
如果 URL 是本地文件路径，确保文件路径正确，并且文件已正确打包到项目中。

2. 网络问题

如果 URL 是远程地址，检查网络连接是否正常。
如果是 HTTPS 地址，确保服务器证书有效。

3. 跨域问题

如果加载的页面涉及跨域请求，可能会导致白屏。
解决方法：
- 确保服务器配置了正确的 CORS（跨域资源共享）策略。
- 如果是本地开发，可以使用代理解决跨域问题。

4. 页面加载超时

如果页面加载时间过长，可能会导致白屏。
解决方法：
- 优化页面加载速度。
- 在 webview 中设置超时处理逻辑，例如显示加载提示或重试按钮。

5. Webview 组件配置问题

确保 webview 组件的属性配置正确。例如：
```
<web-view :src="url"></web-view>
```
如果 src 是动态绑定的，确保数据已正确赋值。

6. 平台差异

不同平台（如 H5、小程序、App）对 webview 的支持可能存在差异。
解决方法：
- 检查目标平台的文档，确保使用的功能被支持。
- 使用条件编译处理平台差异。

7. 调试工具

使用浏览器的开发者工具（如 Chrome DevTools）调试 webview 加载的页面，查看是否有错误信息。
在 App 端，可以使用 console.log 或 uni.showModal 输出调试信息。

8. 权限问题

在 App 端，确保已正确配置网络权限（如 INTERNET 权限）。

在 manifest.json 中检查权限配置：

{
  "permission": {
    "android": {
      "uses-permission": [
        "android.permission.INTERNET"
      ]
    }
  }
}

9. 页面内容问题

如果页面内容为空或包含错误代码，可能会导致白屏。
解决方法：
- 检查页面 HTML、CSS 和 JavaScript 代码，确保没有错误。
- 确保页面内容能够正常渲染。

10. uni-app 版本问题

如果使用的是旧版本 uni-app，可能存在已知的 webview 问题。
解决方法：
- 升级到最新版本的 uni-app。

11. 缓存问题

如果页面内容被缓存，可能会导致白屏。
解决方法：
- 清除缓存后重新加载页面。
- 在 URL 中添加随机参数避免缓存，例如：
```
const url = `https://example.com?t=${Date.now()}`;
```