uni-app 打开webview H5 活动页关闭后app出现卡死情况

uni-app 打开webview H5 活动页关闭后app出现卡死情况

操作步骤:

  • 打开webview H5 活动页 等关闭后app 就会出现卡死的情况

预期结果:

  • 关闭web-view 窗口后app正常使用

实际结果:

  • 打开webview H5 活动页 等关闭后app 就会出现卡死的情况

bug描述:

  • uniapp app嵌套web-view 打开网页关闭网页后app 卡死只能重新启动应用

| 信息类别       | 信息内容     |
|----------------|--------------|
| 产品分类       | uniapp/App   |
| PC开发环境操作系统 | Windows      |
| PC开发环境操作系统版本号 | win10        |
| HBuilderX类型  | 正式         |
| HBuilderX版本号 | 3.4.4        |
| 手机系统       | Android      |
| 手机系统版本号  | Android 10   |
| 手机厂商       | OPPO         |
| 手机机型       | r17          |
| 页面类型       | vue          |
| vue版本        | vue2         |
| 打包方式       | 云端         |
| 项目创建方式    | HBuilderX    |
4 回复

请上传一个能重现问题的测试工程


附件是个录制的视频app 打开嵌套的H5网页返回然后就死机

创建一个测试工程。把关键代码复制进去 看看能不能重现

uni-app 中打开 WebView 加载 H5 活动页后,关闭 WebView 时出现卡死的情况,可能是由于以下几个原因导致的。以下是一些可能的解决方案和排查步骤:


1. 检查 WebView 的生命周期

确保在关闭 WebView 时,相关的生命周期方法被正确调用。例如:

  • uni-app 中使用 plus.webview.create 创建 WebView 时,需要确保在关闭时调用 webview.close() 方法。
  • 如果使用了 uni.navigateBack 返回上一页,确保页面栈没有异常。

2. 检查 WebView 的事件监听

如果 WebView 中注册了事件监听(如 loadclose 等),确保在关闭 WebView 时,正确移除这些监听器,避免内存泄漏。

let webview = plus.webview.create('https://example.com');
webview.addEventListener('close', function() {
    // 移除事件监听
    webview.removeEventListener('close', arguments.callee);
});
webview.close(); // 关闭 WebView

3. 检查页面栈冲突

uni-app 的页面栈和 WebView 的生命周期可能存在冲突。例如:

  • 如果 WebView 页面和 uni-app 页面栈同时存在,可能会导致页面卡死。
  • 尝试在关闭 WebView 前,先清理页面栈。
uni.navigateBack({
    delta: 1
});

4. 检查内存泄漏

WebView 占用内存较多,如果频繁打开和关闭 WebView,可能会导致内存泄漏或卡死。可以通过以下方式优化:

  • 避免频繁创建和销毁 WebView,可以复用 WebView
  • 在关闭 WebView 后,手动释放内存。
webview.close();
webview = null; // 释放内存

5. 排查 H5 页面问题

H5 页面本身可能存在性能问题或死循环代码,导致关闭时卡死。可以:

  • 检查 H5 页面的 JavaScript 代码,确保没有死循环或阻塞操作。
  • 在 H5 页面中监听 beforeunload 事件,确保页面关闭时释放资源。
window.addEventListener('beforeunload', function() {
    // 释放资源
});

6. 调试工具

使用 HBuilderX 的调试工具,查看 WebView 的生命周期和内存占用情况,定位问题根源。


7. 尝试其他方式打开 H5 页面

如果问题仍然存在,可以尝试使用 uni-appweb-view 组件来加载 H5 页面,而不是使用 plus.webview

<web-view src="https://example.com"></web-view>
回到顶部
AI 助手
你好,我是IT营的 AI 助手
您可以尝试点击下方的快捷入口开启体验!