h5跳转到App：url scheme

从h5跳到App可以使用URL Scheme协议解决。该协议还可以解决以下几个问题：

从App内部浏览器页面跳转到App原生页面
外部浏览器跳转到自己的App,并可以指定页面
APP跳转到另一个APP指定页面
通过短信中的URL打开原生APP

协议格式

{scheme}://{host}:{port}/{path}?{query}

	备注
scheme	协议，跟app开发获取
host	域名
port	端口
path	路径，跳转的具体位置，如果不设置，则默认打开用户之前停留的页面或首页
query	参数，跳转时需要携带的参数

使用方式

其他app内置浏览器。如微信内置浏览器、qq内置浏览器、微博内置浏览器，建议识别后引导用户跳转至浏览器App, 再进行下一步操作。

// 是否是微信浏览器
export const isWeixin = () => {
  const userAgent: any = window.navigator.userAgent.toLowerCase()
  return userAgent.match(/MicroMessenger/i) == 'micromessenger'
}

// 是不是qq
export const isQQ = () => {
  const userAgent = window.navigator.userAgent.toLowerCase()
  const androidBrowser = userAgent.indexOf('mqqbrowser')
  const iosBrowser = userAgent.indexOf('qbwebview')
  const netType = userAgent.indexOf('netType') > -1 || userAgent.indexOf('NetType') > -1
  return netType && (androidBrowser > -1 || iosBrowser > -1)
}

安卓与ios。ios需要识别Safari和其他浏览器。

// 判断当前设备是ios还是安卓
export const isAndroidOrIOS = () => {
  const u = navigator.userAgent
  const isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1 // android终端
  const isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/) // ios终端
  if (isAndroid) {
    return 'android'
  }
  if (isiOS) {
    return 'ios'
  }
  return false
}

// 是否是Safari浏览器
export const isSafari = () => {
  return /Safari/.test(navigator.userAgent) && !/Chrome/.test(navigator.userAgent)
}

安装与未安装。如果本机安装了App，则直接跳转，若是未安装则安卓跳转去下载页面，ios跳转至App Store。

// 下载或打开app
export const openApp = async () => {
  // 内置浏览器内
  if (isWeixin() || isQQ() || isWeibo()) {
    console.log( '请在浏览器上打开=====')
  } else {
    // android端
    if (isAndroid) {
      const url = 'PATH'
      // 安卓app的scheme协议
      window.location.href = 'SCHEME'
       // 若是未下载，则跳转至下载地址
      setTimeout(function () {
        const hidden = window.document.hidden || (window.document as any).mozHidden || (window.document as any).msHidden || (window.document as any).webkitHidden
        if (typeof hidden === 'undefined' || !hidden) {
          // 下载地址
          window.location.href = url
        }
      }, 2500)
    }
    // ios端
    if (isIOS) {
      const url = ‘App store path’
      if (isSafari()) {
        window.location.href = url
      } else {
        // ios的scheme协议
        window.location.href = 'SCHEME'
        setTimeout(function () {
          const hidden = window.document.hidden || (window.document as any).mozHidden || (window.document as any).msHidden || (window.document as any).webkitHidden
          if (typeof hidden === 'undefined' || !hidden) {
            // App store下载地址
            window.location.href = url
          }
        }, 200)
      }
    }
  }
}

最后编辑于：2023.06.17 19:57:52