H5 如何实现唤起 APP

最新推荐文章于 2024-07-14 14:35:46 发布

尼古拉·瑞

最新推荐文章于 2024-07-14 14:35:46 发布

阅读量2.7k

点赞数 3

文章标签： javascript 前端

本文链接：https://blog.csdn.net/letnewworld/article/details/129949430

版权

唤端技术我们也称之为deep link技术。当然，不同平台的实现方式有些不同，一般常见的有这几种，分别是：

URL Scheme（通用）
Universal Link （iOS）
App Link、Chrome Intents（android）

1、URL Scheme（通用）

这种方式是一种比较通用的技术，各平台的兼容性也很好，它一般由协议名、路径、参数组成。这个一般是由Native开发的同学提供，我们前端同学再拿到这个scheme之后，就可以用来打开APP或APP内的某个页面了。

URL Scheme 组成

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

我们常用APP的 URL Scheme

app	URL Scheme
微信	weixin://
支付宝	alipay://
淘宝	taobao://
QQ	mqq://
知乎	zhihu://

打开方式

直接通过window.location.href跳转
```
window.location.href = 'weixin://'
```

通过iframe跳转

const iframe = document.createElement('iframe')
iframe.style.display = 'none'
iframe.src = 'weixin://'
document.body.appendChild(iframe)

使用a标签进行跳转
```
window.location.href = 'weixin://'
```

通过js bridge来打开

window.miduBridge.call('openAppByRouter', {url: 'zhihu://'})

判断是否成功唤起APP

当用户唤起APP失败时，我们希望可以引导用户去进行下载。

我们可以监听当前页面的visibilitychange事件

<template>
  <div class="main">
      <p class="open_btn" @click="open">打开腾讯微博</p>
  </div>
</template>

<script>
let timer
export default {
    name: 'openApp',
    methods: {
        watchVisibility() {
            window.addEventListener('visibilitychange', () => {
                // 监听页面visibility
                if(document.hidden) {
                    // 如果页面隐藏了，则表示唤起成功，这时候需要清除下载定时器
                    clearTimeout(timer)
                }
            })
        },
        open() {
            timer = setTimeout(() => {
              // 三秒后没跳APP就跳转下载页
                window.location.href = 'http://apps.apple.com/cn/app/id387682726'
            }, 3000)
            window.location.href = 'taobao://'
        }
    }
}
</script>

2、Universal Link （iOS）

Universal Link 是在iOS 9中新增的功能，使用它可以直接通过https协议的链接来打开 APP。它相比前一种URL Scheme的优点在于它是使用https协议，所以如果没有唤端成功，那么就会直接打开这个网页，不再需要判断是否唤起成功了。并且使用 Universal Link，不会再弹出是否打开的弹出，对用户来说，唤端的效率更高了。

相对 URL Scheme，universal links 有一个较大优点是它唤端时没有弹窗提示是否打开，提升用户体验，可以减少一部分用户流失；

无需关心用户是否安装对应的APP，对于没有安装的用户，点击链接就会直接打开对应的页面，因为它也是http协议的路径，这样也能一定程度解决 URL Scheme 无法准确判断唤端失败的问题；

步骤

1、在 APP 中注册自己要支持的域名；

2、在自己域名的根目录下配置一个 apple-app-site-association 文件即可。（具体的配置前端同学不用关注，只需与iOS同学确认好支持的域名即可）

打开方式

openByUniversal () {
  // 打开知乎问题页
  window.location.href = 'https://oia.zhihu.com/questions/64966868'
},

3、App Link、Chrome Intents（Android）

App Link

在2015年的Google I/O大会上，Android M宣布了一个新特性：App Links让用户在点击一个普通web链接的时候可以打开指定APP的指定页面，前提是这个APP已经安装并且经过了验证，否则会显示一个打开确认选项的弹出框，只支持Android M以上系统。

App Links的最大的作用，就是可以避免从页面唤醒App时出现的选择浏览器选项框;

前提是必须注册相应的Scheme，就可以实现直接打开关联的App。

App links在国内的支持还不够，部分安卓浏览器并不支持跳转至App，而是直接在浏览器上打开对应页面。

—
系统询问是否打开对应App时，假如用户选择“取消”并且选中了“记住此操作”，那么用户以后就无法再跳转App。

Chrome Intents

Chrome Intent 是 Android 设备上 Chrome 浏览器中 URI 方案的深层链接替代品。

如果 APP 已安装，则通过配置的 URI SCHEME 打开 APP。

如果 APP 未安装，配置了 fallback url 的跳转 fallback url，没有配置的则跳转应用市场。

这两种方案在国内的应用都比较少。

方案对比

_	URL Scheme	Universal Link	App Link
小于ios9	支持	不支持	不支持
大于ios9	支持	支持	不支持
小于android6	支持	不支持	不支持
大于android6	支持	不支持	不支持
是否需要HTTPS	不需要	需要	需要
是否需要客户端	需要	需要	需要
无对应APP时的现象	报错/无反应	跳到对应的页面	跳到对应的页面