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