当前位置：首页 > 网络编程 > JavaScript

如何使用uniapp内置组件webview消息传递详解

时间：2025-03-19 10:41:16 JavaScript 我要投稿

uni-app的web-view组件用于在应用中打开网页,并支持应用和网页之间的消息传递,这篇文章主要介绍了如何使用uniapp内置组件webview消息传递的相关资料,需要的朋友可以参考下

前言

web-view是uni-app的一个内置组件，可以在应用里打开指定的网页，应用和网页之间可以收发消息。

官方文档地址：官网>文档>组件>内置组件>web-view

1.调用uni.postMessage被告知方法不存在（uni.postMessage is not a function）

官方文档web-view有几个相关方法，**uni.postMessage(OBJECT)**的描述是：网页向应用发送消息:

如何使用uniapp内置组件webview消息传递详解(图1)

web-view是uniapp内置组件，并有自带的方法可以支持消息传递，考虑到uniapp本身可以发布成H5网页，所以就直接创建了一个新的uniapp项目，用来做跳转目标网页。

直接在新项目index页面测试：

<template>
	<button type="button" @click="sendMess">发送</button>
</template>

<script setup>
	const sendMess = (e) => {
		uni.postMessage({
			data: {
				action: 'message'
			}
		});
	}
</script>

<style lang="scss" scoped>
</style>

然后在应用里添加web-view，指向目标网页：

<web-view src="https://www.jb51.net/目标网页" @message="消息接收方法"></web-view>

在手机上测试可以正常打开网页，但是点击按钮，调用uni.postMessage方法时报错：

TypeError: uni.postMessage is not a function

这里先试用了uniapp其他几个常用的内置API，比如uni.showToast(OBJECT)，来证明内置的方法有正常加载，点击按钮，结果正常运行：

	uni.showToast({
		title: '标题',
		duration: 2000
	});

重新阅读文档，发现在web-view加载HTML网页的示例中，引入了一个uni.webview.js文件，因为这个示例是个传统的HTML页面，之前以为用的是内置方法就忽略了：

如何使用uniapp内置组件webview消息传递详解(图2)

把文件下载下来，下载地址文档上有提供，当前最新是1.5.6：
https://gitcode.net/dcloud/uni-app/-/raw/dev/dist/uni.webview.1.5.6.js在网页项目的main.js文件中对文件进行引用：

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

重新点击按钮，问题仍然存在，但是把uni对象打印出来，前后对比发现多了一个webView，展开就看到了相关方法：

如何使用uniapp内置组件webview消息传递详解(图3)

所以发送方法改成：

<script setup>
	const sendMess = (e) => {
		uni.webView.postMessage({
			data: {
				action: 'message'
			}
		});
	}
</script>

消息正常发送并接收。

2.H5无法接收消息

上边用手机测试通过，但在浏览器中进行访问，就接收不到消息：

官方文档中有标示：

如何使用uniapp内置组件webview消息传递详解(图4)

根据文档需要用window.postMessage，这个方法之前使用，是在web网页中嵌套iframe，父子页面通信的时候，文档上可以看到组件会被转成iframe：

如何使用uniapp内置组件webview消息传递详解(图5)

注意：这里只要修改应用这边（变成浏览器访问之后就是父级页面这里），需要以window.addEventListener监听消息，网页端也就是子级不需要修改。

<template>
	<view>
		<web-view src="https://www.jb51.net/目标网页" @message="listenMess"></web-view>
	</view>
</template>

<script setup>
	import {
		onBeforeUnmount
	} from "vue";
	import {
		onLoad
	} from "@dcloudio/uni-app";
	const listenMess = (e) => {
		console.info(e);
	}
	onLoad(() => {
		// #ifdef H5
		window.addEventListener('message', listenMess, false);
		// #endif
	});
	onBeforeUnmount(() => {
		// #ifdef H5
		window.removeEventListener("message", listenMess);
		// #endif
	});
</script>

<style lang="scss" scoped>

</style>

使用方法window.addEventListener监听消息，添加window.removeEventListener防止监听重复执行，需要注明只在H5情况下执行，否则手机应用会报错：

TypeError: Cannot read property 'addEventListener' of undefined

3.根据官方文档中的示例编写HTML页面

官方文档示例是一个传统的HTML页面，写个简单的页面用nginx发布出来（web-view仅支持加载网络网页，不支持本地html），作为目标网页试一下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>测试</title>
  </head>
  <body>
    <button id="sendMess">发送</button>
    <script type="text/javascript" src="https://www.jb51.net//uni.webview.1.5.6.js"></script>
    <script type="text/javascript">
      document.getElementById('sendMess').addEventListener('click', function() {
        uni.postMessage({
          data: {
            action: 'message'
          }
        });
      });
    </script>
  </body>
</html>

注意：这里是uni.postMessage，和uniapp项目中调用不同。

经测试消息可以成功传递。

然后文档上还写到uniapp项目里也能加载html网页，只要把文件放在/hybrid/html中：

如何使用uniapp内置组件webview消息传递详解(图6)

写个html放进去，uni.webview.1.5.6.js放到js路径里：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport"
			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>测试</title>
	</head>
	<body>
		<button onclick="sendMess()">发送</button>
		<script src="https://www.jb51.net//hybrid/html/js/uni.webview.1.5.6.js"></script>
		<script type="text/javascript">
			function sendMess() {
				uni.postMessage({
					data: {
						action: 'message'
					}
				});
			}
		</script>
	</body>
</html>

经测试消息可以成功传递。

4.VUE项目作为网页端调用uni.postMessage方法

因为之前有个vue2的项目里有相应功能网页，就拿来用做目标，然后在依赖库里搜到了@dcloudio/uni-webview-js，就没用上边的js，直接安装引入之后，实测可以正常使用：

<template>
    <el-button type="primary" @click="sendMess">发送</el-button>
</template>
<script>
import uniWebview from '@dcloudio/uni-webview-js'
export default {
    components: {
        uniWebview
    },
    methods: {
        sendMess() {
            uniWebview.postMessage({
                data: { action: 'message' }
            });
        }
    }
}
</script>

<style></style>

总结

到此这篇关于如何使用uniapp内置组件webview消息传递的文章就介绍到这了,更多相关uniapp内置组件webview消息传递内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！

上一篇：ES6 迭代器 Iterator使用总结

下一篇：基于JS实现右侧缓慢弹窗动态效果

如何使用uniapp内置组件webview消息传递详解相关文章

如何使用uniapp内置组件webview消息传递详解

目录

前言

1.调用uni.postMessage被告知方法不存在（uni.postMessage is not a function）

2.H5无法接收消息

3.根据官方文档中的示例编写HTML页面

4.VUE项目作为网页端调用uni.postMessage方法

总结