HarmonyOS鸿蒙Next中registerJavaScriptProxy文档问题

HarmonyOS鸿蒙Next中registerJavaScriptProxy文档问题 https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/web-in-page-app-function-invoking

文档对何时使用registerJavaScriptProxy 哪个生命周期使用时机，交代不清

实际测试发现在onPageEnd里使用不生效，在onControllerAttached 里可以 ，示例哪个生命周期最佳


更多关于HarmonyOS鸿蒙Next中registerJavaScriptProxy文档问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html

5 回复

在 API 文档中，官方示例是在 onControllerAttached 这个阶段使用的。

示例代码：

// xxx.ets
import { webview } from '@kit.ArkWeb';
import { BusinessError } from '@kit.BasicServicesKit';

class WebObj {
  constructor() {
  }

  webTest(): string {
    console.info('Web test');
    return "Web test";
  }

  webString(): void {
    console.info('Web test toString');
  }
}

@Entry
@Component
struct WebComponent {
  controller: webview.WebviewController = new webview.WebviewController()
  @State webTestObj: WebObj = new WebObj();

  build() {
    Column() {
      Button('refresh')
        .onClick(() => {
          try {
            this.controller.refresh();
          } catch (error) {
            console.error(`ErrorCode: ${(error as BusinessError).code},  Message: ${(error as BusinessError).message}`);
          }
        })
      Button('deleteJavaScriptRegister')
        .onClick(() => {
          try {
            this.controller.deleteJavaScriptRegister("objTestName");
          } catch (error) {
            console.error(`ErrorCode: ${(error as BusinessError).code},  Message: ${(error as BusinessError).message}`);
          }
        })
      Web({ src: '', controller: this.controller })
        .javaScriptAccess(true)
        .onControllerAttached(() => {
          this.controller.loadUrl($rawfile("index.html"));
          this.controller.registerJavaScriptProxy(this.webTestObj, "objTestName", ["webTest", "webString"]);
        })
    }
  }
}

推荐阅读

更多关于HarmonyOS鸿蒙Next中registerJavaScriptProxy文档问题的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


文档web组件的生命周期中推荐在onControllerAttached中使用registerJavaScriptProxy

Web({ src: 'www.example.com', controller: this.controller })
  .onControllerAttached(() => {
    // 推荐在此loadUrl、设置自定义用户代理、注入JS对象等
    console.info('onControllerAttached execute')
  })

也可以使用 javaScriptProxy ，不需要考虑生命周期：

 Web({ src: 'www.example.com', controller: this.controller })
  .javaScriptAccess(true)
  .javaScriptProxy({
    object: this.testObj,
    name: "objName",
    methodList: ["test", "toString"],
    asyncMethodList: ["asyncTest"],
    controller: this.controller,
})

需要等web组件初始化完毕之后才可以注册吧~~

在HarmonyOS Next中，registerJavaScriptProxy用于注册一个本地对象到JavaScript环境，实现ArkTS与前端JavaScript的交互。该接口位于WebviewController类下，通过此方法可将ArkTS对象的方法暴露给Web页面中的JavaScript调用。使用时需确保在Web组件加载完成后调用，并注意对象生命周期管理，避免内存泄漏。具体参数与调用示例需参考官方API文档。

关于registerJavaScriptProxy的使用时机，文档确实需要更明确的说明。根据实际开发经验，最佳实践是在onControllerAttached生命周期中调用。

原因如下：

  1. onControllerAttached在Page与AbilityContext绑定后触发，此时PageController已就绪，可以安全地注册JavaScript接口。
  2. onPageEnd发生在页面跳转离开时，此时注册代理已无意义，因此不生效。
  3. 在onPageShow中注册也可行，但可能因页面重复显示导致重复注册，需要额外处理。

建议代码示例：

onControllerAttached(controller: webview.WebviewController) {
  // 注册JavaScript代理
  controller.registerJavaScriptProxy({
    object: {
      callNativeMethod: (msg: string) => {
        // 处理逻辑
      }
    },
    name: 'nativeObj',
    methodList: ['callNativeMethod']
  });
}

这样能确保Web组件加载时，JavaScript接口已准备就绪。

回到顶部