如何使用uniapp内置组件webview消息传递详解
前言
web-view是uni-app的一个内置组件，可以在应用里打开指定的网页，应用和网页之间可以收发消息。
官方文档地址：官网>文档>组件>内置组件>web-view
1.调用uni.postMessage被告知方法不存在（uni.postMessage is not a function）
官方文档web-view有几个相关方法，**uni.postMessage(OBJECT)**的描述是：网页向应用发送消息:
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="目标网页" @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页面，之前以为用的是内置方法就忽略了：
把文件下载下来，下载地址文档上有提供，当前最新是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，展开就看到了相关方法：
所以发送方法改成：
<script setup>
const sendMess = (e) => {
uni.webView.postMessage({
data: {
action: 'message'
}
});
}
</script>
消息正常发送并接收。
2.H5无法接收消息
上边用手机测试通过，但在浏览器中进行访问，就接收不到消息：
官方文档中有标示：
根据文档需要用window.postMessage，这个方法之前使用，是在web网页中嵌套iframe，父子页面通信的时候，文档上可以看到组件会被转成iframe：
注意：这里只要修改应用这边（变成浏览器访问之后就是父级页面这里），需要以window.addEventListener监听消息，网页端也就是子级不需要修改。
<template>
<view>
<web-view src="目标网页" @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="/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中：
写个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="/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消息传递内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
下面小编就为大家分享一篇基于vue中css预加载使用sass的配置方式详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
这篇文章主要介绍了如何使用fetchEventSource实现sse流式请求问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-08-08
这篇文章主要介绍了vue+elementUI中el-radio设置默认值方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-12-12
解决echarts图表使用v-show控制图表显示不全的问题
这篇文章主要介绍了解决echarts图表使用v-show控制图表显示不全的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
我们经常需要在Vue搭建的后台管理系统里进行数据导入导出等操作,下面这篇文章主要给大家介绍了关于Vue实现数据导出导入实战案例的相关资料,需要的朋友可以参考下2023-01-01
这篇文章主要介绍了Vue学习之axios的使用方法,结合实例形式分析了vue.js axios库的功能及网络请求相关操作技巧,需要的朋友可以参考下2020-01-01
react在中后台项目中由于在处理复杂的业务逻辑或组件的复用问题比vue优雅而被人认可，但也更需要团队技术整体比较给力，领头大佬的设计与把关能力要更优秀，因此开发成本更大，下面文章就来详细介绍,需要的朋友可以参考下2021-09-09
本文主要介绍了使用Vite搭建vue3+TS项目的实现步骤，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-01-01
这篇文章主要介绍了vue3中如何使用ts，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-05-05
Vue CLI是一个基于Vue.js进行快速开发的完整系统,下面这篇文章主要给大家介绍了关于Vue cli3.0创建Vue项目的相关资料,文中通过图文介绍的非常详细,需要的朋友可以参考下2022-08-08
最新评论