H5和Android ios交互 - 清哥的小屋

清阿哥

欢迎来到清哥的小屋 · 记录成长与思考

今日一言

加载中…

—

小屋足迹

小屋已亮灯 1 天

从 2026-07-21 起，一点点堆起的文字与风景。

本站访客 - 总访问 -

279 字

1 分钟

H5和Android ios交互

2020-06-30

Vue

html5

/

vue.js

/

javascript

本文同步自 CSDN · 清阿哥，原文发布于 2020-06-30。

1. 判断手机是安卓或者ios方法#

1.1 添加判断机型方法（适用于Android和ios调用方法不一样）#

1
function checkDevice() {
2
  // js判断是否是苹果设备
3
  function checkIsAppleDevice() {
4
      var u = navigator.userAgent,
5
          app = navigator.appVersion;
6
      var ios = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
7
      var iPad = u.indexOf("iPad") > -1;
8
      var iPhone = u.indexOf("iPhone") > -1 || u.indexOf("Mac") > -1;
9
      if (ios || iPad || iPhone) {
10
          return true;
11
      } else {
12
          return false;
13
      }
14
  }
15
  //js判断是否为Android设备
16
  function checkIsAndroidDevice() {
17
      var u = navigator.userAgent;
18
      if (u.indexOf("Android") > -1 || u.indexOf("Adr") > -1) {
19
          return true;
20
      } else {
21
          return false;
22
      }
23
  }
24

25
  if (checkIsAppleDevice()) {
26
      return "ios";
27
  } else {
28
      return "Android";
29
  }
30
}
31
export default checkDevice;

1.2 页面中使用（vue）#

1
// 引入检测机型方法
2
import checkDevice from "@/utils/checkDeviceType";
3
export default{
4
  data: {
5
    phone: '',
6
    userInfo : {},
7
  };
8
  created(){
9
    this.phone = checkDevice();
10
    window.getAppUser = this.getAppUser // 接收ios返回的数据
11
  }，
12
  methods: {
13
     handleQuit () {
14
          if (this.phone == "Android") {
15
           // 调用安卓的方法
16
           window.android.goToAppHome();
17
        } else {
18
           // 调用ios方法
19
          window.webkit &&
20
          window.webkit.messageHandlers &&
21
          window.webkit.messageHandlers.closeWebView &&
22
          window.webkit.messageHandlers.closeWebView.postMessage &&
23
          window.webkit.messageHandlers.closeWebView.postMessage(null);
24
          }
25
        },
26
        getAppUser (str) { // ios 接受用户基本信息
27
          this.userInfo = JSON.parse(str) // 原生返回的是JSON格式 需要转成对象
28
      },
29
  }
30
}