关于html5: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('请应用手机关上见面！')
  }
}