鸿蒙开发黑科技：前端页面轻松调用 ArkTS 函数

本文旨在深入探讨华为鸿蒙HarmonyOS Next系统（截止目前API12）的技术细节，基于实际开发实践进行总结。
主要作为技术分享与交流载体，难免错漏，欢迎各位同仁提出宝贵意见和问题，以便共同进步。
本文为原创内容，任何形式的转载必须注明出处及原作者。

在鸿蒙开发中，前端页面（HTML）有时候需要调用应用侧（ArkTS）的函数，例如获取设备信息、调用本地服务、进行复杂的业务逻辑处理等。那么，如何实现前端页面轻松调用 ArkTS 函数呢？

JavaScriptProxy：前端页面的“万能遥控器”

为了实现前端页面调用 ArkTS 函数，我们可以使用 JavaScriptProxy。JavaScriptProxy 是 ArkWeb 提供的一种机制，它允许我们将 ArkTS 对象注册到前端页面，并在前端页面中调用这些对象的函数。
我们可以使用 javaScriptProxy() 或 registerJavaScriptProxy() 接口将 ArkTS 对象注册到前端页面。

• javaScriptProxy() 接口： 在 Web 组件初始化时调用，将对象注入到前端页面。
• registerJavaScriptProxy() 接口： 在 Web 组件初始化完成后调用，将对象注册到前端页面。

示例代码：前端页面调用 ArkTS 函数

下面，我们通过一个示例代码来演示如何将 ArkTS 函数注册到前端页面，并在前端页面中调用这些函数。
应用侧代码（ArkTS）：

import {
   
    webview } from '@kit.ArkWeb';
import {
   
    BusinessError } from '@kit.BasicServicesKit';
class testClass {
   
   
  constructor() {
   
   
  }
  test(): string {
   
   
    return 'ArkTS Hello World!';
  }
  toString(param: string): void {
   
   
    console.log('Web Component toString' + param);
  }
}
@Entry
@Component
struct WebComponent {
   
   
  webviewController: webview.WebviewController = new webview.WebviewController();
  // 声明需要注册的对象
  @State testObj: testClass = new testClass();
  build() {
   
   
    Column() {
   
   
      // Web组件加载本地index.html页面
      Web({
   
    src: $rawfile('index.html'), controller: this.webviewController})
        // 将对象注入到web端
        .javaScriptProxy({
   
   
          object: this.testObj,
          name: "testObjName",
          methodList: ["test", "toString"],
          controller: