H5与原生APP交互笔记

目录

1. H5调用原生APP方法；
2. 原生APP调用H5方法；
3. H5跳转原生APP页面；
4. H5点击下载APP

H5调用原生APP方法

// name  方法名(APP里定义的方法)
// data  与原生交互数据(比如:微信分享时,调原生分享方法,传分享的数据给原生APP)

// 安卓  不需要传data数据时,直接调用window.App[name)](); 
//      需要传data数据时,调用window.App[](data);
// IOS  不需要传data数据时，调用window.webkit.messageHandlers[name].postMessage(null);（IOS不传数据时，需要给null）
//     需要传data数据时, window.webkit.messageHandlers[name].postMessage(data);

// 与原生APP不需要传数据
// 调用原生方法,并且数据为空，IOS需要传null
export const useNativeMethod = (name, data = null) => {
    if (state.Navigator.indexOf('Android') > -1 || state.Navigator.indexOf('Adr') > -1) {
        window.App[name](data);
    } else if (!!state.Navigator.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)) {
        window.webkit.messageHandlers[name].postMessage(data);
    }
}

原生APP调用H5方法

// window['userInfo'] = window.userInfo
// 原生APP调用JS方法，需要把方法直接创建到window对象里，不能在Vue的methods里创建
// vue这里是在main.js里创建的方法
// app登录时，返回用户登录信息
window['userInfo'] = (data) => {
  if (typeof data == 'object') {
    sessionStorage.setItem('userdata', JSON.stringify(data))
    vm.$store.state.userdata = data
  } else {
    sessionStorage.setItem('userdata', data)
    let user = JSON.parse(data)
    vm.$store.state.userdata = user
  }
}

H5跳转原生APP页面

// actuive  是APP与前端的一种协议，建议安卓/IOS协议相同

window.location.href = 'actuive://data';   打开APP首页
window.location.href = 'actuive://data/gotologin'  打开APP的登录页面
window.location.href = `actuive://data/${this.workDetail.opus_id}/${this.videodata.direction}`  打开APP指定页面，并且传输数据给原生APP

H5点击下载APP

// 点击下载APP，判断Ios/安卓,并且跳转不同地址下载APP
// Android_Dow_Path  安卓下载地址
// IOS_Dow_Path  IOS下载地址
// 'actuive://data'  与app的一个协议，打开APP(只能在已安装APP使用,没安装APP则不起作用)

export const openApp = () => {
  let platform;
  if (window) platform = sessionStorage.platform || ''
  var Android_Dow_Path = `xxxx?f=${platform}`;
  var IOS_Dow_Path = `xxxx?f=${platform}`;
  if (window.navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)) {
    var APPCommon = {
      init: function () {
        this.openApp();
      },
      openApp: function () {
        var this_ = this;
        if (this_.isWeixin() || this_.isWeibo()) {
          if (navigator.userAgent.match(/android/i)) {
            window.location = Android_Dow_Path;
          } else {
            window.location = IOS_Dow_Path;
          }
        } else {
          if (navigator.userAgent.match(/(iPhone|iPod|iPad);?/i)) {
            var loadDateTime = new Date();
            window.setTimeout(function () {
              var timeOutDateTime = new Date();
              if (timeOutDateTime - loadDateTime < 5000) {
                window.location = IOS_Dow_Path;
              } else {
                window.close();
              }
            }, 2000);
            window.location = 'actuive://data';
          } else if (navigator.userAgent.match(/android/i)) {
            try {
              window.location = 'actuive://data';
              setTimeout(function () {
                window.location = Android_Dow_Path;
              }, 500);
            } catch (e) { }
          }
        }
      },
      // UA鉴定
      isWeixin: function () {
        var ua = navigator.userAgent.toLowerCase();
        if (ua.match(/MicroMessenger/i) == "micromessenger") {
          return true;
        } else {
          return false;
        }
      },
      isWeibo: function () {
        var ua = navigator.userAgent.toLowerCase();
        if (ua.match(/WeiBo/i) == "weibo") {
          return true;
        } else {
          return false;
        }
      },
      isAndroid: function () {
        return navigator.userAgent.match(/Android/i) ? true : false;
      },
      isMobileQQ: function () {
        var ua = navigator.userAgent;
        return /(iPad|iPhone|iPod).*? (IPad)?QQ\/([\d\.]+)/.test(ua) || /\bV1_AND_SQI?_([\d\.]+)(.*? QQ\/([\d\.]+))?/.test(ua);
      },
      isIOS: function () {
        return navigator.userAgent.match(/iPhone|iPad|iPod/i) ? true : false;
      },
    }
    APPCommon.init()
  } else {
    // console.log('PC端')
    alert('请使用手机打开见面！')
  }
}