h5 和 原生的双向交互

项目有可能是原生的app 中嵌入 h5 的页面，但是二者之间的数据交互对于我这个初次接触的小白来说刚开始的时候有些不知所措，还好安卓同事是一个经验丰富的的小伙伴，我们一起按照他往常的经验开始调试。

判断设备环境

在 h5 页面怎样判断是否是安卓还是iOS 呢？

此时需要 app 设置 userAgent H5 需要 获取 userAgent ,然后作出判断就可以。

const  ua = userAgentInfo.toLowerCase();
if (ua == 'android') {    
    return 'android';} else if(us == 'ios'){    
    return 'ios';
}

应用场景

场景一：h5 通知 app  h5自己正在做的操作。

比如 h5 自己从 页面 a 跳转到 页面 b ,此时app 就需要此刻 web view 中正在承载的是哪一个具体的页面，那么在使用 app 原生的返回事件的时候才可以正确的操作。

操作就是 h5 执行  document.loacation.href ='js://str'  app 同事 进行拦截同时还可以进行 参数的拼接，达到传递参数的目的

callAppShare(str) {    document.location = 'js://str?str=' + str;},

场景二 ：分享文字。

从原生中的分享按钮跳转一个h5页面，页面内容需要分享出去，我经历的是只分享文字，那么此时就需要 h5 将分享的文案 进行格式加工（ 换行和空行 ），通过 和 app 的交互函数将文案传递给app 。

交互方式同上，h5 只是在传递文案的时候需要将整段的数据进行一个 encodeURI(str)确保一些特殊字符 比如换行符 在浏览器中的传递没有被编译，那么接受信息的app 同事需要进行一个解析，然后通过原生的分享功能将文案分享出去就可以了。

app 传递数据给 H5

以上都是 h5 主动和 app 的交互，那么有些时候需要 app 打开 h5 页面的时候需要传递给 h5 一些数据，该则么做呢 ？

以下是 h5 接收操作 ：

安卓 ：

vue 中使用
methods :{
    callAndroidGetInfo() {    
        let appBackData = window.prompt('js://getInfo');
        let vueCanUseData = JSON.parse(appBackData);
    }
}，
created(){
    this.callAndroidGetInfo()
}

步骤 

1 、h5 通过 window.prompt 的发起 ；

2、 安卓原生进行 拦截，传递数据到 h5 ；

3 、h5 获取数据 ；

4 、转换数据格式 ，接下来就是 h5 的页面常规操作。

IOS 

vue 中使用
methods : {
    // h5 主动发起的函数
    callIosGetInfo() {    
        window.location.href = "js://getInfo";   
    } ,
    
    // ios  通过调用此函数 返回 数据给到 h5 
    iosCbkInfo(info) {    
        this.profile = info;   
    },
}

步骤 

1 、h5 发起 callIosGetInfo ，通知 iOS 我需要获取数据 ；

2 、iOS 调用 iosCbkInfo 将数据返回；

3 、h5 接收数据 。

前提：h5需要将 iosCbkInfo 放到window 中，iOS 才可以调用

vue 中
created(){
    window.iosCbkInfo = this.iosCbkInfo;
    this.callIosGetInfo();
}

记录下来，方便以后查看！