uni-app小程序端使用webview嵌套uni-h5应用时无法从h5端向小程序端传值

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

uni-app小程序端使用webview嵌套uni-h5应用时无法从h5端向小程序端传值

在uni小程序端使用webview嵌套uni-h5应用，无法从h5端向小程序端传值

Harmonyos Next教程
19 回复

微信小程序还是 uniapp小程序


uniapp小程序

回复 h***@163.com: 可以提供一个能重现问题的测试工程嘛

回复 BoredApe: 您好，请问微信小程序里用webview嵌套了uiapp开发的h5，h5里使用 uni.navigateTo，小程序无法跳转是什么问题啊，尝试了不用uniapp开发的h5就可以。

回复 BoredApe: 我uni的h5项目是我们非开源的，没办法给你，可以本地启动两个uni项目通过webview连接本地的外网ip和端口

回复 h***@163.com: 新建一个项目。模拟一下这种场景。给我一个能重现问题的测试工程。

回复 花糖棉花: 集成uni.webview.js了吗？

回复 BoredApe: 请教一下：uni.webview.js的作用是什么，因为文档上并没有详细介绍，我已经引用了webview组件，现在引用uni.webview.js的时候就会报错’userAgent’ of undefined

回复 BoredApe: 集成了uni.webview.js，没有效果，在回复中有我的demo

回复 BoredApe: 集成了

大佬 我也遇到了此问题 可以帮我看下吗

请问微信小程序中使用webview，可以向webview中的网页发送消息吗？

我也是，小程序里用webview嵌套了uiapp开发的h5，然后uni.navigateTo 无效，，，不用uniapp开发的就行…

这里是h5的demo，在本地运行

解决了,微信小程序里要用wx.miniProgram

回复 花糖棉花: wx.miniProgram.postMessage的触发限制太多了，并不能通过按钮实时进行数据交互

回复 h***@163.com: 微信里webview做不到实时的数据交互吧，或者用websocket？

回复 花糖棉花: c端用户太多了，websocket服务器受不了，现在我的问题主要是用原生小程序嵌套uniapp-h5也无法实时通信

在uni-app小程序端使用webview嵌套uni-h5应用时，若需要实现H5端向小程序端传值，通常可以通过postMessage API进行通信。下面是一个具体的代码案例，展示如何在H5端发送数据并在小程序端接收。

H5端代码（uni-h5应用）

在H5页面中，可以通过调用window.WeixinJSBridge.invoke（微信小程序专用）或者postMessage（其他平台或通用方案）来发送数据。这里以postMessage为例，因为它更通用，也适用于其他平台（如支付宝小程序）。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>H5 Page</title>
    <script>
        function sendDataToMiniApp(data) {
            if (window.WeixinJSBridge) {
                // 微信小程序环境
                window.WeixinJSBridge.invoke('sendDataToMiniProgram', { data: JSON.stringify(data) }, function(res) {
                    console.log('Send data to mini-program:', res.err_msg);
                });
            } else {
                // 其他环境或通用方案
                const event = new MessageEvent('message', {
                    data: {
                        type: 'fromH5',
                        payload: data
                    }
                });
                window.dispatchEvent(event);
            }
        }

        // 示例：发送数据
        sendDataToMiniApp({ message: 'Hello from H5!' });
    </script>
</head>
<body>
    <h1>H5 Page</h1>
</body>
</html>

小程序端代码（uni-app）

在小程序端的webview组件中，监听message事件来接收H5端发送的数据。

<template>
    <view>
        <web-view src="https://your-h5-url.com" @message="handleMessage"></web-view>
    </view>
</template>

<script>
export default {
    methods: {
        handleMessage(event) {
            const { data } = event.detail;
            if (data && data.type === 'fromH5') {
                const payload = data.payload;
                console.log('Received data from H5:', payload);
                // 在这里处理接收到的数据
            }
        }
    }
}
</script>

<style>
/* 样式代码 */
</style>

注意事项

  1. 微信小程序特有API：window.WeixinJSBridge.invoke是微信小程序特有的API，非微信小程序环境下需要采用其他方式（如上述的postMessage模拟）。
  2. 安全性：确保传递的数据经过适当的验证和清理，防止XSS攻击等安全问题。
  3. 跨域问题：如果H5和小程序不在同一个域下，可能涉及到跨域通信的问题，需要相应的配置或处理。

通过上述方法，可以实现H5端向小程序端的数据传递。

回到顶部