实现uniapp多端项目（app，小程序）和嵌入的webview中的h5之间实时进行通信

最新推荐文章于 2025-02-21 18:01:04 发布

北辰alk

最新推荐文章于 2025-02-21 18:01:04 发布

阅读量4.7k

点赞数 21

分类专栏：前端 uniapp 文章标签： uni-app 小程序

本文链接：https://blog.youkuaiyun.com/qq_16242613/article/details/145738733

版权

前端同时被 2 个专栏收录

170 篇文章

订阅专栏

uniapp

6 篇文章

订阅专栏

实现 UniApp 多端项目（App、小程序）与嵌入的 WebView 中的 H5 页面之间的实时通信是一个复杂但非常有用的功能。本文将详细介绍如何实现这一功能，涵盖技术原理、实现步骤、代码示例以及注意事项。

文章目录

1. 背景与需求分析

在现代移动应用开发中，UniApp 作为一种跨平台开发框架，能够同时支持 App、小程序和 H5 等多种平台。然而，在实际开发中，我们常常需要在 UniApp 项目中嵌入 H5 页面（通过 WebView），并实现 UniApp 与 H5 之间的实时通信。

典型应用场景

动态内容加载：H5 页面加载动态内容，UniApp 与 H5 实时同步数据。
用户交互：用户在 H5 页面中操作，UniApp 实时响应并更新 UI。
数据共享：UniApp 与 H5 共享用户登录状态、配置信息等。

需求分析

实时性：通信需要低延迟，确保用户体验。
跨平台兼容性：支持 App、小程序和 H5 等多种平台。
安全性：防止数据泄露和恶意攻击。
易用性：开发人员能够快速上手并实现功能。

2. 技术选型与实现方案

2.1 UniApp 与 H5 通信的基本原理

UniApp 与 H5 的通信主要通过 WebView 的 JavaScript 桥接机制实现。具体方式包括：

JavaScript 注入：通过 WebView 的 evalJS 方法执行 H5 页面中的 JavaScript 代码。
消息传递：通过 postMessage 和 onMessage 实现双向通信。
WebSocket：通过 WebSocket 实现实时双向通信。
全局事件：通过 UniApp 的全局事件机制实现通信。

2.2 不同平台的兼容性分析

App 端：支持完整的 WebView 功能，包括 evalJS 和 postMessage。
小程序端：部分功能受限，需使用小程序提供的 API。
H5 端：直接运行在浏览器中，支持标准的 Web API。

3. 实现步骤

3.1 使用 `uni.postMessage` 和 `uni.onMessage`

uni.postMessage 和 uni.onMessage 是 UniApp 提供的 API，用于在 WebView 和 H5 之间传递消息。

3.1.1 UniApp 向 H5 发送消息

// UniApp 中发送消息到 H5
uni.postMessage({
  data: {
    message: 'Hello from UniApp'
  }
});

3.1.2 H5 接收消息

// H5 中接收消息
window.addEventListener('message', function(event) {
  const message = event.data.message;
  console.log('Received message from UniApp:', message);
});

3.1.3 H5 向 UniApp 发送消息

// H5 中发送消息到 UniApp
window.parent.postMessage({
  message: 'Hello from H5'
}, '*');

3.1.4 UniApp 接收消息

// UniApp 中接收消息
uni.onMessage(function(event) {
  const message = event.data.message;
  console.log('Received message from H5:', message);
});

3.2 使用 `evalJS` 方法

evalJS 方法允许 UniApp 在 WebView 中执行 H5 页面中的 JavaScript 代码。

3.2.1 UniApp 调用 H5 中的方法

// UniApp 中调用 H5 中的方法
const webview = uni.requireNativePlugin('webview');
webview.evalJS("window.someFunctionInH5('Hello from UniApp')");

3.2.2 H5 中定义方法

// H5 中定义方法
window.someFunctionInH5 = function(message) {
  console.log('Received message from UniApp:', message);
};

3.3 使用 WebSocket 实现实时通信

WebSocket 是一种全双工通信协议，适合实现实时通信。

3.3.1 UniApp 中建立 WebSocket 连接

// UniApp 中建立 WebSocket 连接
const socket = new WebSocket('ws://your-websocket-url');

socket.onopen = function() {
  console.log('WebSocket connection established');
};

socket.onmessage = function(event) {
  console.log('Received message:', event.data);
};

socket.send('Hello from UniApp');

3.3.2 H5 中建立 WebSocket 连接

// H5 中建立 WebSocket 连接
const socket = new WebSocket('ws://your-websocket-url');

socket.onopen = function() {
  console.log('WebSocket connection established');
};

socket.onmessage = function(event) {
  console.log('Received message:', event.data);
};

socket.send('Hello from H5');

3.4 使用 `uni.$emit` 和 `uni.$on` 实现全局事件通信

UniApp 提供了全局事件机制，可以在不同页面或组件之间进行通信。

3.4.1 UniApp 中发送事件

// UniApp 中发送事件
uni.$emit('messageFromUniApp', {
  message: 'Hello from UniApp'
});

3.4.2 H5 中接收事件

// H5 中接收事件
uni.$on('messageFromUniApp', function(data) {
  console.log('Received message from UniApp:', data.message);
});

3.4.3 H5 中发送事件

// H5 中发送事件
uni.$emit('messageFromH5', {
  message: 'Hello from H5'
});

3.4.4 UniApp 中接收事件

// UniApp 中接收事件
uni.$on('messageFromH5', function(data) {
  console.log('Received message from H5:', data.message);
});

4. 代码示例

4.1 UniApp 与 H5 的双向通信示例

以下是一个完整的示例，展示 UniApp 与 H5 之间的双向通信。

UniApp 代码

<template>
  <view>
    <web-view :src="h5Url" @message="handleMessage"></web-view>
    <button @click="sendMessageToH5">Send Message to H5</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      h5Url: 'https://your-h5-page-url'
    };
  },
  methods: {
    sendMessageToH5() {
      uni.postMessage({
        data: {
          message: 'Hello from UniApp'
        }
      });
    },
    handleMessage(event) {
      const message = event.detail.data[0].message;
      console.log('Received message from H5:', message);
    }
  }
};
</script>

H5 代码

<!DOCTYPE html>
<html>
<head>
  <title>H5 Page</title>
</head>
<body>
  <button onclick="sendMessageToUniApp()">Send Message to UniApp</button>
  <script>
    window.addEventListener('message', function(event) {
      const message = event.data.message;
      console.log('Received message from UniApp:', message);
    });

    function sendMessageToUniApp() {
      window.parent.postMessage({
        message: 'Hello from H5'
      }, '*');
    }
  </script>
</body>
</html>

4.2 WebSocket 实现实时通信示例

以下是一个完整的示例，展示如何使用 WebSocket 实现 UniApp 与 H5 之间的实时通信。

UniApp 代码

<template>
  <view>
    <web-view :src="h5Url"></web-view>
    <button @click="sendMessageViaWebSocket">Send Message via WebSocket</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      h5Url: 'https://your-h5-page-url',
      socket: null
    };
  },
  mounted() {
    this.socket = new WebSocket('ws://your-websocket-url');
    this.socket.onopen = () => {
      console.log('WebSocket connection established');
    };
    this.socket.onmessage = (event) => {
      console.log('Received message:', event.data);
    };
  },
  methods: {
    sendMessageViaWebSocket() {
      this.socket.send('Hello from UniApp');
    }
  }
};
</script>

H5 代码

<!DOCTYPE html>
<html>
<head>
  <title>H5 Page</title>
</head>
<body>
  <button onclick="sendMessageViaWebSocket()">Send Message via WebSocket</button>
  <script>
    const socket = new WebSocket('ws://your-websocket-url');
    socket.onopen = () => {
      console.log('WebSocket connection established');
    };
    socket.onmessage = (event) => {
      console.log('Received message:', event.data);
    };

    function sendMessageViaWebSocket() {
      socket.send('Hello from H5');
    }
  </script>
</body>
</html>