uni-app 中 web-view 组件嵌入 h5 页面，h5 如何向 web-view 发送消息_uniapp嵌入h5页面

作者：花生_TL007 | 2024-05-28 10:01:53

踩

uniapp嵌入h5页面

文章目录

背景
一、使用 postMessage
- 1.在 H5 页面中发送消息
- 2.在 UniApp 的 web-view 页面中接收消息
二、使用 uni.webview
总结

背景

移动端项目是 vue 框架写的 h5 页面，然后 uni-app 的项目中使用 web-view 组件通过 src 指向 h5 页面，现在需要从 h5 页面发送消息，由 web-view 组件接收消息。

一、使用 postMessage

1.在 H5 页面中发送消息

window.parent.postMessage({
  data: {
    message: 'Hello from H5'
  }
}, '*');
1
2
3
4
5

第二个参数需要指定为’*'，表示任意域名都可以接收到消息。

2.在 UniApp 的 web-view 页面中接收消息

<template>
  <view>
    <web-view src="/hybrid/html/index.html" @message="handleMessage"></web-view>
  </view>
</template>

<script>
export default {
  methods: {
    handleMessage(event) {
      let message = event.detail.data.message;
      console.log('Received message: ' + message);
      // 在这里你可以根据接收到的消息来执行相应的方法
    }
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

二、使用 uni.webview

1.下载 uni SDK 到本地

App 端使用 uni.web-view.js 的最低版为 uni.webview.1.5.4.js
最新版下载地址：https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha/hybrid/html/uni.webview.1.5.5.js

2. H5端在 index.html 中引入

<!DOCTYPE html>
<html>
<head>
	<!-- -->
</head>
<body>
  <div id="app"></div>
</body>
<script type="text/javascript" src="./uni/uni.webview.js"></script>
<script>
  document.addEventListener('UniAppJSBridgeReady', function() {
    uni.webView.getEnv(function(res) {
      console.log('当前环境：' + JSON.stringify(res));
    });
  });
</script>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

把 uni.webview.1.5.5.js 下载到本地或者自己的服务器
在引用依赖的文件后，需要在 HTML 中监听 UniAppJSBridgeReady 事件触发后，才能安全调用 uni 的 API
uni 对象会被挂载到 window 下

3. 在 h5 中发送消息

uni.webView.postMessage({
  data: {
    message: 'Hello from H5',
  }
});
1
2
3
4
5

uni.postMessage 中的参数格式，必须是 data: {}。也就是说，传递的消息信息必须在 data 这个对象中。

4. 在 web-view 中接收消息

<template>
  <view>
    <web-view src="/hybrid/html/index.html" @message="handleMessage"></web-view>
  </view>
</template>

<script>
export default {
  methods: {
    handleMessage(event) {
      let { message } = event.detail.data[0];
      console.log('Received message: ' + message);
      // 在这里你可以根据接收到的消息来执行相应的方法
    }
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

每次执行 postMessage 后，传递的消息会以数组的形式存放。因此，在 web-view 的 message 事件回调中，接收到的 event.detail.data 的值是一个数组。

总结

在博主的项目中方案一不适用，在 uni-app 中没有接收到 h5 发送的消息，采用方案二成功发送并接收，故推荐方案二。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/花生_TL007/article/detail/636959