uni-app项目中引入的H5页面无法使用uni.postMessage

发布于 1周前 作者 eggper 来自 Uni-App

uni-app项目中引入的H5页面无法使用uni.postMessage
在uniapp 项目中引入使用uniapp开发打包部署成的H5页面

按照官方文档，引入https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js脚本后会存在冲突，导致uni.postMessage 无法使用。本人踩坑后修改其源码解决了此冲突，制作成npm 包，直接安装使用即可。

安装：

npm i y_uniwebview

引入：

import y_uni from "y_uniwebview"

使用：

y_uni.postMessage()
开发环境 版本号 项目创建方式
uniapp 1.5.2 官方文档指引

Harmonyos Next教程
1 回复

在uni-app项目中，uni.postMessage 是用于在不同页面或组件间进行通信的方法，但它主要是为原生小程序或App端设计的，并不直接支持在H5页面中使用。因此，在H5页面中直接使用 uni.postMessage 会导致无法使用的问题。

为了在H5页面中实现跨页面通信，你可以考虑使用其他方法，如基于浏览器的 localStorage、sessionStorage、cookie 或者通过URL参数传递信息，以及使用现代浏览器支持的 BroadcastChannel 或 Window.postMessage API。

以下是一个使用 Window.postMessage API 在H5页面中实现跨页面通信的示例：

页面A（发送消息）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Page A</title>
</head>
<body>
    <button onclick="sendMessage()">Send Message to Page B</button>

    <script>
        function sendMessage() {
            const message = { text: 'Hello from Page A!' };
            // 假设Page B在同一个域下且有一个接收消息的窗口对象
            const targetWindow = window.open('pageB.html', '_blank'); // 或者使用已有的窗口引用
            if (targetWindow && targetWindow.postMessage) {
                targetWindow.postMessage(message, '*'); // '*' 表示接受消息的来源，也可以指定具体的域名
            } else {
                console.error('postMessage is not supported or target window is not available.');
            }
        }
    </script>
</body>
</html>

页面B（接收消息）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Page B</title>
</head>
<body>
    <div id="message"></div>

    <script>
        window.addEventListener('message', function(event) {
            // 验证消息的来源（出于安全考虑）
            if (event.origin !== "http://yourdomain.com") { // 替换为你的实际域名
                console.error('Invalid origin for received message.');
                return;
            }

            // 处理接收到的消息
            const receivedMessage = event.data;
            document.getElementById('message').innerText = receivedMessage.text;
        }, false);
    </script>
</body>
</html>

在这个示例中，页面A通过 window.open 打开页面B，并使用 postMessage 方法发送消息。页面B通过监听 message 事件来接收消息，并处理接收到的数据。

请注意，使用 postMessage 时，出于安全考虑，应该验证消息的来源（event.origin 或 event.source），确保只处理来自可信来源的消息。

回到顶部