uni-app 运行鸿蒙系统时 app 通过 webview 跳转 H5 页面闪退

发布于 1周前 作者 sinazl 来自 Uni-App

uni-app 运行鸿蒙系统时 app 通过 webview 跳转 H5 页面闪退

信息类别 详情
产品分类 uniapp/App
PC开发环境 Windows
PC系统版本 Windows 10 专业版
开发工具 HBuilderX
工具版本 4.36 Alpha
手机系统 HarmonyOS NEXT
手机版本 HarmonyOS NEXT Developer Beta1
手机厂商 华为
手机型号 mate60
页面类型 vue
vue版本 vue3
打包方式 云端
项目创建方式 HBuilderX

示例代码：

<template>
<view class="page">
<web-view :src="data.url"  :update-title="false" @message="loadWebData"></web-view>
</view>
</template>  
<script>
export default {
name: '',
data() {
return {
data: {
url: ''
},
}
},
},
onShow() {
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
this.data.url = this.data.options.url
},
methods: {
loadWebData(res) {
//console.log(128,res)
if (this.isAlarm && res.detail && res.detail.data[0] == 3) {
this.$store.state.globalData.alarmHandleMap.set(this.guid, this.guid)
}
},
},
}
</script>  
<style>
</style>

操作步骤：

  • 修改url中的协议

预期结果：

  • 使用https 协议时正常加载页面

实际结果：

  • 使用https 协议后闪退

bug描述：

app在通过webview跳转H5 webview中src填入的是 http 协议的能正常加载页面 webview中src填入的是 https 协议的加载页面后1秒左右闪退 DevEco Studio 提示如图错误

示例图片


更多关于uni-app 运行鸿蒙系统时 app 通过 webview 跳转 H5 页面闪退的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

Harmonyos Next教程
2 回复

升级 HX 4.41 ，然后删除 unpackage 文件夹后重新运行试试看

更多关于uni-app 运行鸿蒙系统时 app 通过 webview 跳转 H5 页面闪退的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在处理uni-app在鸿蒙系统上通过webview跳转H5页面导致的闪退问题时，首先需要确保几个关键点的正确配置和实现。以下是一些可能导致闪退的常见原因及相应的代码示例，用于检查和修复问题。

1. 确保WebView组件正确初始化

在uni-app中，使用<web-view>组件加载H5页面。确保该组件在页面中正确初始化，并且传递的URL是有效的。

<template>
  <view>
    <web-view :src="h5Url"></web-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      h5Url: 'https://example.com' // 确保URL有效且可访问
    };
  }
};
</script>

2. 处理页面生命周期事件

确保在页面的onUnload或onHide等生命周期事件中，没有错误地销毁或重置WebView组件。鸿蒙系统可能对资源管理更为严格，不当的组件管理可能导致应用崩溃。

onUnload() {
  // 清理资源时确保不会影响到WebView的正常运行
  // 例如，避免在此处调用强制销毁WebView的代码
}

3. 检查内存和资源使用

如果H5页面内容复杂或包含大量资源，确保设备有足够的内存来处理这些请求。鸿蒙系统可能对内存使用有更严格的限制。

4. 捕获并处理异常

在JavaScript代码中添加try-catch块来捕获并处理可能的异常，防止未处理的异常导致应用崩溃。

try {
  // 可能抛出异常的代码，例如加载URL
  this.h5Url = 'https://example.com/some-risky-path';
} catch (error) {
  console.error('Error loading H5 page:', error);
  // 可以设置一个备用URL或显示错误提示
  this.h5Url = 'https://example.com/fallback';
}

5. 更新uni-app和依赖库

确保uni-app框架及其依赖库是最新版本，因为新版本可能修复了旧版本中的已知问题。

6. 鸿蒙系统特定配置

检查是否有针对鸿蒙系统的特定配置或限制，可能需要查阅uni-app官方文档或鸿蒙开发者文档以获取更多信息。

通过上述步骤，你应该能够定位并解决uni-app在鸿蒙系统上通过webview跳转H5页面导致的闪退问题。如果问题依旧存在，建议查看应用的日志输出，分析具体的崩溃原因，并考虑向uni-app社区或鸿蒙开发者论坛寻求帮助。

回到顶部