[移动开发] h5唤起App

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> 移动开发 -> h5唤起App -> 正文阅读

[移动开发]h5唤起App

文章目录

背景

调研 h5 唤起 App 方案

目的：引导已下载用户打开 APP，引导未下载用户下载 APP。

结论

ios9 及以上用 Universal Link（uc/qq等浏览器不支持，safari 支持且占比最大）
android 6+ 用 App Links（chrome和小众浏览器支持，市场占比还是比想像中大的）
其它情况 URL Scheme（各种限制及弹窗确认）

现状

IOS：绝大多数用户使用 IOS 10 +
Android：跨度比较大，4以上均有一定的人使用，各个浏览器对 app links处理方式不同

URL Scheme（通用）

有点像 web 中我们通过域名定位到一个网站，app 同样是通过类似的这个东西（URL Scheme）来定位到 app

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

常用APP的 URL Scheme

weixin:// | alipay:// | taobao:// | sinaweibo:// | mqq:// | zhihu:// | sms:// |

如何让ios APP 支持自定义URL Scheme？

Intent（安卓）

安卓的原生谷歌浏览器自从 chrome25 版本开始对于唤端功能做了一些变化，URL Scheme 无法再启动Android应用。例如，通过 iframe 指向 weixin://，即使用户安装了微信也无法打开。所以，APP需要实现谷歌官方提供的 intent: 语法

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

intent:
   //scan/
   #Intent; 
      package=com.google.zxing.client.android; 
      scheme=zxing; 
   end;

<a href="intent://scan/#Intent;scheme=zxing;package=com.google.zxing.client.android;S.browser_fallback_url=http%3A%2F%2Fzxing.org;end"> Take a QR code </a>

App Links（安卓6.0+）

Android App Links是一种特殊的Deep Links，它使Android系统能够直接通过网站地址打开应用程序对应的内容页面，而不需要用户选择使用哪个应用来处理网站地址。

Deep Link

Universal Link（IOS 9+）

Universal Link 是苹果在 WWDC2015 上为 iOS9 引入的新功能，通过传统的 HTTP 链接即可打开 APP。如果用户未安装 APP，则会跳转到该链接所对应的页面。

如何让ios APP 支持 Universal Link？

官方文档

拥有一个支持 https 的域名
在开发者中心，Identifiers 下 AppIDs 找到自己的 App ID，编辑打开 Associated Domains 服务。
打开工程配置中的 Associated Domains ，在其中的 Domains 中填入你想支持的域名，必须以 applinks: 为前缀
配置 apple-app-site-association 文件，文件名必须为 apple-app-site-association ，不带任何后缀
上传该文件到你的 HTTPS 服务器的根目录或者 .well-known 目录下

h5端调起app

以上都是 app 端要做的事情，那么 h5 端要做什么调起 app 呢？
有好几种，比如下面的 a 标签，iframe 之类的，npm 上 callapp-lib 包兼容了这些，我们可以直接用。

// a标签调起举例
<a href="intent://scan/#Intent;scheme=zxing;package=com.google.zxing.client.android;end"">扫一扫</a>
// 或
window.location.href = 'sinaweibo://qrcode';

callapp-lib 包调起 app

<template>
  <div @click="goDownload">
    <img class="bgImg" src="~/assets/img/bg.png" alt="" />
    <img v-if="userAgent.isWechat" class="chickImg" src="~/assets/img/chick.png" alt="" />
  </div>
</template>
<script>
import CallApp from 'callapp-lib'
export default {
  computed: {
    userAgent() {
      return this.$store.getters.userAgent
    }
  },
  mounted() {
    if (!this.userAgent.isWechat) {
      this.openApp(this.$route.query)
    }
  },
  methods: {
    openApp(url) {
      const options = {
        scheme: {
          protocol: 'kccatalog'
        },
        intent: {
          package: '',
          scheme: ''
        },
        appstore: '填写appstore的下载地址',
        yingyongbao: '填写应用宝的下载地址',
        fallback: '填写唤端失败后跳转的地址。'
      }
      const callLib = new CallApp(options)
 
      callLib.open({
        param: url.param,
        path: url.path
      })
    },
    goDownload() {
      window.location.href = '没有自动唤端的话,证明手机里面没有app, 点击页面上任意一个地方直接跳应用宝下载链接, 微信不会拦截支付宝的链接'
    }
  }
}
</script>