uniapp之app内页面和html页面进行消息互通

uniapp之pages文件夹下的vue页面和hybird文件夹下的html页面进行消息互通。

1 已知三个页面：

app内pages下的web-view页面 和 保存信息的Save页面。hybird下的html页面。

其中web-view页面通过<web-view :src="html页面路径" ></web-view>挂接html页面。

2 实现功能：

在html页面中有一个弹窗，点击弹窗中的保存按钮，跳转到app内保存信息的Save页面，保存成功后，将成功信息回传到html页面，并关闭弹窗。

3 实现过程：

1、html页面中,通过以下方法跳转到app内保存信息的Save页面，同时将数据传到Save页面。

uni.navigateTo({
    url: `/pages/save/save?data=${JSON.stringify(data)}`
});

2、app内保存信息的Save页面中，将数据保存成功后，调用以下方法，返回app内挂载了html页面的web-view页面。

// 获取页面栈
let pages = getCurrentPages()

// 获取上一页栈
let prevPage = pages[pages.length - 2]

// 触发上一页 upData 函数(并携带参数)
prevPage.$vm.upData(JSON.stringify(msg))

// 返回上一页
uni.navigateBack({
	delta: 1
})

3、 app内web-view页面中，通过以下方法，监听上一页（即Save页面）发送来的指令，并调用html中的postJS方法，将数据传递到html页面中。

/*
 * 监听上一页发送的更新指令
 * @param {String} msg - 新值
 * @return void
*/
upData: function(msg) {
	// console.log(msg);
	// #ifdef APP-PLUS
	if (wv == null) { // wv 定义在export default 外面
		var currentWebview = this.$scope.$getAppWebview();
		wv = currentWebview.children()[0]; 
	}
    //调用html中的postJS方法，将数据传递到html页面中
	wv.evalJS(`vueINS.postJS('${msg}')`);
	// #endif
}

4、html页面中postJS方法,因为使用了vue，postJS方法在vue中，所以使用上面的调用方法，如果

postJS方法是直接写在<script type="text/javascript"></script>中的，可以直接调用。至此，html页面收到了来自Save页面的保存成功消息，可以根据收到的消息关闭弹窗了。

var vueINS = new Vue({
    el: '#vue_Container',
	data: {},
    mounted() {},
    methods: {
        // 处理来自web-view页面的数据
		postJS(msg) {
			//console.log(msg);
			msg = JSON.parse(msg);
        }
    }
})