对uniapp中的webview的理解

今天花了将近一天的时间去研究了一下uniapp中的webview组件的应用。说起webview，想必大家都不会陌生，开发小程序的朋友或多少都会用上。记忆之中，当时开发小程序的时候只是做了一个跳转，然后展示，并没有其他的。现在，再次拿来研究，新的东西还是蛮多的。<view class=""><web-viewsrc="http://www

爱敲代码的小冰

7990人浏览 · 2022-04-02 21:00:30

爱敲代码的小冰 · 2022-04-02 21:00:30 发布

今天花了将近一天的时间去研究了一下uniapp中的webview组件的应用。说起webview，想必大家都不会陌生，开发小程序的朋友或多少都会用上。记忆之中，当时开发小程序的时候只是做了一个跳转，然后展示，并没有其他的。现在，再次拿来研究，新的东西还是蛮多的。

//common.js
//大家可以把这个方法放到那公共文件那儿
export function getUrlStr(url, params) { //把url的参数用&符连起来
  if (!params) return url;
  let result = url + "?";
  params &&
    Object.keys(params).forEach(
      (item) => (result += `${item}=${params[item]}&`)
    );
  return result.slice(0, -1);
}

<!--一个最为简单的代码-->
<view class="">
	<web-view 
		src="http://www.vuestage.bnc/"
		@message="message"
		@onPostMessage="onPostMessage"
	>
	</web-view>
</view>

//这儿先引入刚common.js的函数

onLoad(opt) { //在h5端中会有些不同，在h5中要拿由h5端回来的数据是这样子弄的
	let url = getUrlStr(this.url,opt); //把url的参数用&符连起来
	// #ifdef H5
		window.addEventListener('message',function(e){
			if(e.data.data.name == "postMessage"){
				console.log(e.data.data.arg)
			}
		},false)
	// #endif

},

methods:{
	message(){//这儿就是接收到 webview跳转到h5页面后，由h5页面回来的数据
		console.log('接收到的消息：' + JSON.stringify(e.detail.data)); 
	},
	
},

<!--h5页面是长这样子的-->
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<div><button id="gotouni">goto uni</button></div>
	<!--这儿引入的js是固定的-->
	<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>
	<script type="text/javascript">
		function GetUrlParam() {//获取所有参数，并以对象形式存（这儿就是从unipp 那儿传来的参数）
		    let url = document.location.toString();
		    let arrObj = url.split("?");
		    let params = Object.create(null) 
		    if (arrObj.length > 1) {
		        arrObj = arrObj[1].split("&");
		        arrObj.forEach(item => {
		            item = item.split("=");
		            params[item[0]] = item[1]
		        })
		    }
		    return params;
		}


		document.addEventListener('UniAppJSBridgeReady',function(e){
			document.getElementById('gotouni').addEventListener('click',function(e){
				uni.getEnv(function(e){ //这儿就是拿到是从哪个环竟来到这个h5页面的。（比如说 app端，小程序端，或者是h5端 等等）
					console.log(e)
				})

				uni.reLaunch({//这儿是回到原来的端
					url:'/pages/index/index'
				})
				uni.postMessage({ //这儿是要传到原来端的数据，是固定写法
					data:{
						id:5,
						name:'苹果6',
						price:5606
					}
				})
				//uni.navigateBack(); //这儿是返回上一层（原来端）
			})
		})
	</script>
</body>
</html>