首页 > 网络编程 > JavaScript > javascript类库 > vue.js > uni-app webview通信

uni-app之webview通信实现方法示例

2025-07-17 09:15:13 作者：Pearson

UniApp凭借其跨平台开发的显著优势,成为众多开发者构建多端应用的首选框架,这篇文章主要介绍了uni-app之webview通信的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下

1 背景

在uni-app开发中，常见的一种场景是主应用通过web-view组件加载子应用的H5页面。为便于描述，我们将主应用称为App，子应用称为H5站点。两者均采用uni-app+Vue技术栈：主应用通过HBuilderX云打包生成原生App（如Android的APK包），子应用则通过HBuilderX发布为H5站点。当主应用加载H5页面时，web-view会占据整个手机屏幕。此时，若需通过物理按键或H5页面的返回按钮返回主应用，则需实现应用间通信，由H5站点向主应用发送关闭web-view实例的请求。

2 技术方案

经过分析，我确定了两种可行的技术方案。第一种方案利用web-view组件的消息机制：子应用通过调用postMessage向主应用发送消息，主应用监听message事件，并在消息处理函数中执行web-view的关闭操作。第二种方案则采用服务器中转机制：主应用和子应用均通过WebSocket连接至中转服务器，实现命令的发送与接收。相较而言，第二种方案实现复杂度较高，且易受网络环境影响。因此，本文将采用第一种方案进行实现。

3 实现

3.1 子应用实现

下载uni.webview.1.5.6.js

在子项目中，下载uni.webview.js，我使用的是uni.webview.1.5.6.js,下载地址为：

https://gitcode.net/dcloud/uni-app/-/raw/dev/dist/uni.webview.1.5.6.js

将下载完成的uni.webview.1.5.6.js文件复制到项目的目录/static/js/目录下（如果目录不存在，则可以手动创建这个目录）。

引用

修改main.js, 添加对uni.webview.1.5.6.js的引用：

import '/static/js/uni.webview.1.5.6.js'

调用postMessage

在需要返回主应用的地方，添加如下代码

if(uni.webView) {
	console.log("支持uni.webview", uni.webView);
	uni.webView.postMessage({
		data: {
			action: 'backToPlatform'
		}
	});
} else {
	console.log("不支持uni.webview");
}

3.2 主应用实现

模版

<web-view
	 :embed="true" 
	 :src="imViewUrl" 
	 @message="handleMessage" 
/>

export default {
	//其他代码
	methods: {
		handleMessage(e) {
			if(e && e.detail && e.detail.data && e.detail.data.length > 0) {
				const { action } = e.detail.data[0];
				if(action == 'backToPlatform') {
				//在这里，我们可以通过显隐条件或refs对象的操作来关闭web-view
				}
			}
		},
	}
	//其他代码

3.3 主应用发送消息到H5

app端

var currentWebview = that.$parent.$scope.$getAppWebview()
currentWebview.children()[0].evalJS(`onMicrophonePermResult(${res ? 'true' : 'false'})`);

h5段

	mounted() {
		// 将方法挂载到 window，供主应用调用
		window.onMicrophonePermResult = (result) => {
			console.log("onMicrophonePermResult result=", result)
		};
	},

总结

到此这篇关于uni-app之webview通信实现的文章就介绍到这了,更多相关uni-app webview通信内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！