web-view内嵌H5与uniapp数据的实时传递解决方案

更新时间：2023年07月08日 09:18:21 作者：adelbert1002

这篇文章主要介绍了web-view内嵌H5与uniapp数据的实时传递,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下

场景：

在 uni-app 中通过 web-view 内嵌 H5 ，要做到在 H5 发起传递信息传给 uni-app 并且 uni-app 能实时接收。

解决方案：

1.在uni-app项目的main.js文件中引入和创建一个事件总线对象：

import Vue from 'vue'
export const EventBus = new Vue()

2.在uni-app中定义一个事件监听函数，在该函数中实现对来自web-view的消息进行处理：

import {EventBus} from '@/main.js'
// 监听事件
EventBus.$on('messageFromH5', (data) => {
  // 处理来自web-view的消息
  console.log('收到来自H5页面的消息：', data)
})

3.在web-view的H5页面中使用postMessage()方法向uni-app页面发送消息，同时将发送的消息格式转换为对象格式：

var messageData = {
  content: '这是从H5页面中发送的消息'
}
var sendData = JSON.stringify(messageData)
window.parent.postMessage(sendData, '*')

在调用postMessage方法时，第二个参数需要指定为’*'，表示任意域名都可以接收到消息。
uniapp的web-view组件的onMessage中的回调函数，只有在页面还没有被销毁前才会响应，因此需要在页面销毁前即可获得消息，如果需要在后退和分享时也能获得消息，则需要在生命周期函数onUnload中清理原有的web-view，再重新生成web-view，并在重新生成的web-view中监听消息。
在web-view中使用postMessage方法发送数据时，需要确保发送的数据是一个标准的JSON对象，避免其他数据格式的问题而导致消息无法被正确接收。

4.在web-view组件标签中设置onMessage属性，监听web-view中传过来的消息，并对其进行相应的处理：

<web-view src="https://example.com/h5page" @message="onMessage"></web-view>
export default {
  methods: {
    onMessage (event) {
      // 对从web-view中接收到的消息进行处理
      console.log('收到来自web-view的消息：', event.detail.data)
      // 将消息发送到uni-app中的事件总线
      EventBus.$emit('messageFromH5', event.detail.data)
    }
  }
}

这里的onMessage()方法通过监听web-view的message事件来实现对从web-view中传过来的消息进行处理。同时，将接收到的消息发送到uni-app页面中已经创建的事件总线中，以便不在内嵌的页面也能够接收消息。

到此这篇关于web-view内嵌H5与uniapp数据的实时传递的文章就介绍到这了,更多相关web-view内嵌H5内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

js获取对象中所有属性的四种方法
这篇文章主要给大家介绍了关于js获取对象中所有属性的四种方法,在JavaScript 中,我们可以通过不同的方法获取对象的属性,文中通过代码示例介绍的非常详细,需要的朋友可以参考下
2023-09-09
微信小程序身份证验证方法实现详解
这篇文章主要介绍了微信小程序身份证验证方法实现详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2019-06-06
js阻止冒泡和默认事件（默认行为）详解
这篇文章主要为大家详细介绍了js阻止冒泡和默认事件，即默认行为,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-10-10
js工具方法弹出蒙版
js工具方法弹出蒙版，需要的朋友可以参考一下
2013-05-05
Selenium执行Javascript脚本参数及返回值过程详解
这篇文章主要介绍了Selenium执行Javascript脚本参数及返回值过程详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2020-04-04
JavaScript Reduce使用详解
这篇文章主要介绍了JavaScript Reduce使用的相关资料，帮助大家更好的理解和学习使用JavaScript，感兴趣的朋友可以了解下
2021-03-03
javascript 防止刷新,后退,关闭
常常会用到的停留页面的操作.兼容IE,FF.实现代码如下。
2010-08-08
js离开或刷新页面检测(且兼容FF,IE,Chrome)
这篇文章主要介绍了js离开或刷新页面检测(且兼容FF,IE,Chrome)。需要的朋友可以过来参考下，希望对大家有所帮助
2014-03-03
JS+HTML5实现的前端购物车功能插件实例【附demo源码下载】
这篇文章主要介绍了JS+HTML5实现的前端购物车功能插件,结合完整实例形式分析了JS结合HTML5的storage特性存储数据实现购物车功能的相关操作技巧,并附带demo源码供读者下载参考,需要的朋友可以参考下
2016-10-10
JS实现简单打字测试
这篇文章主要为大家详细介绍了JS实现简单打字测试，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-06-06

web-view内嵌H5与uniapp数据的实时传递解决方案

目录

场景：

解决方案：

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具