uniapp开发 App和h5通信

需求： 最近在用uniapp开发APP，碰到一个需求，在支付模块我们选择的支付方式是惠市宝，调用后台接口，会返回给前端一个h5的链接，即惠市宝支付台链接，前端拿到链接之后，把这个h5链接放在webview里面，用户在支付完成后，返回到app的支付结果页，这个时候就需要用到h5向app通信，传送消息

代码：

1. 下载uni.webview.1.5.4.js到本地，在main.js中引入，在h5页面调用uni.webView.postMessage向app传参；

// #ifdef H5
// 引入uni.webview.1.5.4.js
import '@/utils/webview/uni.webview.1.5.4.js';
// #endif

2. 通过后端接口，拿到惠市宝的h5支付台链接，并跳转到webView页面；

let params = res.dataObj.htmlStr.split('?');
this.$routers.push('/pages/webView/webView', {
	"url": params[0],
	"param": params[1]
});

3. webview页面中，在<web-view> 的 message 事件回调event.detail.data中接收H5发送给App的信息；

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

【示例】：这里拿到h5页面传递的参数，根据传参跳转不同的页面；

// 接收h5传递的消息
handleMessage(e) {
	console.log("触发handleMessage了", e, "----------------------");
	if(e.detail.data[0].page == 'index'){ //首页
		this.$routers.switchTab("/pages/index/main");
	}else if(e.detail.data[0].page == 'order'){ //订单列表
		this.$routers.replace("/pages/order/index/main");
	}
}

4. 在相应的H5页面通过postMessage来发送信息；
   【示例】：在当前h5页面，点击首页和查看订单分别回到APP的首页和订单列表页；
   

<view class="successButton">
	<view class="left" @click="goIndex()">首页</view>
	<view class="right" @click="goOrderList()">查看订单</view>
</view>

goIndex() {
	// #ifdef H5
	// h5向app传参 去首页
	uni.webView.postMessage({
		data: {
			page: 'index'
		}
	});
	// #endif	
},
goOrderList() {
	// #ifdef H5
	// h5向app传参 去订单列表
	uni.webView.postMessage({
		data: {
			page: 'order'
		}
	});
    // #endif
}