快捷導(dǎo)航

uniapp如何使用 web-view 與網(wǎng)頁互相通信

更新時間：2024年07月17日 10:51:10 作者：以對_

這篇文章主要介紹了uniapp如何使用 web-view 與網(wǎng)頁互相通信,在APP中使用 this.$scope.$getAppWebview() 獲取webview對象實例,本文通過實例代碼給大家介紹的非常詳細,感興趣的朋友跟隨小編一起看看吧

在APP中使用 this.$scope.$getAppWebview() 獲取webview對象實例
通過evalJS可以為這個webview注入一段js，從而去調(diào)用網(wǎng)頁中的對象

<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(); //獲取當(dāng)前頁面的webview對象    
			setTimeout(function() {  
				wv = currentWebview.children()[0];  
			}, 300); //如果是頁面初始化調(diào)用時，需要延時一下 
		},
		methods: {  
      // 接收網(wǎng)頁中發(fā)送來的消息
			handleMessage(evt) { 
				console.log('接收到的消息：' + JSON.stringify(evt));  
				this.evalJS()
			},
			evalJS() {
				wv.evalJS(`
					num+=1; // 網(wǎng)頁中的變量
					alertaa() // 網(wǎng)頁中的事件
				`)
			}
		}  
	}  
</script>

網(wǎng)頁中調(diào)用uniapp的方法需要引入uni 的 SDK

<!-- 微信 JS-SDK 如果不需要兼容小程序，則無需引用此 JS 文件。 -->  
<script type="text/javascript" src="http://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>

在網(wǎng)頁中調(diào)用uniapp中的postMessage方法，在的 message 事件回調(diào) 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="http://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可以判斷當(dāng)前環(huán)境
        console.log("當(dāng)前環(huán)境：" + JSON.stringify(res));
      });
      uni.postMessage({  // 調(diào)用uniapp中的postMessage方法
        data: {  
            action: 'onPostMessage'  
        }  
      });  
    }
    function alertaa() {
      alert("evalJS"+num);
    }
  </script>
</body>
</html>

到此這篇關(guān)于uniapp使用 web-view 與網(wǎng)頁互相通信的文章就介紹到這了,更多相關(guān)uniapp網(wǎng)頁互相通信內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: