前端H5与安卓和ios之间通讯

在一些app场景中，常常看到app里面嵌套H5页面， 安卓和ios提供一个空壳子，方法二者互相调用。上一周就是写H5页面让安卓和ios调用使用，中间传参，接受参数。经过 window.wx 对象调用一些原生 app 的功能。这个H5页面，我用的是vue来写的。用到了vue全家桶。

1.调用app方法。

由于安卓和ios不一样。须要写一个方法，来判断机型是安卓或者是ios；

function checkDevice() { // js判断是不是苹果设备
 function checkIsAppleDevice() { var u = navigator.userAgent, app = navigator.appVersion; var ios = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); var iPad = u.indexOf("iPad") > -1; var iPhone = u.indexOf("iPhone") > -1 || u.indexOf("Mac") > -1; if (ios || iPad || iPhone) { return true; } else { return false; } } //js判断是否为Android设备
 function checkIsAndroidDevice() { var u = navigator.userAgent; if (u.indexOf("Android") > -1 || u.indexOf("Adr") > -1) { return true; } else { return false; } } if (checkIsAppleDevice()) { return "ios"; } else { return "andriod"; } } export default checkDevice;

上面写好的，直接拿来用，在你须要的组件中引入就行。在app.vue中引入这个js文件。由于一进来就要获取token值。前提是用户登陆了。

获取app传过来的token值。iOSInfo.token这个是ios定义的方法，andriod.token安卓传过来的token。有些功能，须要判断用户是否登陆，就是根据app端传来的token值判断,有值就能够进行操做，没有跳动到登陆页面，存储方式，测试的时候，安卓和ios不支持localStorage，支持sessionStorage。把获得的值存储到sessionStorage里面就行，而后那个地方须要，就获取一下就行，通常都是在请求接口的时候携带上去。

this.phone = checkDevice(); getAndioOfIOSInfoList() { // js判断是否为ios设备
      if (this.phone== "ios") { let iOSInfo = JSON.parse(JSON.stringify(window.iOSInfo));

　　　　　　sessionStorage.setItem("token", iOSInfo.token);

this.$store.dispatch("getUserId", iOSInfo.userId);
      } else { let andriod = JSON.parse(Android.getToken()); //token

　　　　　　sessionStorage.setItem("token", andriod.token);

this.$store.dispatch("getUserId", andriod.userId); } }

上面由于和安卓和ios沟通，须要给我返回token和用户信息，我是直接把用户信息存储到vuex，由于每一个页面都须要用到用户信息。因此存放到vuex中,方便每一个页面使用。

有时候，须要在二级页面进入一级页面的时候，须要监听安卓和ios方法，让他们返回，在这个时候咱们只须要监听安卓和ios定义的方法就行。也是须要判断机型。handleGoTo这个是前端本身写的一个返回上一级的方法名。

handleGoTo() { //原生返回上一级页面
      if (this.phone == "ios") { // ios返回上一级
 webkit.messageHandlers.gotoHomePage.postMessage({}); } else { Android.back(); //安卓方法
 } },

webkit.messageHandlers.gotoHomePage.postMessage({});监听ios一个方法，gotoHomePage就是ios定义的方法，只须要调用这个放个便可，不须要加上window,默认就是全局的。可是在postMessage必定要传一个空对象便可。

Android.back()安卓的就不须要太麻烦了，很友好，只须要调用安卓给我定义的方法名back（）便可。
只要是返回上一级或者跳转登陆，注册页面，均可以这样写。只是安卓和ios可能定义方法不一样

2.调用H5方法

在一些场景中，须要咱们传一些参数给app。让他们调用，这时候就须要app端调用咱们的方法，把对应的参数传给他们就行。也是须要判断机型。jumpToPAage就是安卓和ios定义的方法名，名字同样不同均可以的

 

 以上都是和安卓和ios在工做中二者之间互相调用的方法，总结一下，方便之后查询使用。

原文出处：https://www.cnblogs.com/zhoulifeng/p/11446516.html