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

最新推荐文章于 2024-08-14 14:17:40 发布

LCMKK

最新推荐文章于 2024-08-14 14:17:40 发布

阅读量3.2k

点赞数 21

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

本文链接：https://blog.csdn.net/qq_42966167/article/details/135230302

版权

uniapp 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

本文介绍了在移动端Vue框架的H5页面与UniAppweb-view组件间通信的两种方法：使用window.postMessage进行跨域通信和uni.webviewAPI。通过比较，发现uni.webview更为适用，推荐方案二解决H5向web-view发送和接收消息的问题。

摘要由CSDN通过智能技术生成

文章目录

背景
一、使用 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'
  }
}, '*');

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

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>

二、使用 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>

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

3. 在 h5 中发送消息

uni.webView.postMessage({
  data: {
    message: 'Hello from H5',
  }
});

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>