HarmonyOS鸿蒙Next中在应用页面里嵌套了h5页面,前端页面调用应用侧函数根据日志打印调用不到

HarmonyOS鸿蒙Next中在应用页面里嵌套了h5页面,前端页面调用应用侧函数根据日志打印调用不到

场景: 在加载的h5页面里,通过前端页面调用应用侧函数实现在h5页控制退出当前页面或跳转另一个页面等功能。在前端提供的本地环境调试是顺利的,前端页面可以成功调用应用侧函数。但改为正式环境地址后就失效了,根据日志打印是没有走到应用侧函数内的。

准备工作: 开发这个需求的时候参照了下方官方API和Demo,写法逻辑上基本一致了,就差方法名写一模一样了: https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/web-in-page-app-function-invoking https://developer.huawei.com/consumer/cn/forum/topic/0207150474615269010?fid=0101610563345550409

问题: 有没有大佬知道这是什么原因导致的,前端本地环境是生效的,正式环境就行不通了。现在我和前端同事都不知道这种情况如何调试去解决

关键代码: // 声明需要注册的对象 @State jsMethod: JsCallH5Class = new JsCallH5Class(getContext(this)); private registerJavaScriptProxySucceed: boolean = false;

build() { Web({ src: this.url, controller: this.controller, renderMode: RenderMode.ASYNC_RENDER // 设置渲染模式:异步渲染(RenderMode.ASYNC_RENDER),仅由Web组件构成,低功耗; 同步渲染模式(RenderMode.SYNC_RENDER) }) .domStorageAccess(true) // 设置是否开启文档对象模型存储接口(DOM Storage API)权限,默认未开启 .javaScriptAccess(true) //设置是否允许执行JavaScript脚本,默认允许执行。 .databaseAccess(true) //设置是否开启数据库存储API权限,默认不开启。 .mixedMode(MixedMode.All) // 允许HTTP和HTTPS混合内容 .onPageEnd((event) => { // 重新注册 JavaScript 接口 try { this.controller.registerJavaScriptProxy(this.jsMethod, “doScanPop”, [“backToFinish”, “openWeb”], // doScanPop唯一不变 [] // 可选参数, asyncMethodList ); this.registerJavaScriptProxySucceed = true; LogUtil.d(TAG, “registerJavaScriptProxy”); } catch (error) { LogUtil.d(TAG, ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}); } }) .javaScriptProxy({ // 注册 JavaScript 接口 object: this.jsMethod, // 包含原生方法的类实例 name: “doScanPop”, // H5中调用的对象名 唯一不变 methodList: [“backToFinish”, “openWeb”], // 暴露的方法列表 controller: this.controller, }) }

class JsCallH5Class { context: Context

constructor(context: Context) {
    this.context = context;
}

backToFinish(): void {
    LogUtil.d(TAG, 'H5触发原生返回')
    router.back(); // 退出当前页面
}

openWeb(value: string): void {
    LogUtil.d(TAG, 'JsCallJavaNewH5: ' + value);
    router.pushUrl({ url: Constants.NewWebPageToJump });
}

}


更多关于HarmonyOS鸿蒙Next中在应用页面里嵌套了h5页面,前端页面调用应用侧函数根据日志打印调用不到的实战教程也可以访问 https://www.itying.com/category-93-b0.html

13 回复

为什么要重新注册一遍呢?

这种情况建议开启 web 调试,直接看问题在哪儿。

  1. 编辑项目配置,打开 Auto WebView Debug
  2. 开启可 debug
webview.WebviewController.setWebDebuggingAccess(true);
  1. 重新运行项目,打开 web 页面,监听 web 的转发端口, => 可能是 2222
  2. chrome 打开 chrome://inspect/#devices ,配置端口号 2222
  3. 正常情况下就能看到下面 web url 了,打开就能调试。 cke_7664.png

cke_8002.png cke_8386.png

更多关于HarmonyOS鸿蒙Next中在应用页面里嵌套了h5页面,前端页面调用应用侧函数根据日志打印调用不到的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


好的,谢谢老师,谢谢老师的帮助,现在问题已经解决了。但是我没看懂你的调试步骤,能否出一篇详细点的文章说一下调试步骤呢?


调试步骤

  1. 确认问题现象
    首先,确认问题的具体表现形式,确保对问题有清晰的认识。

  2. 收集相关信息
    收集相关日志、错误信息等,以便后续分析。

  3. 环境检查
    检查运行环境,包括操作系统版本、软件版本等。

  4. 逐步排查
    从最简单的设置开始,逐步增加复杂度,直到问题出现。

  5. 使用调试工具
    使用调试工具(如IDE自带的调试功能)进行单步调试,观察变量值的变化。

  6. 查阅文档和资料
    查阅相关文档和资料,了解可能的原因和解决方案。

  7. 寻求帮助
    如果自己无法解决,可以向同事或社区求助。

具体哪一步没看懂呢?也可以结合之前官方的web调试文档。 https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/web-debugging-with-devtools

先谢谢你的官方文档。我没看懂你写的第一步:编辑项目配置,打开 Auto WebView Debug,你这是要我在IDE上找这个设置项还是编写代码打开呢,

双重注册机制冲突!! 代码中同时使用了 onPageEnd.javaScriptProxy() 事件内的 registerJavaScriptProxy(), 两种注册方式存在覆盖风险:javaScriptProxy() 属于初始化阶段注册,这也是推荐使用的方式;registerJavaScriptProxy() 需在 Web 组件初始化后调用(需配合 deleteJavaScriptRegister() 清理)。 建议 保留其中一种注册方式,避免重复注册导致前端页面调用应用侧函数根据日志打印调用不到。

好的,谢谢老师,现在解决了,

参考文档: https://developer.huawei.com/consumer/cn/doc/harmonyos-references/arkts-basic-components-web-events#onconsole

参考代码示例:

.onPrompt((event) => {
  if (event) {
    LogUtil.d(this.Tag, 'onPrompt', event)
    AlertDialog.show({
      message: event.message,
      primaryButton: {
        value: '取消',
        action: () => {
          event.result.handleCancel();
        }
      },
      secondaryButton: {
        value: '确认',
        action: () => {
          event.result.handlePromptConfirm(event.value);
        }
      },
      cancel: () => {
        event.result.handleCancel();
      }
    })
  }
  return true;
})
.onConsole((event) => {
  if (event) {
    LogUtil.d(this.Tag, 'onConsole', 'getMessage:', event.message.getMessage(), 'getSourceId:',
      event.message.getSourceId(), 'getLineNumber:', event.message.getLineNumber(), 'getMessageLevel:',
      event.message.getMessageLevel())
  }
  return false;
})
.onAlert((event) => {
  LogUtil.d(this.Tag, 'onAlert', event)
  if (event.url.includes('https://hk.k11.com')) {
    return
  }
  if (event) {
    AlertDialog.show({
      message: event.message,
      primaryButton: {
        value: '确认',
        action: () => {
          event.result.handleConfirm();
        }
      },
      cancel: () => {
        event.result.handleCancel();

      }
    })
  }
  return true;
})
.onConfirm((event) => {
  LogUtil.d(this.Tag, 'onConfirm', event)
  if (event) {
    AlertDialog.show({
      message: event.message,
      primaryButton: {
        value: '确认',
        action: () => {
          event.result.handleConfirm();
        }
      },
      secondaryButton: {
        value: '取消',
        action: () => {
          event.result.handleCancel();
        }

      },
      cancel: () => {
        event.result.handleCancel();
      }
    })
  }
  return true;
})

关于调试可以看一楼,

点击 entry 展开下拉列表,选择 Edit Configurations. 就能打开编辑配置。(剩下的看上面的评论图)

勾选上 Auto WebView Debug

收到,但是没看到有Auto WebView Debug 这个选项呀,是我的版本低了吗。我的IDE是5.0.2版本的,

该功能从DevEco Studio 5.0.13.200版本开始支持。
5.0.2版本就只能使用脚本了,麻烦很多。
https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/web-debugging-with-devtools

在HarmonyOS鸿蒙Next中,应用页面嵌套H5页面时调用不到应用侧函数,可能原因如下:

  1. 应用侧未正确注册JS接口:确保在Web组件中使用javaScriptProxy注册了对应方法。

  2. 跨域问题:检查H5页面是否与应用侧配置的安全域名匹配。

  3. 调用时机问题:确认H5页面在完成加载后调用方法,可通过监听onPageEnd事件。

  4. 方法名不一致:检查H5调用方法名与注册方法名完全一致。

  5. 权限问题:确认应用已申请ohos.permission.INTERNET权限。

日志打印建议使用hilog查看完整调用链。

根据描述,本地环境正常但正式环境失效,这种情况通常是由于以下原因导致:

  1. HTTPS安全限制问题:
  • 正式环境可能使用HTTPS,而本地是HTTP
  • 确保Web组件的mixedMode设置为MixedMode.All
  • 检查证书是否受信任
  1. 注册时机问题:
  • 正式环境页面加载可能比本地慢
  • 建议在onPageBegin和onPageEnd都注册JavaScriptProxy
  1. 域名白名单问题:
  • 检查正式环境域名是否在network.security-config中配置
  • 确保没有跨域限制
  1. 调试建议:
  • 在正式环境Web页面添加console.log检查是否加载成功
  • 使用Chrome远程调试工具检查H5端调用情况
  • 检查Web组件的error回调是否有报错

关键点:正式环境与本地环境的主要差异通常在于网络协议、加载速度和安全策略,建议重点排查这些方面。

回到顶部