在 uni-app 中实现 WebView 与浏览器交互 并支持 Android、iOS、HarmonyOS Next 三端兼容，是开发混合应用的关键技术之一。以下是完整的实战指南，帮助你实现 webview ↔ 原生 ↔ H5 页面 之间的通信，确保三端一致性。

📱【uni-app实战】WebView 与浏览器交互三端通用方案（Android/iOS/HarmonyOS Next）

📌 目录

  1. uni-app 中 WebView 的基本用法
  2. 页面与 WebView 通信的两种方式
  3. Android / iOS / 鸿蒙的兼容支持
  4. 案例：原生调用 H5，H5 回调原生
  5. HarmonyOS Next 的适配要点
  6. 常见问题与调试建议
  7. 参考链接与官方文档

1️⃣ uni-app 中 WebView 的基本用法

🔧 引入 WebView 组件（使用 <web-view>）

<template>
  <view class="container">
    <web-view :src="webUrl" @message="onMessageFromWeb" />
  </view>
</template>

<script>
export default {
  data() {
    return {
      webUrl: 'https://example.com'
    };
  },
  methods: {
    onMessageFromWeb(e) {
      const data = e.detail.data[0];
      console.log('接收到来自 Web 页面消息：', data);
    }
  }
}
</script>
  • webUrl: 你的网页地址（可为远程或本地）
  • @message: 监听来自网页的 postMessage 通信

2️⃣ 页面与 WebView 通信的两种方式

✅ H5 页面向 uni-app 页面发送消息

// 在网页中执行
window.parent.postMessage({ type: 'login', token: '123456' }, '*');

注意：H5 页面要放在允许通信的同源页面，或通过 HTTPS 使用 iframe + postMessage 发送。

✅ uni-app 页面向 H5 页面发送数据（仅限支持 JS 注入平台）

使用 $refs 获取 webview 并通过 JS 注入调用：

<web-view ref="webview" :src="webUrl" />

// JS 注入，适用于 App 和 HarmonyOS Next
this.$refs.webview.evalJs(`window.setToken && window.setToken("abc123");`);

H5 页面需提前定义 window.setToken() 方法。

3️⃣ 各平台兼容性说明

平台通信支持方式特别注意
Android (App)✅ postMessage + evalJsHBuilderX 2.7+ 支持稳定
iOS (App)✅ postMessage + evalJs需 HTTPS 页面
HarmonyOS Next✅ ArkTS + web组件webview.evalJs() 完美兼容
微信小程序❌ 无 evalJs 支持仅支持单向 postMessage
H5✅ postMessage 全支持需配合 iframe 与 parent.window

4️⃣ 案例：原生调用 H5 页面函数，H5 页面回调

H5 页面代码（注入函数）

<script>
  window.setToken = function (token) {
    console.log('原生传来的 token:', token);
    alert("收到 token：" + token);
  };

  // 向原生发消息
  window.parent.postMessage({ action: 'loginSuccess', userId: 123 }, '*');
</script>

uni-app 页面中注入 JS

this.$refs.webview.evalJs('window.setToken("abc123")');

uni-app 接收来自 H5 的消息

<web-view :src="webUrl" @message="onMessageFromWeb" />

methods: {
  onMessageFromWeb(e) {
    const data = e.detail.data[0];
    if (data.action === 'loginSuccess') {
      console.log('用户 ID：', data.userId);
    }
  }
}

5️⃣ HarmonyOS Next 的适配要点（ArkTS）

HarmonyOS Next 无 WebView，而是用 web 组件，需要在 ArkTS 原生注册与处理。

📌 注册原生 Web 组件与 JSBridge

webController.runJavaScript(`window.setToken("abc123")`);

监听 H5 页面发回的消息（ArkTS）：

webController.onMessage((message: string) => {
  console.log('H5 回传消息：', message);
});

ArkTS 与 uni-app 桥接（推荐封装原生插件或使用 jscore 插件）

6️⃣ 常见问题与调试建议

问题解决方案或建议
H5 页面无法访问 JSBridge确保注入 JS 方法后再调用
H5 页面中 postMessage 无响应确保页面加载完毕，且 HTTPS 环境
iOS 页面拦截加入白名单，设置 NSAppTransportSecurity
HarmonyOS 无法 evalJs使用 webController.runJavaScript()
微信小程序不支持注入 JS使用组件通信或云函数

📚 7. 参考资料与官方链接