关于uniapp webview页面与小程序之间传值_uniapp在网页中使用webview发送消息给小程序

最近项目有遇到 小程序内嵌套webview的场景，整站嵌套的，这样就避免不了H5和小程序之间通信，小程序用的uniapp写的，H5是用vue写的，

首先在H5页面引入微信的JS

 <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>

然后再引入uniapp 的JS

    <script src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>

然后在H5页面 因为我的H5是用VUE写的 所以这段代码要放在VUE的mounted钩子函数里执行

  document.addEventListener('UniAppJSBridgeReady', function() {
       uni.postMessage({
            data: {
                options:'来自H5的问候'
            }
        });
        uni.getEnv(function(res) {
            console.log('当前环境：' + JSON.stringify(res));
        });
    });

 uni.postMessage({
            data: {
                 options:'来自H5的问候'
            }
        });

这个就是H5页面向uniapp页面传值的方法 要传的值一定要写到data里面！！！！！；

这样H5 就布置完了 主要是uniapp 端取值

先附上uniapp webview的文档 https://uniapp.dcloud.io/component/web-view

如文档所说的 在webview标签上绑定 @message,来获取H5传来的值

			getMessage(e) {
            console.log(e)
            let data = e.detail.data
		 },

这样还不行！！！！ 

因为绑定的方法getMessage只有在特定情况下才被会调用

 分享不适合我现在的需求  销毁。。没试，我是在后退这个时机调用取值的

首先把webview页面复制一份，一毛一样的，第一个webview 标签上不绑定message，在复制的webview页面绑定message 取值

第一个webview

	 <web-view :src="src"></web-view>

复制的webview

	 <web-view :src="src" @message="getMessage"></web-view>

然后在第一个webview页面里让页面一加载完就跳到复制的webview页面，额。。要加个判断条件 不然两个页面一直互跳...

 
 
 
//主webview
 
<template >
	<view>
		 <web-view :src="src"></web-view>
 
	</view>
</template>
 
 <script>
	export default {
 
		data() {
			return {
				src:'https://xxxx',
			    nav:true,
			};
		},
		onLoad(options) {
		if(this.nav){
			this.navto()
		}
 
	},
	methods:{
			navto(){
			uni.navigateTo({
				url:'../nwebview/nwebview'
			})
			},
		
		}
	}
</script>

然后进入复制的webview

<template >
	<view>
		 <web-view :src="src" @message="getMessage"></web-view>
 
	</view>
</template>
 
<script>
	export default {
	
		data() {
			return {
				src:'https:xxx',
				
			};
		},
		onLoad(options) {
		
			setTimeout(()=>{
					this.navto()
			},3000)
		
	},
 
		methods:{
			navto(){
				var pages = getCurrentPages();
				var currPage = pages[pages.length - 1];   //当前页面
				var prevPage = pages[pages.length - 2];  //上一个页面
//				然后改变第一个webview的nav状态 ，这样返回之后就不会再次跳过来了
				prevPage.nav = false;
				uni.navigateBack({
					delta:1
				})
			},
			getMessage(e) {
			console.log(e.detail.data)
			
			
	
			},
		}
	}
</script>
 

这样从第一个webview跳过来后 再使用navigateback就达到@message的调用条件了 其他细节就不说了

这样就可以通过getMessage方法来获取H5   传来的值了，

uniapp 给H5传值更简单  只要在webview的src地址上拼接就行了