uniapp使用 web-view 与网页互相通信

在APP中使用 this.$scope.$getAppWebview() 获取webview对象实例

通过evalJS可以为这个webview注入一段js,从而去调用网页中的对象

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 中接收消息。

html 复制代码
<!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>
相关推荐
Smile_Gently2 小时前
前端:最简单封装nmp插件(组件)过程。
前端·javascript·vue.js·elementui·vue
nihui1237 小时前
Uniapp 实现顶部标签页切换功能?
javascript·vue.js·uni-app
luckycoke8 小时前
小程序立体轮播
前端·css·小程序
一 乐8 小时前
高校体育场管理系统系统|体育场管理系统小程序设计与实现(源码+数据库+文档)
前端·javascript·数据库·spring boot·高校体育馆系统
懒羊羊我小弟8 小时前
常用Webpack Loader汇总介绍
前端·webpack·node.js
祈澈菇凉9 小时前
ES6模块的异步加载是如何实现的?
前端·javascript·es6
我爱学习_zwj9 小时前
4.从零开始学会Vue--{{组件通信}}
前端·javascript·vue.js·笔记·前端框架
顾比魁9 小时前
XSS盲打:当攻击者“盲狙”管理员
前端·网络安全·xss
黑客老李9 小时前
新手小白如何挖掘cnvd通用漏洞之存储xss漏洞(利用xss钓鱼)
java·运维·服务器·前端·xss
晚风予星9 小时前
简记|LogicFlow自定义BPMN元素节点
前端