HarmonyOS 鸿蒙Next Web 组件 registerJavaScriptProxy 注册的对象嵌套的问题

发布于 1周前 作者 ionicwang 最后一次编辑是 5天前 来自 鸿蒙OS

一、目的

前端页面调用应用侧对象嵌套的函数

obj.insideObj.method()

二、存在问题

registerJavaScriptProxy 支持注册 JavaScript 对象。可以声明方法，也可以声明属性，但是不支持 h5 直接调用。

registerJavaScriptProxy(object: object, name: string, methodList: Array<string>, asyncMethodList?: Array<string>, permission?: string): void

示例代码如下，在前端页面调用 【webObj.inside.webString()】出错：

// WebComponent.ets
import { webview } from '@kit.ArkWeb';

@Component
export struct WebComponent {
  controller: webview.WebviewController = new webview.WebviewController();
  @State url: string = 'file:///data/storage/el2/base/haps/entry/files/index.html';

  aboutToAppear(): void {
    webview.WebviewController.initializeWebEngine();
    webview.WebviewController.setWebDebuggingAccess(true);
  }

  build() {
    Column() {
      Web({ src: this.url, controller: this.controller })
        .fileAccess(true)
        .javaScriptAccess(true)
        .domStorageAccess(true)
        .onlineImageAccess(true)
        .onControllerAttached(() => {
          const webObj: WebObj = new WebObj();
          this.controller.registerJavaScriptProxy(webObj, "webObj", ["webTest"]);
          const webObjInside = new WebObjInside()
          this.controller.registerJavaScriptProxy(webObjInside, "webObjInside", ["webString"]);
        })
    }
    .width('100%')
    .layoutWeight(1)
    .alignItems(HorizontalAlign.Start)
  }
}

class WebObj {
  constructor() { }
  inside = new WebObjInside()

  webTest(): string {
    console.log('webTest');
    return 'webTest'
  }
}

class WebObjInside {
  constructor() { }

  webString(): string {
    console.log('Web test toString');
    return 'webString'
  }
}

前端页面代码：

<!-- index.html -->
<!DOCTYPE html>
<html>
<meta charset="utf-8">

<body>
  <button type="button" onclick="htmlTest()">Click Me!</button>
  <p id="webTest"></p>
  <p id="webString"></p>
</body>
<script type="text/javascript">
  function htmlTest() {
    let webTest = webObj.webTest();
    document.getElementById("webTest").innerHTML = webTest;
    <!--    存在问题，webObj.inside === undefined-->
    let webString = webObj.inside.webString();
    document.getElementById("webString").innerHTML = webString;
  }
</script>

</html>

更多关于HarmonyOS 鸿蒙Next Web 组件 registerJavaScriptProxy 注册的对象嵌套的问题的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

Harmonyos Next教程
3 回复
参考官网指南：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V13/web-in-page-app-function-invoking-V13 关于前端页面调用应用侧Object里的Function的用法。

更多关于HarmonyOS 鸿蒙Next Web 组件 registerJavaScriptProxy 注册的对象嵌套的问题的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


这个文档的说明只允许一层，即可以实现 【obj.method()】；无法实现【obj.inside.method()】。 我更新了示例代码，你可以看下。

在HarmonyOS鸿蒙Next Web组件中，registerJavaScriptProxy 方法用于将Java对象注册到JavaScript环境中，以便在Web内容中调用。对于对象嵌套的问题，通常需要注意以下几点：

  1. 确保嵌套对象可序列化：注册的对象及其嵌套对象必须能够被正确序列化，以便在JavaScript环境中重建。如果嵌套对象包含无法序列化的属性（如文件句柄、数据库连接等），则可能导致注册失败或行为异常。

  2. 方法可见性：确保要注册的方法在Java对象中是公开的（public），并且具有适当的访问修饰符。嵌套对象中的方法同样需要遵循这一规则。

  3. 递归注册：如果嵌套对象较复杂，可能需要递归地注册这些对象及其方法。这通常不是registerJavaScriptProxy的直接功能，但可以通过编写辅助代码来实现。

  4. 性能考虑：嵌套对象的深度和复杂度可能会影响注册过程的性能和内存占用。因此，在设计时应尽量避免不必要的嵌套，或优化嵌套结构。

如果在使用registerJavaScriptProxy注册嵌套对象时遇到问题，建议检查上述几点。如果问题依旧没法解决请联系官网客服，官网地址是：https://www.itying.com/category-93-b0.html 。

回到顶部