IOS H5页面通过universal-link(通用链接)打开APP

需求:

需要在IOS微信浏览器中实现点击后跳转到APP的指定页面,如果没安装则跳转到APP store

IOS前端工作

  1. 在xcode中开启Associated Domains服务

IOS H5页面通过universal-link(通用链接)打开APP

  1. 在Capabilities -> Associated Domains添加跳转域名格式为 applinks:universal-link.example.com

IOS H5页面通过universal-link(通用链接)打开APP

后端工作

  1. 准备两个域名(通用链接域名和当前域名一样,IOS会默认判断在当前页面打开一个网页)一个是后端服务器域名 api.example.com,一个用来制作通用链接 universal-link.example.com。
  2. 在 universal-link.example.com 所对应的服务器更目录创建 apple-app-site-association 文件,内容为
    {
     "applinks": {
         "apps": [],
         "details": [
             {
                 "appID": "苹果对每个APP给定的唯一ID",
                 "paths": [ "/open-app"]
             }
         ]
     }
    }
    配置好一定要确保该文件可以正常访问
  3. 同样是在universal-link.example.com 服务器里启动一个nginx,用来处理当手机没安装app时跳转到APP store的操作
    server {
      ...
      location /open-app/ {
          rewrite ^  https://apps.apple.com/cn/app/xxxxx;
      }
    }
  4. 前端页面的处理
    <script type="text/javascript">
      $('.button').click(function () {
          var link = 'universal-link.example.com/open-app'
          window.location.href = link;
      })
    </script>

总结流程

  1. 用户点击跳转按钮,首先判断需要跳转的url是否和当前页面的url为同一域名,如果不是才能触发universal-link的方式跳转。
  2. 用户安装app后系统会检索是否开启Associated Domains,如果开启去下载apple-app-site-association文件,然后对此APP进行标注。
  3. 用户点击跳转链接时系统会先对已标注的APP进行检索,如果匹配则直接打开APP
  4. 不匹配则重定向到跳转链接,此时跳转链接服务器的nginx对path进行匹配,成功则再次重定向到app store的链接

(注:IOS系统必须大于9, unisersal link的域名必须为https)

参考

iOS-UniversalLink开发
apple官方文档

本作品采用《CC 协议》,转载必须注明作者和本文链接
《L04 微信小程序从零到发布》
从小程序个人账户申请开始,带你一步步进行开发一个微信小程序,直到提交微信控制台上线发布。
《G01 Go 实战入门》
从零开始带你一步步开发一个 Go 博客项目,让你在最短的时间内学会使用 Go 进行编码。项目结构很大程度上参考了 Laravel。
讨论数量: 7

不太明白这个apple-app-site-association 放在根目录哪里? 比如我的项目部署放在:var/www/项目文件 那么要把apple-app-site-association 放在/var/www下面,跟项目文件平级文件目录吗?

3年前 评论

@东商通 看你web server的配置,只要保证通过域名可以访问到这个文件就行,如果是laravel的话可以放在Public目录下,最后确保浏览器输入api.example.com/apple-app-site-association 可以直接下载文件即可

3年前 评论
sreio

作通用链接 universal-link.example.com 意思是和当前域名不同即可,是么?

3年前 评论

@ywmelo 最后确保浏览器输入 api.example.com/apple-app-site-association 可以直接下载文件即可 可以下载就算配置成功了吗 但是IOS那边和我说不行

3年前 评论

我遇到了一个问题

window.location.href = link;

如果这个link是动态的,比如

location.href = window.location.href ;

这个时候就不行了

3年前 评论

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!