HarmonyOS鸿蒙Next中如何使用WebView加载网页并与JS交互？

HarmonyOS鸿蒙Next中如何使用WebView加载网页并与JS交互？ 我需要在应用中嵌入网页，Web 组件如何使用？如何实现 ArkTS 与 JavaScript 的双向通信？

3 回复

实现思路：

  1. 使用 Web 组件加载网页，通过 WebviewController 控制：
import { webview } from '@kit.ArkWeb';

private controller: webview.WebviewController = new webview.WebviewController();

Web({ src: 'https://example.com', controller: this.controller })
  1. 使用 javaScriptProxy 注册 JS 可调用的方法：
Web({ src: this.url, controller: this.controller })
  .javaScriptProxy({
    object: this.jsObj,
    name: 'nativeBridge',
    methodList: ['showToast', 'getUserInfo'],
    controller: this.controller
  })
  1. 使用 runJavaScript 调用网页中的 JS 方法：
this.controller.runJavaScript('window.onNativeMessage("Hello from ArkTS")');
  1. 完整示例代码：
import { webview } from '@kit.ArkWeb';

interface JsBridge {
  showToast: (message: string) => void;
  getUserInfo: () => string;
}

@Entry
@Component
struct WebViewPage {
  private controller: webview.WebviewController = new webview.WebviewController();
  @State url: string = 'https://example.com';
  @State canGoBack: boolean = false;
  @State canGoForward: boolean = false;
  @State progress: number = 0;

  // JS 可调用的方法
  private jsObj: JsBridge = {
    showToast: (message: string) => {
      console.info(`JS called showToast: ${message}`);
      // 显示提示
    },
    getUserInfo: () => {
      return JSON.stringify({ name: '张三', id: '123' });
    }
  };

  build() {
    Column() {
      // 导航栏
      Row({ space: 12 }) {
        Button('←')
          .enabled(this.canGoBack)
          .onClick(() => this.controller.backward())

        Button('→')
          .enabled(this.canGoForward)
          .onClick(() => this.controller.forward())

        Button('刷新').onClick(() => this.controller.refresh())

        Button('调用JS').onClick(() => {
          this.controller.runJavaScript('window.onNativeMessage && window.onNativeMessage("Hello")')
            .then((result) => {
              console.info(`JS result: ${result}`);
            });
        })
      }
      .width('100%')
      .padding(8)

      // 加载进度
      if (this.progress < 100) {
        Progress({ value: this.progress, total: 100 })
          .width('100%')
          .height(2)
      }

      // WebView
      Web({ src: this.url, controller: this.controller })
        .javaScriptAccess(true)
        .javaScriptProxy({
          object: this.jsObj,
          name: 'nativeBridge',
          methodList: ['showToast', 'getUserInfo'],
          controller: this.controller
        })
        .onPageBegin(() => {
          this.progress = 0;
        })
        .onProgressChange((event) => {
          this.progress = event?.newProgress || 0;
        })
        .onPageEnd(() => {
          this.canGoBack = this.controller.accessBackward();
          this.canGoForward = this.controller.accessForward();
        })
        .width('100%')
        .layoutWeight(1)
    }
    .width('100%')
    .height('100%')
  }
}

更多关于HarmonyOS鸿蒙Next中如何使用WebView加载网页并与JS交互？的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS Next中，使用WebView加载网页并与JS交互的步骤如下：

  1. 加载网页：通过WebView组件的loadUrl方法加载指定URL的网页。

  2. 与JS交互：

    • ArkTS调用JS：使用runJavaScript方法执行JS代码。
    • JS调用ArkTS：通过registerJavaScriptProxy注册ArkTS对象到JS环境，JS可直接调用该对象的方法。

  3. 处理回调：使用onAlert等事件监听JS的弹窗等交互行为。

示例代码片段：

// 注册ArkTS对象供JS调用
webview.registerJavaScriptProxy({
  showToast: (message: string) => {
    // 处理JS调用
  }
}, 'arktsObject');

// 调用JS方法
webview.runJavaScript('jsFunction()');

需在module.json5中声明ohos.permission.INTERNET网络权限。

在HarmonyOS Next中，使用Web组件（WebView）加载网页并与JavaScript交互，主要通过@ohos.web.webview模块实现。以下是核心步骤：

1. 加载网页

首先，在ArkUI中创建Web组件并加载指定URL：

import webview from '@ohos.web.webview';

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

  build() {
    Column() {
      // 创建Web组件
      Web({ src: 'https://www.example.com', controller: this.controller })
        .width('100%')
        .height('100%')
    }
  }
}

2. ArkTS调用JavaScript

通过runJavaScript方法执行JS代码并获取返回值：

// 执行无返回值JS
this.controller.runJavaScript('alert("Hello from ArkTS")');

// 执行有返回值JS（需API 10+）
this.controller.runJavaScript('return document.title')
  .then(result => {
    console.log('网页标题：', result);
  });

3. JavaScript调用ArkTS

步骤一：注册ArkTS处理器

// 注册对象到Web侧，命名为'arkTSHandler'
this.controller.registerJavaScriptProxy({
  // 定义供JS调用的方法
  showToast: (msg: string) => {
    prompt.showToast({ message: `JS传递消息：${msg}` });
  },
  getDeviceInfo: () => {
    return { platform: 'HarmonyOS', version: '4.0' };
  }
}, 'arkTSHandler', // 注册的全局对象名
  ['showToast', 'getDeviceInfo'] // 暴露的方法名列表
);

步骤二：在JavaScript中调用

// 网页中的JS代码
if (window.arkTSHandler) {
  // 调用无返回值方法
  arkTSHandler.showToast('Hello from Web!');
  
  // 调用有返回值方法
  const info = arkTSHandler.getDeviceInfo();
  console.log('设备信息：', info);
}

步骤三：适时注销代理（如组件销毁时）

this.controller.unregisterJavaScriptProxy('arkTSHandler');

4. 监听网页JS事件

通过onAlert等回调监听JS对话框：

Web({ src: 'www.example.com', controller: this.controller })
  .onAlert((event) => {
    console.log('JS alert:', event.message);
    return true; // 阻止默认弹窗
  })
  .onConfirm((event) => {
    console.log('JS confirm:', event.message);
    return true; // 阻止默认弹窗
  })

关键注意事项：

  • 同源策略：ArkTS与JS交互需确保网页与注册操作同源（相同协议/域名/端口）
  • 类型转换：交互数据会自动序列化为字符串，复杂对象需JSON处理
  • 生命周期：在aboutToAppear注册代理，在aboutToDisappear注销
  • 权限配置：需在module.json5中声明网络权限：
{
  "module": {
    "requestPermissions": [
      {
        "name": "ohos.permission.INTERNET"
      }
    ]
  }
}

此方案支持完整的双向通信能力，实际开发时建议封装统一的通信管理器处理消息解析与错误处理。

回到顶部