鸿蒙Next开发中webview与h5的交互如何实现

在鸿蒙Next开发中，如何实现WebView与H5页面的交互？具体有哪些方法或API可以调用？需要处理哪些常见的兼容性问题？能否提供一个简单的代码示例？

鸿蒙Next里Webview和H5交互，就像两个邻居隔墙喊话。
你用WebController的executeJs()给H5发消息，H5用window.channel.postMessage()回传。
记得在Webview里注册onMessageEvent接球，不然消息就掉沟里了。
简单说：JS调原生用channel，原生调JS用executeJs——完美双打！

更多关于鸿蒙Next开发中webview与h5的交互如何实现的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

nodeper 2楼

在鸿蒙Next（HarmonyOS NEXT）开发中，Web组件与H5页面之间的交互主要通过注入JavaScript对象和消息传递机制实现。以下是具体实现方法：

1. 鸿蒙向H5注入JavaScript对象

使用WebView的registerJavaScriptProxy()方法注入对象，供H5调用：

// 鸿蒙侧代码（ArkTS）
import webview from '@ohos.web.webview';

// 创建Web组件
webview.WebView({
  src: 'https://example.com',
  controller: this.webController
})
  .javaScriptAccess(true) // 启用JavaScript执行权限
  .registerJavaScriptProxy({
    object: {
      // 定义供H5调用的方法
      showToast: (msg: string) => {
        prompt.showToast({ message: `H5调用：${msg}` });
      },
      getDeviceInfo: () => {
        return { platform: 'HarmonyOS', version: '4.0' };
      }
    },
    name: 'HarmonyDevice', // 注入对象的全局名称
    methodList: ['showToast', 'getDeviceInfo'] // 声明可调用方法
  })

H5侧通过全局对象调用：

<!-- H5页面 -->
<script>
// 调用鸿蒙注入的方法
HarmonyDevice.showToast('Hello from H5!');

// 调用并获取返回值
const info = HarmonyDevice.getDeviceInfo();
console.log(info.platform); // 输出：HarmonyOS
</script>

2. H5向鸿蒙发送消息

通过WebView的onMessageEvent监听H5发送的消息：

鸿蒙侧监听消息：

webview.WebView({
  src: 'https://example.com',
  controller: this.webController
})
  .javaScriptAccess(true)
  .onMessageEvent((event) => {
    const data = JSON.parse(event.data);
    if (data.type === 'userAction') {
      prompt.showToast({ message: `收到H5消息：${data.payload}` });
    }
  })

H5侧发送消息：

<script>
// 通过postMessage发送数据
window.harmony.webview.postMessage(
  JSON.stringify({
    type: 'userAction',
    payload: '用户点击了按钮'
  })
);
</script>

3. 完整交互流程示例

// 鸿蒙完整示例
import webview from '@ohos.web.webview';

@Entry
@Component
struct WebViewExample {
  webController: webview.WebviewController = new webview.WebviewController();

  build() {
    Column() {
      WebView({
        src: 'https://example.com',
        controller: this.webController
      })
        .javaScriptAccess(true)
        .registerJavaScriptProxy({
          object: {
            syncMethod: (param: string) => {
              return `鸿蒙处理：${param}`;
            },
            asyncMethod: (callback: (data: string) => void) => {
              setTimeout(() => callback('异步数据'), 1000);
            }
          },
          name: 'HarmonyBridge',
          methodList: ['syncMethod', 'asyncMethod']
        })
        .onMessageEvent((event) => {
          const msg = JSON.parse(event.data);
          prompt.showToast({ message: `H5事件：${msg.action}` });
        })
    }
  }
}

<!-- H5完整示例 -->
<button onclick="callNative()">调用原生方法</button>
<button onclick="sendMessage()">发送消息</button>

<script>
// 调用鸿蒙同步方法
function callNative() {
  const result = HarmonyBridge.syncMethod('H5参数');
  console.log('同步返回:', result);
  
  // 调用异步方法
  HarmonyBridge.asyncMethod((data) => {
    console.log('异步返回:', data);
  });
}

// 向鸿蒙发送消息
function sendMessage() {
  window.harmony.webview.postMessage(
    JSON.stringify({ action: 'button_click' })
  );
}
</script>

注意事项

权限配置：在module.json5中声明网络权限：

"requestPermissions": [
  { "name": "ohos.permission.INTERNET" }
]

安全限制：仅允许注册声明在methodList中的方法
类型转换：复杂对象需通过JSON序列化传递
生命周期：注入对象在WebView销毁后自动移除