H5跳转App 判断App是否安装

爱吃香菇的小白菜
2,155 阅读3分钟

H5跳转App

需求描述： 在微信的页面打开app，如果未安装跳转

1. schema

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

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

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

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

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

android ios都支持

2. Universal Link

就是一个普通的地址链接

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

需要让运维同学将404页面重定向至appstore或者一个下载页

原理是 如果安装了app请求会被拦截，没安装的话就正常访问这个链接

3. intent

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

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

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 据说 微信内跳转appstore也被禁了，所以可以用应用宝跳转appstore

5. callapp-lib

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

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

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

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

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)

  })
}

总结

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

所以

还是应用宝跳转最方便，因为他不需要打开app，打开应用宝就行了，但是如果安装了app，也会打开应用宝再打开app，会有些繁琐

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

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

我最后的方案

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

ios9+ 通过Universal Link跳转，同时Universal Link指向一个跳转app store的页面

需要注意的是h5页面如果在分享到微信的卡片中打开的话可正常跳app store

如果把链接复制到消息中，则无法访问，所以这个指向 跳转app store的页面上还要有一个提示引导用户浏览器打开

avatar
文章
阅读
粉丝