鸿蒙Next开发中WebView如何注册JS交互方法

在鸿蒙Next开发中，使用WebView时如何注册JS交互方法？具体步骤是什么？是否需要额外的配置或权限？能否提供一个简单的代码示例？

2 回复

在鸿蒙Next中，通过WebView的registerJavaScriptProxy方法注册JS交互：

  1. 创建Java对象：
public class JsInterface {
    public void showToast(String msg) {
        // 处理JS调用
    }
}
  1. 注册代理：
WebView webView = findComponentById(ResourceTable.Id_webview);
webView.registerJavaScriptProxy(new JsInterface(), "AndroidBridge");
  1. JS中调用：
// 直接调用原生方法
AndroidBridge.showToast("Hello from JS!");

注意：

  • 注册要在onStart或之后执行
  • 方法必须是public
  • 支持基本数据类型参数
  • 使用removeJavaScriptProxy可移除代理

这样就实现了JS与原生双向通信。

更多关于鸿蒙Next开发中WebView如何注册JS交互方法的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在鸿蒙Next（HarmonyOS NEXT）中，Web组件通过registerJavaScriptProxy()方法注册JS交互方法，实现Web与ArkTS的双向通信。

核心步骤：

  1. 注册JS方法代理

    // 在ArkTS中定义供JS调用的方法
class JsProxy {
  static showToast(message: string): void {
    // 处理JS调用
  }
}

// 在Web组件中注册
[@Component](/user/Component)
struct WebComponent {
  controller: WebController = new WebController()
  
  aboutToAppear() {
    // 注册JS代理
    this.controller.registerJavaScriptProxy(
      new JsProxy(), 
      'jsProxy',  // JS中使用的对象名
      ['showToast'] // 暴露的方法名列表
    )
  }
  
  build() {
    Column() {
      Web({ 
        src: $rawfile('index.html'),
        controller: this.controller 
      })
    }
  }
}

  2. JS侧调用方式

    <!-- index.html -->
<button onclick="callNative()">调用原生方法</button>

<script>
function callNative() {
  // 通过注册的对象名调用ArkTS方法
  jsProxy.showToast('Hello from JS!')
}
</script>

  3. 刷新代理（可选） 注册后可能需要刷新才能生效：

    this.controller.refresh()

注意事项：

  • 注册时机：建议在aboutToAppear()或组件初始化时注册
  • 方法限制：只能注册类中的静态方法
  • 参数传递：支持基本数据类型和字符串
  • 安全考虑：应对JS传入参数进行验证

这样就完成了WebView中JS与ArkTS的交互注册。

回到顶部