鸿蒙Next中uniapp发布的应用如何与webview进行交互

在鸿蒙Next系统中，使用uniapp开发的应用如何与内嵌的webview实现双向通信？比如需要从webview获取数据或向webview传递参数时，具体应该调用哪些API？官方文档中提到的uni.postMessage和uni.onMessage方法在鸿蒙环境下是否完全兼容？如果有兼容性问题，是否有替代方案或桥接方案？能否提供一个简单的代码示例？

2 回复

在鸿蒙Next中，UniApp应用与WebView交互，就像两个程序员隔着玻璃墙喊话。用uni.postMessage发消息，WebView用window.onmessage接；反过来WebView用window.parent.postMessage，UniApp用uni.onMessage收。记得加协议白名单，不然消息会被保安（系统）拦下哦！

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


在鸿蒙Next（HarmonyOS NEXT）中，使用uni-app开发的应用可以通过Web组件（相当于WebView）与内嵌网页进行交互。主要通过以下方式实现：

1. 应用向网页发送数据

使用runJavaScript()方法执行JS代码来传递数据给网页。

示例代码（ArkTS）：

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

// 获取Web组件实例
let webView: webview.WebviewController = ...;

// 向网页传递数据
webView.runJavaScript(
  `window.receiveDataFromApp(${JSON.stringify(data)})`,
  (error) => {
    if (error) {
      console.error('执行JS失败');
    }
  }
);

网页中需预先定义接收函数：

window.receiveDataFromApp = function(data) {
  console.log('收到应用数据:', data);
};

2. 网页向应用发送数据

通过Web组件的onConsole事件捕获网页console.log()输出，或使用onMessage事件接收postMessage()消息。

方法一：使用onConsole（简单调试）

应用侧代码：

webView.on('onConsole', (event) => {
  if (event.message?.startsWith('APP_INTERACT:')) {
    const data = event.message.replace('APP_INTERACT:', '');
    console.log('收到网页数据:', data);
  }
});

网页侧代码：

console.log('APP_INTERACT:' + JSON.stringify({key: 'value'}));

方法二：使用onMessage（推荐）

应用侧代码：

webView.on('onMessage', (event) => {
  console.log('收到网页消息:', event.message);
});

网页侧代码：

window.hap?.postMessage(JSON.stringify({type: 'data', content: 'Hello'}));

3. 网页调用应用方法

通过runJavaScript()在网页中注入函数，调用应用定义的方法。

应用侧代码：

// 注册全局函数供网页调用
globalThis.appFunction = (param) => {
  console.log('网页调用应用函数，参数:', param);
};

// 注入函数到网页
webView.runJavaScript(`
  window.invokeAppFunction = function(param) {
    globalThis.appFunction(param);
  };
`);

网页侧代码：

window.invokeAppFunction('来自网页的参数');

4. 完整交互流程示例

// 应用侧
import webview from '@ohos.web.webview';

// 初始化Web组件
let webView: webview.WebviewController = ...;

// 监听网页消息
webView.on('onMessage', (event) => {
  const data = JSON.parse(event.message);
  if (data.type === 'getUserInfo') {
    webView.runJavaScript(`window.updateUserInfo(${JSON.stringify({name: '用户'}))`);
  }
});

// 网页侧
// 发送消息给应用
window.hap?.postMessage(JSON.stringify({type: 'getUserInfo'}));

// 接收应用数据
window.updateUserInfo = function(userInfo) {
  console.log('用户信息:', userInfo);
};

注意事项：

  1. 权限配置：在module.json5中配置ohos.permission.INTERNET权限。
  2. 安全限制：确保交互数据经过验证，防止恶意代码注入。
  3. 生命周期：在页面销毁时移除事件监听。

通过以上方法，uni-app应用可与WebView实现双向数据通信和功能调用。

回到顶部