iOS H5页面打开APP技术总结
iOS端H5页面打开APP的方式目前主要有两种:URL Scheme和Universal Links。其中Universal Links是iOS9.0以后推出的一种新的方案,由于它需要在iOS9.0以后才使用,而且还要兼容微信和iOS的版本,所以在项目中会采用两种方式结合的方式。
一、URL Scheme
scheme是iOS9之前比较主流的一种跳转方案了, 更多的是用在了两个APP相互跳转中。也可以在Safari中输入schema://跳转到App内部,在项目中如下位置可以配置

配置好后安装APP后,直接在访问设置好的 URL Scheme可以直接打开APP,如平时我们用的比较多的淘宝APP,默认的 URL Scheme如下:taobao:// 在浏览器中输入该scheme就会弹出如下

其实这种方式很不顺滑,在每次跳转的时候都会弹框询问。如果iPhone中如果没有安装则会直接弹出错误提示

正常产品的思路是如果手机中没有安装APP的话,应跳转到App Store下载页面。我与前端小伙伴沟通后,因为schema跳转失败是没有错误码返回的。前端使用计时器计时,如果在规定时间内没有跳转到APP,则认为是失败的。这种设计确实有一些体验不好。而且在微信中输入schema链接,也无法跳转到APP。因为schema并没有走http/https链接,微信也无法识别。

但是在微信端就不行了,微信端设置了白名单,完全屏蔽了URL Scheme 用法,除非加入了白名单,像京东就可以直接打开,否则是不可能的,那我们还有下面的办法来解决这个办法。
二、Universal Links
1、简介
建议大家先看看苹果官方文档https://developer.apple.com/library/content/documentation/General/Conceptual/AppSearch/UniversalLinks.html
Universal Links(通用链接)是iOS9.0出的新技术。如果我们的应用支持通用链接,那么就可以通过https链接来打开APP(手机中已经安装此APP),或者跳转到https链接(手机中没有安装此APP)。
2、实现步骤
2.1 配置https(必须是https)网站支持
创建“apple-app-site-association”文件,注意不带后缀,放到网站根目录,确保可以使用:https://xxx.xxx.xxx/apple-app-site-association直接可以访问,apple-app-site-association文件内容如下:
{
"applinks": {
"apps": [],
"details": [
{
"appID": "ABCD1234.com.aaa.app",
"paths": [ "/info/*", "/mobile/*"]
},
{
"appID": "EFGH5678.com.bbb.app",
"paths": [ "*" ]
}
]
}
}
相关参数如下:
appID = teamId.yourapp's bundle identifier
paths = APP支持的路径列表,只有这些指定的路径的链接,才能被APP所处理,大小写敏感
2.2 配置苹果证书,开启“Associated Domains”,如下图:
Identifiers - App IDs –Edit 然后开启打钩 Associated Domains 后保存,配置地址:https://developer.apple.com/account/ios/identifier/bundle

2.3 配置你的App的Universal Links(通用链接)
配置如下:项目 targets->Capabilities->Associated Domains,如图填写你的链接域名

域名的格式必须为:applinks:你的域名(ex:applinks:www.domain.com),可以配置多个
2.4 在项目中代码处理
- (BOOL)application:(UIApplication *)application continueUserActivity:(NSUserActivity *)userActivity restorationHandler:(void (^)(NSArray<id<UIUserActivityRestoring>> * _Nullable))restorationHandler {
if ([userActivity.activityType isEqualToString:NSUserActivityTypeBrowsingWeb]) {
NSURL *webpageURL = userActivity.webpageURL;
NSString *host = webpageURL.host;
// 在这里写需要的逻辑,比如跳转到某个详情页
if ([host isEqualToString:@"www.aa.tk"]) {
} else{
[[UIApplication sharedApplication] openURL:webpageURL options:@{} completionHandler:^(BOOL success) {
}];
}
}
return YES;
}
按照以上步骤配置完成以后就可以测试了。
三、Universal Links坑以及注意点
3.1 配置apple-app-association
- 域名必须支持https
- 域名根目录下放这个文件apple-app-site-association,不带任何后缀
- 文件为json格式保存为文本即可
- json按着官网的要求填写即可
测试是否正确,直接访问域名+配置文件名如果能正确访问则放置的位置是正确的。例如你想通过访问”https://aa.test.com/xxx“来打开app,那么你要把配置文件放在”https://aa.test.com/“对应服务器根目录,通过访问”https://aa.test.com/apple-app-association“能直接访问配置文件则是正确的。
苹果也提供了一个官方网页供我们开发者来验证https://域名/apple-app-site-association是否有效
验证地址如下:https://search.developer.apple.com/appsearch-validation-tool/
3.2 跨域问题
[重要]展示地址和打开的地址不能在一个域名下(作者测试发现放在同一服务器下都不行),比如展示页的地址是https://a.domain.com/?id=10,打开的如果是https://a.domain.com/app/?id=10,系统默认是打开页面,而不是触发通用链接打开app
必须写点击事件跳转到与applinks中添加的域名相同的页面例如oap.aaaaa.com/info/download.html(要跨域),在微信中就直接跳转到了我们的app中了!
3.3 通用链接可被屏蔽,点击右上角配置的链接之后,通用链接就失效了

原因分析
因为你点击右上角的网址之后,默认就把通用链接禁用了,需要在Safari中恢复一下,这是iOS本身的机制。
解决方案
1.在微信里面点击右上角“...”,在Safari中打开;
2.往下拉,看到最上面的右上角有一个“打开”的按钮,点击“打开”之后,以后就好了
解决方案详见:《iOS通用链接(Universal Links)突然点击无效的解决方案》
参考链接:https://cloud.tencent.com/developer/article/1117841
iOS H5页面打开APP技术总结的更多相关文章
- 拼多多(7pdd)微信跳转h5页面打开app跳转任意url关注技术weixin://dl/business/?ticket
拼多多微信跳转接口利用了微信官方的weixin://dl/business/?ticket技术,此类接口可以在官方接口中找到,分析代码如下: <title>拼多多</title> ...
- h5页面唤起app(iOS和Android),没有安装则跳转下载页面
浏览器和app没有通信协议,所以h5不知道用户的手机释放安装了app.因此只能是h5去尝试唤起app,若不能唤起,引导用户去下载我们的app. 微信里屏蔽了 schema 协议,如果在微信中打开h5, ...
- h5分享页面打开APP
项目中 直播app分享出来的直播h5页面 点击进入按钮:已下载app 就进入app,未下载跳转到下载页面 判断是安卓还是ios var u = navigator.userAgent; var isA ...
- ios 根据 schemes 打开 app
公司出需求,要让 h5链接直接打开用户的 app,如果没有安装 app 直接跳转到 appStore 这就需要给 app 配置 schemes 即可 1.在Info.plist中 LSApplicat ...
- 微信H5页面唤醒APP并传参跳转uniapp
主要实现是利用微信内置浏览器支持的<wx-open-launch-app>开放标签可以让你的H5网页拉起APP 在链接https://developers.weixin.qq.com/ ...
- IOS+H5页面自定义按钮无效
在IOS整合H5页面的时候,自定义的按钮失去效果,Android系统可以. 如图,确定和取消按钮在IOS系统无效. 解决办法是在两个按钮上加上一个style属性即可 <span class=&q ...
- iOS微信里打开app,Universal Links
这两天在弄分享,从第三方应用或者浏览器打开自己app的东西 传统的方式是通过URL Scheme的方式,但是iOS9以后又出了新的更完美的方式Universal Links. 传统的URL Schem ...
- iOS中html打开APP传参
1.在项目info.plist中添加URL Types以供html调用 2.html代码 <html> <head lang="en"> <meta ...
- iOS用户是否打开APP通知开关跳转到系统的设置界面
1.检测用户是否打开推送通知 /** 系统通知是否打开 @return 是否打开 */ //检测通知是否打开iOS8以后有所变化 所以需要适配iOS7 + (BOOL)openThePushNoti ...
随机推荐
- LC 954. Array of Doubled Pairs
Given an array of integers A with even length, return true if and only if it is possible to reorder ...
- Appium移动自动化测试(四)之元素定位
做过UI自动化测试的童鞋都会发现, 在上一篇文章中居然没有万能定位方式Xpath. 是滴, 确实没有! ADT自带的uiautomatorviewer里面并没有属性xpath, 如果我们需要的话,还需 ...
- JAVA记事本的图形用户界面应用程序
JAVA记事本的图形用户界面应用程序 整体分析: 代码实现: import java.awt.EventQueue; import java.awt.event.ActionEvent; import ...
- C++ 中set
set特点: 所有元素不会重复,重复插入已经有的新值无效: 所有元素按顺序排列:unordered_set除外 键和值相同,所以set中的值是不可更改的 set的各成员函数列表如下: 1.begin( ...
- nginx创建www用户作用
linux创建www用户组和用户 wdcp中的nginx服务启动需要依赖www用户,因此若没有此用户就可能会启动失败.创建这个用户的方法: [root@bogon local]# id www [ro ...
- JavaScript(2)——网页解析过程
JavaScript 网页解析过程 前端编程工具:Visual Studio Code 快捷语法:Emmett语法 正题: 当我们在浏览器输入网址的时候,从服务器下载网页:这个文字经过HTML解析器的 ...
- 了解XPath与XPath轴
XPath 是一门在 XML 文档中查找信息的语言.XPath 用于在 XML 文档中通过元素和属性进行导航. 节点(Node) 在 XPath 中,有七种类型的节点:元素.属性.文本.命名空间.处理 ...
- 利用Fiddler-ImageView识别图像信息及优化图像
一般情况下,我们用Fiddler来拦截修改数据包,分析数据包,但很少拿它来分析图片. Fiddler里的ImageView视图不仅仅能显示图片,还能解析图片里包含的信息,比如帧数,图片修改时间,版权信 ...
- Windows 和 Office 大客户激活方法
激活Windows 10 找到Powershell,然后右键管理员身份运行,依次输入下面的命令,注意将$host切换成为你组织的服务器地址: slmgr.vbs -upk slmgr.vbs -ipk ...
- 【神经网络与深度学习】Google Snappy - 一个高速压缩库
Snappy已经被Google开源,作为一个压缩库,它可以利用单颗Intel Corei7处理器内核处理至少每秒250MB~500MB的数据流. Snappy的前身是Zippy.虽然只是一个数据压缩库 ...