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 的发起 ；

二、 安卓原生进行 拦截，传递数据到 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();
}复制代码

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