app（ios、安卓）与h5交互的原理：

1、app向h5发送信息：调用window下的全局方法并向方法内传参

2、h5向app发送信息：以url跳转的形式完成，app会拦截h5的链接跳转，当监测到特定的url时，即触发h5与app的交互，如window.loacation.href = ''，action即为app端定义的交互方法名

app主动与h5交互

因为h5需要提供全局方法，普通html文件直接在window下挂一个方法即可，如：

window.fn = function(json){

// js

注意：

1、vue中的方法通常是写在vue实例的methods中的，app无法直接调用，此时在页面的mounted钩子里将方法挂在window下即可，注意直接放在created钩子里不行，可加1s延时，因为此时vue模板还未编译/挂载完成，例：

methods:{

getUserInfo(json){

this.userId = JSON.parse(json).id;

}

}

mouted(){

window.userInfo = this.getUserInfo;

}

这样，app便可在页面加载完成后主动调用h5页面的方法实现数据传递或操作

2、app向h5发送的消息一般是进行过URI编码的，有些数据h5获取到后无法直接使用，如汉字等，需要进行URI解码，decodeURIComponent(str)即可。

h5主动与app交互

h5与app交互较简单，以url跳转的形式即可，将app需要的参数以query的形式携带在url后面，如：

methods:{

setUserInfo(id){

window.location.href = `;id=${id}` // es6的字符串拼接写法

}

}

注意：因为h5与app交互是通过url跳转的形式实现的，因此此交互与普通url跳转前后触发时，会出现一些问题。例：

window.location.href = 'http:/appName.local.com?action=actionName'

window.location.url = ''

问题：1、app无法接受到h5的消息 2、h5无法返回上一页，点击右上角回退按钮会直接退出浏览器环境（webview）

猜想：交互与信息传递需要时间，交互还未完成就跳转新页面，阻止了之前的交互

解决方案：尽量不要与app交互的同时进行url跳转

由交互引发的对vue生命周期的思考

开发时遇到一个经典问题，需要在页面刚载入时与app交互判断是否显示一个弹窗。看似很简单，进入页面调一个交互方法即可，但这个需求的解决经历了几个步骤：

1、created

因为created时，实例就创建完成了，我开始的选择是在此生命周期挂载方法并调用交互，结果：页面闪退，猜测：实例虽有，但模板未编译挂载，app调用方法失败导致闪退

2、mounted

第二次将挂载和调用写在了mounted内，结果：页面闪退，猜测（误）：挂载和调用靠的太近，可能方法未挂载完就直接调用，导致闪退

3、created+mounted

created内挂载方法，mounted内调用交互，结果：我的ios12无异常，几乎以为成功时，ios10还是发生了闪退，猜测ios12的webview对此问题进行了优化，考虑兼容性，方案不可行。

4、延时

猜测是window没有加载完便调用了window下的方法，导致闪退，对交互方法加了1s延时，成功！但体验一般，因为硬性的定时容易引发许多不可控的问题，而且弹窗延时的存在导致用户体验低下。

4、window.onload

onload 事件会在页面或图像加载完成后立即发生。mounted钩子里添加代码window.onload=function(){//调用交互}，在window加载完成以后触发交互，而且此时间节点在vue的生命周期是不存在的，也是在mounted、created钩子后发生的，这个原生的方法还是很棒的，完美解决~！