关于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须要传nullexport 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('请应用手机关上见面！')  }}