乐趣区

关于html5:H5与原生APP交互笔记

jiezi

目录 

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('请应用手机关上见面！')
  }
}
退出移动版