uni-app 安卓平台 plus.webview.create 创建的webview 返回时出现白屏问题

uni-app 安卓平台 plus.webview.create 创建的webview 返回时出现白屏问题

开发环境 版本号 项目创建方式
Mac 11.4 CLI

产品分类：uniapp/App

PC开发环境操作系统：Mac

手机系统：Android

手机系统版本号：Android 10

手机厂商：OPPO

手机机型：R17

页面类型：vue

打包方式：离线

项目创建方式：CLI

CLI版本号：3122

示例代码：

{
  "path": "pages/webview/main",
  "style": {
    "navigationBarTitleText": "页面加载中",
    "app-plus": {
      "titleNView": false
    }
  }
}

this.currentWebview = this.$scope.$getAppWebview()

this.wv = plus.webview.create(this.url, 'wv', {
  statusbar: { background: '#FFFFFF' },
  backButtonAutoControl: 'hide',
  cachemode: 'noCache',
  titleNView: {
    type: 'default',
    backgroundColor: '#FFFFFF',
    bounce: 'vertical',
    titleText: '页面标题',
    titleColor: '#333333',
    autoBackButton: true
  }
})
this.wv.show()
this.currentWebview.append(this.wv)

更多关于uni-app 安卓平台 plus.webview.create 创建的webview 返回时出现白屏问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html

8 回复

去掉 this.wv.show() 再试下

更多关于uni-app 安卓平台 plus.webview.create 创建的webview 返回时出现白屏问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html


刚试过了，没效果。还是会白屏。

回复 appwociao: 完整示例提供下吧我们这边看下是否可以复现问题

@DCloud_Android_ST 见附件

1、backButtonAutoControl 为什么要设置为hide? 白屏就是因他而起具体看文档https://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.WebviewStyles (你可以配置none) 2、为什么不用web-view组件呢 不比通过plus创建webview要香吗

1 试了下解决了，感谢大佬. 2 为了在onload里拿到wv

我用uniapp的web-view组件也有这问题，我的是跳转到微信客服，返回也是要两次才可以

在 Android 平台上，plus.webview.create 创建的 Webview 返回时出现白屏，通常与页面生命周期、缓存策略或硬件加速相关。根据你提供的代码和配置，可以尝试以下解决方案：

  1. 调整缓存策略：你设置的 cachemode: 'noCache' 可能导致页面在返回时重新加载，若加载延迟或失败即出现白屏。可改为 default 或 cacheElseNetwork 以利用缓存快速恢复页面状态。

    cachemode: 'default'

  2. 检查 Webview 生命周期：确保在页面 onHide 或 onUnload 时正确销毁 Webview。在 pages/webview/main 页面的 Vue 组件中，添加以下代码避免内存泄漏：

    onUnload() {
  if (this.wv) {
    this.wv.close();
    this.wv = null;
  }
}

  3. 禁用硬件加速：部分 Android 机型（如 OPPO）的硬件加速可能导致渲染问题。在创建 Webview 时添加 hardwareAccelerated: false 参数：

    this.wv = plus.webview.create(this.url, 'wv', {
  hardwareAccelerated: false,
  // 其他配置...
});

  4. 延迟返回处理：在返回事件中，先隐藏 Webview 再执行关闭，给予页面过渡时间。监听 Webview 的 close 事件：

    this.wv.addEventListener('close', () => {
  this.wv.hide();
});
回到顶部