uniapp 与H5通信实操

最新推荐文章于 2025-06-24 22:39:30 发布

前端小菜鸡ππ队

最新推荐文章于 2025-06-24 22:39:30 发布

阅读量3.5k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端总结文章标签： uni-app javascript 前端

本文链接：https://blog.csdn.net/jkhedge/article/details/128715363

前端总结专栏收录该内容

18 篇文章

订阅专栏

在App开发中，经常需要在app内嵌入H5页面并实现两者之间的通信。通过WebView组件，可以监听message事件来接收H5通过postMessage发送的信息。H5端需要引入uni.webview.js库，并在合适时机调用postMessage方法传递数据。通过在main.js中注册全局变量，可以简化uni-app中对uni对象的调用，便于后续编码工作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在app项目中，经常会遇到app 嵌套H5页面的需求，进而app与H5之间需要进行通信。

在app中是通过webview来实现，app中与H5交互的页面中html中代码如下：

<web-view :src="webviewSrc" :webview-styles="webviewStyles" @message='getMessage'></web-view>

通过绑定message方法来接收H5发送给App的信息

getMessage(mes){
	console.log('-------message-----：',JSON.stringify(mes))
}

在相应的H5页面通过postMessage来发送信息

document.addEventListener("UniAppJSBridgeReady", function() {
	uni.postMessage({
		data: {
			action: 'H5来了'
		},
	})
});

但是需要做一些准备公共，首先，要在相应的H5包中引入uni.webview.1.5.4，此处只说通过引入该js文件的方式引入。下载该js文件，放在项目中，在main.js文件中引入该js文件即可

import * as uni from './js_sdk/uni.webview.1.5.4.js'

为了方便使用，可以在引入之后注册全局变量

document.addEventListener("UniAppJSBridgeReady", function() {  
    Vue.prototype.myUni = uni  
});

后续使用的时候会简化代码

this.myUni.webView.postMessage({
					data: {
					  action: 'H5来了'
					},  
				});

实现通信之后，我们就可以进行其他的编码工作了