web-view 父与子通信

1.子传父:

子页面(发送):

window.parent.postMessage({
        status: 'ok',
        params: {
                data1: this.data1, 
         }

},'*')

父页面(接收):

mounted或created:

window.addEventListener("message", this.handleMessage);

handleMessage(event) {
        console.log("接受参数后event", event);

        if(event.data.status == "ok") {

                console.log(""数据为", event.data.params.data1)

        }     
},

2.父传子

父页面(发送):

window.frames[0].postMessage({
        status: 'sendMessage',
        params: {

                data2: '121'

        }
}, '*')

子页面(接收):

//可以写在对应页面或者app.vue中

window.addEventListener('message', (event) => {
        if(event.data.status == 'sendMessage') {
                console.log("子组件收到消息:1", event);
                console.log("event.data", event.data);
        }        
}, false);

最后,对于h5存入缓存,进程杀死后,缓存被清除的问题 提供一个小思路:

以登录token举例:

1.登录后获取token后 将token发送给父页面

2.父页面做存储处理

3.父页面webview执行onload函数,并将token传递给子页面

4.子页面接收后进行后续操作