微信小程序web-view与H5交互：监听H5向小程序postMessage传值

我们都知道web-view 向H5传值只需在url里带过去参数就好，但是H5要向小程序传值时却颇有问题。

一是postMessage不能被实时监控，导致小程序内不能实时拿到H5发来的值；

二是页面跳转时的正向和反向传值。

首先是postMessage的实时监控问题，微信官方说只有在特定时机（小程序后退、组件销毁、分享）触发并收到消息，显然是不实用的，那么我们只能变相解决。

1、如果是要接收H5抛出来的值，再在当前页面做弹框或请求接口，这中情况可以将弹框或接口请求写到H5里面去，在网页端处理；

2、如果是H5抛出值之后要页面跳转到下一页或返回，也就是正向和反向传值+跳转问题，请看以下。

正反向传值+页面跳转：

var userAgent = navigator.userAgent;
// 是否是微信小程序
var isMini = /miniProgram/i.test(userAgent);


//1.正向传值，通过URL传参，加JSSDK的接口跳转

if(isMini){
	var miniData = {
		type: 'docServe',
		groupCheckId: gId
	}
	wx.miniProgram.navigateTo({
		url: '../groupService/groupService?data=' + JSON.stringify(miniData)
	})
}else{
	// 不是微信小程序
}


//2.反向传值，通过postMessage，加JSSDK的接口返回

if(isMini){
	wx.miniProgram.postMessage({
		data: {
			date: dat
		}
	});
	wx.miniProgram.navigateBack();
}else{
	// 不是微信小程序
}

值得注意的是，反向传值方法中使用了navigateBack，这就使得满足了postMessage触发的时机之一，在小程序后退时触发。

所以后退时会先触发并捕获postMessage之后，再执行返回动作，这里还需将捕获到的值传到上一页。这里有三种方法：

1、利用getCurrentPages()获取页面栈，直接给上一个页面的变量赋值；

2、利用小程序缓存API保存，返回之后在onShow生命周期内获取刷新；

3、利用getApp().globalData设置全局变量。

 

另外，H5反向传值给小程序应该也可以是用URL传值，即是用JSSDK接口redirectTo，可是设置url传值重新打开上一页，不过此方法会导致上一页重新加载，也就是会导致之前录入的信息被刷新，看情况使用。