今天花了将近一天的时间去研究了一下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>