app（ios、安卓）与h5交互的原理：
1、app向h5发送信息：调用window下的全局方法并向方法内传参
2、h5向app发送信息：以url跳转的形式完成，app会拦截h5的链接跳转，当监测到特定的url时，即触发h5与app的交互，如window.loacation.href = 'http://appName.local.com?action=actionName'，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 = `http://appName.local.com?action=webPushUserInfo&id=${id}` // es6的字符串拼接写法
}
}注意：因为h5与app交互是通过url跳转的形式实现的，因此此交互与普通url跳转前后触发时，会出现一些问题。例：
window.location.href = 'http:/appName.local.com?action=actionName'
window.location.url = 'http://www.google.com'问题：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钩子后发生的，这个原生的方法还是很棒的，完美解决~！