uni-app 中 web-view 组件集成与双向通信详解

//如果不暂存在本地，会在浏览器上被转译
uni.setStorageSync('PAYWEBURL', res.data.data.url)//考虑到所传网址需要转译吗（不需要）
// let enUrl = encodeURIComponent(res.data.data.url)//转译
uni.navigateTo({
    //url: '/pages/cashier/payapp'+enUrl//需要在调转页里转译回去
    url: '/pages/cashier/payapp'//如果不需要转译先把网址暂存在本地，在跳转页面里取出，防止浏览器转译
})

<template>
  <view>
     <web-view @message="getMessage" :src="webViewUrl"></web-view>
  </view>
</template>
<script>
	export default {
		data() {
		  return {
            webViewUrl: ''
          }
		},
    onLoad() {
      // this.webViewUrl = decodeURIComponent(options.url)// 传过来的值是转译过的，需要转回原值
      this.webViewUrl = uni.getStorageSync('PAYWEBURL')//如果是不需要转译的，直接获取
      console.log(this.webViewUrl)
    },
		methods: {
			getMessage(e) {
			  console.log('webView传递过来的消息',e)
			}
		}
	}
</script>

<!-- 用于支付结束后跳转app -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>web-view</title>
//重点，一定要引入
  <script src="./js/uni.webview.1.5.4.js"></script>
</head>
<body>
</body>
<script>
	document.addEventListener('UniAppJSBridgeReady', function() {
	  uni.getEnv(function(res) {
	    console.log('当前环境：' + JSON.stringify(res));//判断当前是在网页还是app还是小程序
	  })
    //在网页做什么，（跳转到指定页）
    uni.redirectTo({
      url:'/pagesOrder/order/list'
    })
	})
</script>
</html>

<template>
	<view class="advertisement" style=" 100%;">
		<web-view :src="url" @message="message"></web-view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			url:'/hybrid/html/local.html?data='
		};
	},
	onLoad(data) {
　　　　　　　　　　//这里对要传入到webview中的参数进行encodeURIComponent编码否则中文乱码
		this.url+=encodeURIComponent(data.data)
	},
	mounted() {},
	methods: {
		message(event){
			console.log(event.detail.data);
		}
	}
};
</script>
<style scoped="scoped" lang="scss">
@import './advertisement.scss';
</style>

console.log(getQuery('data'));  //获取 uni-app 传来的值
            //取url中的参数值
            function getQuery(name) {
                // 正则：[找寻'&' + 'url参数名字' = '值' + '&']（'&'可以不存在）
                let reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
                let r = window.location.search.substr(1).match(reg);
                console.log(r);
                if(r != null) {
                    // 对参数值进行解码
                    return decodeURIComponent(r[2]);
                }
                return null;
            }

<script>
    document.addEventListener('UniAppJSBridgeReady', function() {
        //向uniapp传值
        uni.postMessage({
            data: {
                action: 'message'
            }
        });
        uni.getEnv(function(res) {
            console.log('当前环境：' + JSON.stringify(res));
        });
    });
</script>    

//message接受方法
<template>
    <view class="advertisement" style=" 100%;">
        <web-view :src="url" @message="message"></web-view>
    </view>
</template>