跨平台开发神器如何在Uniapp中使用WebView实现与Web页面的通讯！

柔情只为你懂 2024-03-23 15:57 116阅读 0赞

Uniapp 是一个跨平台的开发框架，可以同时开发出 iOS、Android、H5 等多个平台的应用。在开发过程中，我们可能需要与 Web 页面进行通讯，这时可以使用 WebView 组件来实现。

本教程将介绍如何在 uniapp 中使用 WebView 组件与 Web 页面进行通讯。

### 1. 创建 uniapp 项目 ###

首先，我们需要创建一个 uniapp 项目。可以使用 HBuilderX 或者 Vue CLI 等工具来创建。

### 2. 添加 WebView 组件 ###

在 uniapp 中，可以使用 WebView 组件来加载 Web 页面。在需要使用 WebView 的页面中，添加以下代码：

<template>
      <view>
        <web-view src="https://example.com" @message="onMessage"></web-view>
      </view>
    </template>
    
    <script>
    export default {
          
      methods: {
          
        onMessage(e) {
          
          console.log('Received message from web page:', e.detail.data);
        }
      }
    }
    </script>

在上面的代码中，我们使用了 WebView 组件来加载 https://example.com 这个 Web 页面，并监听了 message 事件。当 Web 页面向 uniapp 发送消息时，会触发 message 事件，从而调用 onMessage() 方法。

### 3. 在 Web 页面中发送消息 ###

ps：字节跳动小程序不支持、H5 暂不支持

在 Web 页面中，可以使用 JavaScript 调用 uniapp 提供的 API，向 uniapp 发送消息。可以使用 uni.postMessage() 方法来发送消息。以下是一个示例：

<!DOCTYPE html>
    <html>
        <head>
            <meta http-equiv="content-type" content="text/html; charset=utf-8" />
            <title>测试</title>
            <script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>
        </head>
        <body>
            <button onclick="sendMessage()">Send message to uniapp</button>
            <script>
            function sendMessage() {
          
                uni.postMessage({
          
                    data: 'Hello from web page!'
                });
            }
            </script>
        </body>
    </html>

在上面的代码中，我们定义了一个按钮，当用户点击按钮时，会调用 sendMessage() 方法，向 uniapp 发送消息。在 sendMessage() 方法中，我们使用 uni.postMessage() 方法来发送消息，消息内容为一个对象，包含一个 data 属性，值为字符串 ‘Hello from web page!’。

### 4. 接收来自 Web 页面的消息 ###

在 uniapp 中，当 Web 页面调用 uni.postMessage() 方法时，会触发 message 事件，从而调用 onMessage() 方法，输出接收到的消息。以下是一个示例：

在上面的代码中，我们在 onMessage() 方法中输出接收到的消息，并使用 uni.showToast() 方法来显示一个提示框，提示框的内容为接收到的消息。

### 总结 ###

通过以上步骤，我们可以在 uniapp 中使用 WebView 组件与 Web 页面进行通讯。在 Web 页面中，可以使用 uni.postMessage() 方法来向 uniapp 发送消息，在 uniapp 中，可以通过监听 WebView 组件的 message 事件来接收来自 Web 页面的消息。