uni-app APP端使用web-view时 web-view中内容卡死后 退出web-view页面 app其他界面也都无法操作

uni-app APP端使用web-view时 web-view中内容卡死后 退出web-view页面 app其他界面也都无法操作

信息类别 详细信息
产品分类 uniapp/App
PC开发环境操作系统 Windows
PC开发环境操作系统版本号 win10 专业版
HBuilderX类型 正式
HBuilderX版本号 3.1.11
手机系统 全部
手机厂商 华为
页面类型 vue
打包方式 云端
项目创建方式 HBuilderX

测试过的手机

华为 Honor 8 iphone6 plus

示例代码：

<template>
<view>
</view>
</template>
<script>
var wv;//计划创建的webview
export default {
onLoad(option) {
let title = option.name;
uni.setNavigationBarTitle({
title: title,
})
// #ifdef APP-PLUS
wv = plus.webview.create("","custom-webview",{
plusrequire:"none", //禁止远程网页使用plus的API，有些使用mui制作的网页可能会监听plus.key，造成关闭页面混乱，可以通过这种方式禁止
'uni-app': 'none', //不加载uni-app渲染层框架，避免样式冲突
top:uni.getSystemInfoSync().statusBarHeight+44, //放置在titleNView下方。如果还想在webview上方加个地址栏的什么的，可以继续降低TOP值
height:uni.getSystemInfoSync().windowHeight
})
var url = uni.getStorageSync("url");
wv.loadURL(url);
var currentWebview = this.$scope.$getAppWebview(); //此对象相当于html5plus里的plus.webview.currentWebview()。在uni-app里vue页面直接使用plus.webview.currentWebview()无效，非v3编译模式使用this.$mp.page.$getAppWebview()
currentWebview.append(wv);//一定要append到当前的页面里！！！才能跟随当前页面一起做动画，一起关闭
setTimeout(function() {
wv.setStyle({height:uni.getSystemInfoSync().windowHeight})
}, 1000); //如果是页面初始化调用时，需要延时一下
// #endif
};
</script>

操作步骤：

暂无

预期结果：

除web-view页面外依旧可以使用，而不是需要退出重新打开

实际结果：

整个app均无法使用，需要重新打开才可以操作

bug描述：

代码示例中是所有第三方页面的加载vue文件内容，当加载某些页面时，由于数据大小原因，可能导致页面卡死，点击无反应，点击返回按钮之后，其他页面均无反应。


更多关于uni-app APP端使用web-view时 web-view中内容卡死后 退出web-view页面 app其他界面也都无法操作的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app APP端使用web-view时 web-view中内容卡死后 退出web-view页面 app其他界面也都无法操作的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个典型的WebView内存泄漏导致的UI线程阻塞问题。在uni-app的APP端，当WebView加载复杂内容或内存占用过高时，可能会阻塞整个应用的UI线程。

问题分析：

  1. WebView卡死后，其渲染进程可能占用了大量系统资源
  2. 原生WebView组件与uni-app运行在同一进程，WebView的崩溃会影响主应用
  3. 即使退出WebView页面，相关的WebView实例可能没有被正确销毁

解决方案：

  1. 添加WebView生命周期管理
onUnload() {
  // #ifdef APP-PLUS
  if(wv){
    wv.close();
    wv = null;
  }
  // #endif
}
  1. 设置WebView内存优化参数
wv = plus.webview.create("","custom-webview",{
  plusrequire:"none",
  'uni-app': 'none',
  top:uni.getSystemInfoSync().statusBarHeight+44,
  height:uni.getSystemInfoSync().windowHeight,
  hardwareAccelerated: true // 开启硬件加速
})
  1. 添加异常处理机制
wv.addEventListener('error', function(e){
  console.log('WebView加载错误:', e);
  wv.close();
});
  1. 使用定时器检测WebView状态
let timeoutTimer = setTimeout(() => {
  if(wv && !wv.isVisible()) {
    wv.close();
    uni.navigateBack();
  }
}, 5000);
回到顶部