HarmonyOS鸿蒙Next中有没有webview和原生通信的示例？

HarmonyOS鸿蒙Next中有没有webview和原生通信的示例？ 比如我要html向鸿蒙native发送json数据，或者native向html发送数据。

5 回复

开发者您好，应用侧与前端页面的相互调用(C/C++)参考链接：应用侧与前端页面的相互调用(C/C++)-在应用中使用前端页面JavaScript-ArkWeb（方舟Web）-应用框架 - 华为HarmonyOS开发者

使用Native接口实现JSBridge通信（推荐）完整案例：Native接口实现JSBridge通信

如果您想实现ArkTS应用侧调用前端页面函数：应用侧调用前端页面函数-在应用中使用前端页面JavaScript-ArkWeb（方舟Web）-应用框架 - 华为HarmonyOS开发者

前端页面调用应用侧函数： 前端页面调用应用侧函数-在应用中使用前端页面JavaScript-ArkWeb（方舟Web）-应用框架 - 华为HarmonyOS开发者

您也可以参考如下案例：实现ArkTS与H5的交互功能-HarmonyOS 5及以上-Codelabs-华为开发者联盟

更多关于HarmonyOS鸿蒙Next中有没有webview和原生通信的示例？的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


看下这个呢：run-js-in-web:基于HarmonyOS的WebView与H5通信示例项目 - AtomGit | GitCode

👍👍，

HarmonyOS Next中通过Web组件实现Web与原生通信

使用postMessage()和onMessage()进行双向数据交互，支持JSON格式传输。具体示例可在HarmonyOS官方文档的"Web组件"章节查看，包含JavaScript与ArkTS的通信代码实现。

在HarmonyOS Next中，可以通过Web组件（相当于WebView）与原生应用进行双向通信。主要使用postMessage()和onMessage()方法实现。

1. HTML向原生发送数据： 在HTML中使用JavaScript调用window.ohWebView.postMessage()发送JSON数据。

window.ohWebView.postMessage({ 
  type: 'userData', 
  data: { name: '张三', age: 25 } 
});

在ArkTS中通过Web组件的onMessage()接收：

webView.onMessage((event: web.WebMessage) => {
  const jsonData = JSON.parse(event.data as string)
  console.log('收到HTML数据:', jsonData)
})

2. 原生向HTML发送数据： 在ArkTS中使用postMessage()发送数据到HTML：

webView.postMessage(JSON.stringify({ command: 'update', value: '新数据' }))

在HTML中通过window.onmessage接收：

window.onmessage = (event) => {
  const data = JSON.parse(event.data)
  console.log('收到原生数据:', data)
}

3. 完整示例：

// ArkTS部分
import { web } from '@kit.ArkWeb'

@Entry
@Component
struct WebExample {
  controller: web.WebviewController = new web.WebviewController()

  build() {
    Column() {
      Web({ src: 'index.html', controller: this.controller })
        .onMessage((event: web.WebMessage) => {
          // 处理HTML发来的数据
          console.log('收到HTML消息:', event.data)
        })
      
      Button('发送到HTML')
        .onClick(() => {
          this.controller.postMessage(JSON.stringify({
            from: 'native',
            time: new Date().toISOString()
          }))
        })
    }
  }
}

<!-- HTML部分 -->
<script>
// 接收原生消息
window.onmessage = (e) => {
  console.log('收到原生消息:', JSON.parse(e.data))
}

// 发送消息到原生
function sendToNative() {
  window.ohWebView.postMessage({
    action: 'click',
    payload: { button: 'submit' }
  })
}
</script>

这种方式支持JSON等结构化数据的双向传输，实现了Web内容与HarmonyOS原生代码的完整交互能力。

回到顶部