H5与Android 和 Ios 的交互

935 阅读1分钟

一、H5 调用Android 和 Ios 方法:

// 注意:(funName是方法名)

// 调用 Android 方法
window.android.funName();

// 调用 Ios 方法
// 方法一:
// 注意:没有参数 写上null
window.webkit.messageHandlers.funName.postMessage(null);  // 无法接收ios返回的值

// 方法二:
window.prompt("funName")  // 可以接收ios返回的值

二、Android 和 Ios 调用 H5方法:

<script>
    // 原生调用H5 的方法,把数据作为参数传回来。
    mounted() {
        // 将OpenedCases方法绑定到window下面,提供给外部调用
        window["OpenedCases"] = result => {
            this.OpenedCases(result);
        };
    },
    methods: {
        //该方法是被原生调用的
        OpenedCases(obj) {
            this.checked = obj;
        }
    }
</script>

三、判断Android 和 Ios 的两种方法:

方法一:

/* 判断android与ios*/  
  var mobilePlatform = {
    "isAndroid": navigator.userAgent.indexOf("Android") > -1 || navigator.userAgent.indexOf("Linux") > -1,  //android终端或者uc浏览器,//判断是否为移动端
    "isIOS": !!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/) //ios终端
  };

  if (mobilePlatform.isAndroid) {
     console.log('安卓手机')
  } else if (mobilePlatform.isIOS) {
     console.log('苹果手机')
  }

方法二:

/* 可以通过链接上带的参数判断是安卓还是ios,例如:*/
    www.baidu.com/index?type=android (安卓)
    www.baidu.com/index?type=ios (安卓)