uniapp如何使用 web-view 与网页互相通信
更新时间：2024年07月17日 10:51:10 作者：以对_
这篇文章主要介绍了uniapp如何使用 web-view 与网页互相通信,在APP中使用 this.$scope.$getAppWebview() 获取webview对象实例,本文通过实例代码给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧
在APP中使用 this.$scope.$getAppWebview() 获取webview对象实例
通过evalJS可以为这个webview注入一段js，从而去调用网页中的对象
<template>
<view>
<web-view ref="webview" src="http://192.168.1.79:6446/demo.html" @message="handleMessage"></web-view>
</view>
</template>
<script>
var wv;
export default {
onLoad() {
var currentWebview = this.$scope.$getAppWebview(); //获取当前页面的webview对象
setTimeout(function() {
wv = currentWebview.children()[0];
}, 300); //如果是页面初始化调用时，需要延时一下
},
methods: {
// 接收网页中发送来的消息
handleMessage(evt) {
console.log('接收到的消息：' + JSON.stringify(evt));
this.evalJS()
},
evalJS() {
wv.evalJS(`
num+=1; // 网页中的变量
alertaa() // 网页中的事件
`)
}
}
}
</script>网页中调用uniapp的方法需要引入uni 的 SDK
<!-- 微信 JS-SDK 如果不需要兼容小程序，则无需引用此 JS 文件。 --> <script type="text/javascript" src="//res.wx.qq.com/open/js/jweixin-1.4.0.js"></script> <!-- uni 的 SDK，必须引用。 --> <script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.1.js"></script> <script>
在网页中调用uniapp中的postMessage方法，在 的 message 事件回调 event.detail.data 中接收消息。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button id="test">onPostMessage</button>
<p id="num"></p>
<!-- 微信 JS-SDK 如果不需要兼容小程序，则无需引用此 JS 文件。 -->
<script type="text/javascript" src="//res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
<!-- uni 的 SDK，必须引用。 -->
<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.1.js"></script>
<script>
var num = 1;
document.getElementById("num").innerText = num;
document.getElementById("test").onclick=()=>{
console.log('clickHandle :>> ', );
uni.getEnv(function(res) { // 使用getEnv可以判断当前环境
console.log("当前环境：" + JSON.stringify(res));
});
uni.postMessage({ // 调用uniapp中的postMessage方法
data: {
action: 'onPostMessage'
}
});
}
function alertaa() {
alert("evalJS"+num);
}
</script>
</body>
</html>到此这篇关于uniapp使用 web-view 与网页互相通信的文章就介绍到这了,更多相关uniapp网页互相通信内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
js无非就是script标签引入页面，但当项目越来越大的时候，单页面引入N个js显然不行，合并为单个文件减少了请求数，但请求的文件体积却很大2011-11-11
JavaScript高级程序设计 客户端存储学习笔记，在客户端用于存储会话信息2011-09-09
兼容Firefox的Javascript XSLT 处理XML文件
这篇文章主要介绍了兼容Firefox的Javascript XSLT 处理XML文件,需要的朋友可以参考下2014-12-12
最近由于公司需要研究了一下微信小程序的开发,特此记录一下小程序获取授权的流程,便于自己理解,下面这篇文章主要给大家介绍了关于如何通过大白话理解微信小程序获取授权的相关资料,需要的朋友可以参考下2022-12-12
这篇文章主要介绍了Javascript 获取鼠标当前的位置实现方法的相关资料,需要的朋友可以参考下2016-10-10
程序ColorGrads的作用是通过StartColor和EndColor生成颜色梯度集合。2009-03-03
这篇文章主要介绍了微信小程序实现顶部固定底部分页滚动效果，本文大概给大家分享三种解决方案，每种方案给大家详细剖析通过代码解析哪种方案更适合，感兴趣的朋友跟随小编一起看看吧2022-10-10
JavaScript中基本数据类型和引用数据类型是如何存储的呢？下面通过本文给大家分享js数据类型的存储方法，需要的朋友参考下吧2017-08-08
这篇文章主要介绍了JavaScript过滤字符串中的中文与空格方法汇总 的相关资料,需要的朋友可以参考下2016-03-03
javascript实现简约的页面右下角点击弹出窗口示例【测试可用】
这篇文章主要介绍了javascript实现的页面右下角点击弹出窗口功能,结合实例形式详细分析了javascript页面右下角点击弹出窗口功能的相关步骤、原理与注意事项,需要的朋友可以参考下2023-07-07
最新评论