前端H5与安卓和ios之间通信-阿里云开发者社区

开发者社区> 小周sir> 正文

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

简介: 前端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在工作中两者之间互相调用的方法,总结一下,方便以后查询使用。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
前端常见兼容问题系列8: 安卓机器中通过JS设置焦点无法拉起软键盘
有时候,为了优化用户体验,做交互设计的同学可能会希望让输入框自动获得焦点并弹出软键盘,这样用户不用点击输入框就可以直接输入。的确,这对用户来说很方便。但真正用HTML5页面去实现的时候,却遇到了问题。 首先我做了这样一个demo。 ``` Title #input1{
3374 0
前端H5与安卓和ios之间通信
前端H5与安卓和ios之间通信
22 0
阿里云服务器端口号设置
阿里云服务器初级使用者可能面临的问题之一. 使用tomcat或者其他服务器软件设置端口号后,比如 一些不是默认的, mysql的 3306, mssql的1433,有时候打不开网页, 原因是没有在ecs安全组去设置这个端口号. 解决: 点击ecs下网络和安全下的安全组 在弹出的安全组中,如果没有就新建安全组,然后点击配置规则 最后如上图点击添加...或快速创建.   have fun!  将编程看作是一门艺术,而不单单是个技术。
3956 0
根据js来判断手机是操作系安卓还是ios
根据js来判断手机是操作系安卓还是ios
32 0
前端常见兼容问题系列6: 一些安卓APP的WebView中<input type="file">不工作
安卓APP的WebView默认屏蔽了该控件的使用,有些安卓APP之所以能支持文件选择和上传,主要可能是有可能采取了如下措施之一: (1)可能在该APP中重写了相关方法 (2)提供了JS Bridge来供web页面调用
9058 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
5670 0
阿里云ECS云服务器初始化设置教程方法
阿里云ECS云服务器初始化是指将云服务器系统恢复到最初状态的过程,阿里云的服务器初始化是通过更换系统盘来实现的,是免费的,阿里云百科网分享服务器初始化教程: 服务器初始化教程方法 本文的服务器初始化是指将ECS云服务器系统恢复到最初状态,服务器中的数据也会被清空,所以初始化之前一定要先备份好。
10711 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,云吞铺子总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系统盘、创建快照、配置安全组等操作如何登录ECS云服务器控制台? 1、先登录到阿里云ECS服务器控制台 2、点击顶部的“控制台” 3、通过左侧栏,切换到“云服务器ECS”即可,如下图所示 通过ECS控制台的远程连接来登录到云服务器 阿里云ECS云服务器自带远程连接功能,使用该功能可以登录到云服务器,简单且方便,如下图:点击“远程连接”,第一次连接会自动生成6位数字密码,输入密码即可登录到云服务器上。
16269 0
+关注
小周sir
面对过去,不要迷离;面对未来,不必彷徨;
50
文章
41
问答
文章排行榜
最热
最新
相关电子书
更多
文娱运维技术
立即下载
《SaaS模式云原生数据仓库应用场景实践》
立即下载
《看见新力量:二》电子书
立即下载