H5跳转App 判断App是否安装

H5跳转App

需求描述：在微信的页面打开app，如果未安装跳转软件商店或appstore去安装

1. schema

css 复制代码

[scheme:][//authority][path][?query][#fragment]

例如：https://www.baidu.com schema为https:// 其他的schema还有weixin://、 weibo://

微信内无法使用，需在浏览器打开，除非加入微信白名单

如果没安装，会报错，但不会体现在页面上

所以对于上述需求，需要提前判断是否安装了app，安装则跳转，未安装则跳转软件商店或下载页

android ios都支持

2. Universal Link

ios9+支持，可在微信内打开，没安装会跳到一个404的报错页

也需要提前判断是否安装了app，或者让运维同学将404页面重定向至appstore或者一个下载页

3. intent

ini 复制代码

intent:
   HOST/URI-path // Optional host 
   #Intent; 
      package=[string]; 
      action=[string]; 
      category=[string]; 
      component=[string]; 
      scheme=[string]; 
   end;

如果用户未安装 APP，则会跳转到系统默认商店。可以指定一个唤起失败的跳转地址，添加下面的字符串在 end; 前

ini 复制代码

S.browser_fallback_url=[encoded_full_url]

试了一下，微信内也打不开，safari也打不开

而且不可靠，用小米手机，小米的默认浏览器可以成功跳转，但是换qq浏览器直接跳转失败的跳转地址了

4. 应用宝

<http://a.app.qq.com/o/simple.jsp?pkgname=com.huajiao&ckey=CK1335380772497&android_schema=huajiao://huajiao.com/goto/live?liveid=108884676&userid=28306796>

直接放这样一个链接，会打开应用宝然后在应用宝跳转（ios打开appstore）有应用宝的logo

5. callapp-lib

将以上方法封转过了传参即可，但是没有检测app是否安装的逻辑

6. 判断手机是否安装的方法

通过判断页面是否被隐藏，不100%可靠，可配合schema使用

universal link会跳转至404的报错页，页面也是被隐藏了，所以无法判断

js 复制代码

function checkOpen(timeout = 2300) {
  function getSupportedProperty() {
    let hidden
    let visibilityChange

    if (typeof document.hidden !== 'undefined') {
      hidden = 'hidden'
      visibilityChange = 'visibilitychange'
    } else if (typeof document.msHidden !== 'undefined') {
      hidden = 'msHidden'
      visibilityChange = 'msvisibilitychange'
    } else if (typeof document.webkitHidden !== 'undefined') {
      hidden = 'webkitHidden'
      visibilityChange = 'webkitvisibilitychange'
    }

    return {
      hidden,
      visibilityChange,
    }
  }
  function isPageHidden() {
    const ob = getSupportedProperty()
    const hidden = ob?.hidden
    if (typeof hidden === 'undefined') return false

    return document[hidden]
  }
  return new Promise((resolve, reject) => {
    const ob = getSupportedProperty()
    const visibilityChange = ob?.visibilityChange

    const check = () => {
      const pageHidden = isPageHidden()
      if (pageHidden) {
        resolve() // 页面被隐藏，说明唤醒成功
      } else {
        reject(new Error('唤醒超时'))
      }
    }
    const timer = setTimeout(() => {
      check()
    }, timeout)

    const fn = () => {
      if (typeof visibilityChange !== 'undefined') {
        document.removeEventListener(visibilityChange, fn)
      } else {
        window.removeEventListener('pagehide', fn)
      }
      check() // 唤醒执行后，立马触发页面隐藏变化，可检测是否唤醒成功
      clearTimeout(timer) // 未到达指定时间，页面隐藏变化，清除定时器
    }

    if (typeof visibilityChange !== 'undefined') {
      document.addEventListener(visibilityChange, fn)
    } else {
      window.addEventListener('pagehide', fn)
    }
  })
}

总结

因为判断app是否下载的方法不可靠（但是好多软件也都是这么做的）

所以

还是应用宝跳转最方便，因为他不需要打开app，打开应用宝就行了

对于ios9+ universal link配合404后重定向最方便可靠

安卓的话 intent配合fallback_url也挺好使，但是qq浏览器不支持（我只用了小米手机做测试）

我最后的方案

ios和android都在浏览器打开，然后通过页面是否被隐藏判断是否安装了app，然后都通过schema跳转