H5打开APP技术总结

最新推荐文章于 2024-09-04 09:46:34 发布
最新推荐文章于 2024-09-04 09:46:34 发布
阅读量4.6w 收藏 45
点赞数 15
分类专栏： Web前端 移动开发 文章标签： Universal Links URL Scheme intent H5打开APP
本文为博主原创文章，未经博主允许不得转载，违者必究。
本文链接：https://blog.csdn.net/zy1281539626/article/details/79203853
版权

在H5页面打开APP的方法一般有两种，在IOS 9以前，一般使用的技术是URL Scheme。这种方式虽然可自定义程度很高，能够巧妙地实现很多跳转，但弊端也很明显：我们只能通过 scheme://example 这种格式的链接来实现跳转，而且现在苹果还对这种方式的跳转加了一个提示框：“是否打开XXX”。对于对Web和原生App交互的场景需求量很大的产品来说，这样的跳转方式显然是步骤冗杂的，用户体验并不好。
　　iOS 9 以后，Universal Links 的出现完美的解决了这个问题。它所提供的直接、顺畅、无缝衔接的跳转能够让用户体验提升一个很大的级别。用户可以点击开发者指定的类似于 https://example.com/t 的URL直接唤醒App，而不需要在浏览器打开再点击其他按钮，实现真上的一键直达，无缝链接。
　　但是Universal Links只能在IOS 9+的平台才可以使用，我们还需要兼容微信、安卓和IOS 9以前的版本，所以项目中，我们会采用URL Scheme和Universal Links两个结合的方式。

１.技术介绍

1.1 URL Scheme

项目中需要配置 URL Scheme 以用于场景恢复时跳转到应用中（这里的scheme要唯一确定，不要与其他应用一致，建议使用项目名称作为scheme，不然有可能会跳转到其他的应用里）。
　　在iOS工程中选择工程 Target，选择 Info 选项，然后打开 URL Types，添加 URL Scheme。可以自定义协议名称，如moblink。这个形式的 URI 就会关联跳转到工程中。
　　配置好后安装APP后，直接在访问设置好的 URL Scheme可以直接打开APP，如平时我们用的比较多的APP，默认的 URL Scheme如下：

  • QQ： mqq://
  • 微信： weixin://
  • 腾讯微博： TencentWeibo://
  • 淘宝： taobao://
  • 支付宝： alipay://
  • 微博： sinaweibo://

使用方式： <a href="weixin://">打开微信</a> 点击a标签就可以打开了微信(如果安装了微信)。
　　这种方式访问是比较简单的，安卓和IOS都可以使用，但是在微信端就不行了，微信端设置了白名单，完全屏蔽了URL Scheme 用法，除非加入了白名单，像京东就可以直接打开，否则是不可能的，那我们还有下面的办法来解决这个办法。

##1.2 Universal Links
　　用URL Scheme 不能在微信里打开APP，但是在IOS 9+的系统上还是有解决办法的，那就是用Universal Links，官方网站https://developer.apple.com/library/content/documentation/General/Conceptual/AppSearch/UniversalLinks.html，这里都是英文的，网上也有很多文章。开篇就说了，如果你单纯为了能让H5打开App，Schema就能做到了，Universal Links的意义则是把普通url，也赋予了能打开App的能力，而不必编写专门的Schema Url去唤起App，在没装App的时候，Universal Links他也是一个合法的url链接，浏览器可以正常跳转，因此不会出现在iOS上讨人厌的框。而且Universal Links目前还没有基于iOS的UI/WKWebView的应用进行拦截，所以目前看还是能突破微信/手百的封锁。（以后，不好说啊~）

2.DEMO示例(IOS篇)

2.1 IOS平台配置

  • 在苹果开发者账号下，将本项目的Associated Domains 开关Enable；
  • 在工程中选择好本项目的证书和描述文件；如果是已存在的项目，请完成步骤1后重新下载新的描述文件；
  • 在工程中打开Associated Domains开关，并设置域名

这里写图片描述

测试一级域名：aa.tk 测试二级域名：sit.aa.tk

Domains域名作用
applinks:aa.tk服务器主域名
applinks:www.aa.tk
applinks:sit.aa.tk服务器子域名，用于点击自定义按钮跳转app，需要跨域才能生效

注：用于跳转打开app的域名需要支持https，如果是一级域名页面有个按钮，点击按钮跳转二级域名来打开app，那么二级域名需要支持https。这里DEMO的二级域名不支持https，所以采用的方案是二级域名跳转到一级域名来打开APP。

相关代码：

- (BOOL)application:(UIApplication *)application continueUserActivity:(NSUserActivity *)userActivity restorationHandler:(void (^)(NSArray * _Nullable))restorationHandler{ 
    if ([userActivity.activityType isEqualToString:NSUserActivityTypeBrowsingWeb]) {
        NSURL *webpageURL = userActivity.webpageURL;
        NSString *host = webpageURL.host;
        // 在这里写需要的逻辑，比如跳转到某个详情页
        if ([host isEqualToString:@"www.aa.tk"]) {    
            NSString *url = [userActivity.webpageURL.description substringFromIndex:23];
            NSArray *mat = [url componentsSeparatedByString:@"/"];
            if (mat.count == 2) {
                NSString *type = [mat objectAtIndex:0];
                NSString *key = [mat objectAtIndex:1];
                if ([type isEqualToString:@"goods"]) {
                    [self openGoodsView:key];
                }
            }
        }
        else{
            [[UIApplication sharedApplication] openURL:webpageURL];
        }
    }
    return YES;
}

当通过Universal Link进入app时，会触发此代理，可以从前端传递参数，这里做相应处理，理论上可以跳转到APP的任何一个页面。

##2.2 配置文件apple-app-association

  1. 配置文件的位置放在跳转域名的根目录，DEMO将一级域名设置为打开APP的地址，所以上传到主域名对应服务器的根目录。判断位置是否正确可以访问"https://www.aa.tk/apple-app-site-association"查看，如果正确显示则正确。

  2. 配置文件的内容如下：

    {
    "applinks": {
        "apps": [],
        "details": [{
            "appID": "xxx",
            "paths": ["/testlinkapp/*"]
        }]
    }
}

“appID"是团队ID的值或应用程序ID前缀,紧随其后的是boundle ID。(appID key 就是在你的应用程序的“application-identifier”)，苹果开发者账号》merbership下查看teamid，bundle id 为项目自己定义的唯一标识。
　　“paths"是一个字符串数组,指定你的网站的哪些部分支持跳转到应用程序和哪些网站的部分不想跳转到应用。指定一个域名,不应该作为一个通用的链接处理,在域名paths字符路径的前部添加“NOT”(包括空间T)。
　　这里设置了”/testlinkapp/*”，也就是说访问"/testlinkapp/“文件夹下任何文件(不管是否存在)都可以，例如"https://www.aa.tk/testlinkapp/xxx”。如果没有跨域，就不能跳转，不过下滑可以显示横幅，点击打开也可以打开。

##2.3 下载安装APP并测试
　　如果配置文件发生更改，则需要重新下载APP。这里一级域名和二级域名对应的是同一个文件根目录。
　　测试案例：
环境| 访问url |点击跳转url | 是否跨域 | 结果

  • | :-: | -:
    浏览器|https://www.aa.tk/testlinkapp/xxx| |否|页面不存在，下滑出现”打开APP“横幅，点击打开会打开APP
    浏览器|http://sit.aa.tk/testlinkapp2/demo.html|https://www.aa.tk/testlinkapp/zzz |是|点击demo页的按钮，直接打开了APP
    浏览器|https://www.aa.tk/testlinkapp/xxx| |否|直接打开APP
    浏览器|http://sit.aa.tk/testlinkapp2/demo.html|https://www.aa.tk/testlinkapp/zzz |是|点击demo页的按钮，直接打开了APP

##2.4 没有安装跳转到APP Store
　　使用Universal Links时将跳转的页面设置为下载页面，如果APP已经安装就直接打开APP，如果没有安装则进入下载页面。
　　使用URL Scheme时用延时，超过三秒没有打开APP，则打开下载页面，具体实现后面源码部分。

3.DEMO示例(AOS篇)

安卓不能采用Universal Links的方法，这里使用的是URL Scheme+intent。
##3.1 安卓配置文件

 var AppConfig = {
	"scheme": "xxx",
	"package": "com.xxx",
	"action": "android.intent.action.VIEW",
	"category": "android.intent.category.BROWSABLE",
	"host":"www.xxx.com",
	"FAILBACK_ANDROID":"https://www.xxx.com/xxxx",
	"FAILBACK_IOS":"itms://itunes.apple.com/hk/app/bochk/xxx?mt=8"
 };

这里的参数由安卓同事提供，“FAILBACK_ANDROID”是AOS没有打开app跳转到下载页面的链接
“FAILBACK_IOS”是IOS没有打开app跳转的下载链接，这两个是前端配置的。
　　在Chrome浏览器中使用intent方法，在非Chrome浏览器使用URL Scheme，Chrome中使用intent的好处：Chrome可以识别S.browser_fallback_url参数，如果没有安装app,则直接跳转，而不用我们自己判断是否安装app,在非Chrome中通过延时判断是否安装app会有弊端：（用schema方法实现）点击打开app，会有提示“是否用XXX应用打开”的提示框，如果用户没有点击按钮超过设置的时间，页面就直接跳转了下载页，体验不好。具体实现看源码。

##3.2 安卓端在微信端暂时没有办法，只能跳转应用宝或者下载页面。

4.Universal Links坑及建议

##4.1 配置apple-app-association

  • 域名必须支持https
  • 域名根目录下放这个文件apple-app-association，不带任何后缀
  • 文件为json格式保存为文本即可
  • json按着官网的要求填写即可

测试是否正确，直接访问域名+配置文件名如果能正确访问则放置的位置是正确的。例如你想通过访问"https://aa.test.com/xxx"来打开app，那么你要把配置文件放在"https://aa.test.com/"对应服务器根目录，通过访问"https://aa.test.com/apple-app-association"能直接访问配置文件则是正确的。
##4.2 配置Domains

  • 开发者中心证书打开Associated Domains
  • 工程配置Associated Domains
  • 将你apple-app-association所在域名配置进去
  • 给你的工程像Schema的OpenUrl一样，编写App被唤醒后的处理逻辑
    　　在配置Domains时，我们需要将一级域名和二级域名都要添加进去，这样做是为了通过自定义按钮打开app，而这种做法需要跨域，所以需要配置两个，如果用二级域名来打开app，则二级域名也需要支持https。
    ##4.3 Universal Links基本运作流程
  1. APP第一次启动 or APP更新版本后第一次启动
  2. APP向工程里配置的域名发起Get请求拉取apple-app-association Json File
  3. APP将apple-app-association注册给系统
  4. 由任意webview发起跳转的url，如果匹配了apple-app-association注册过的通用链接(path字段配置)
  5. 打开App，触发Universal Link delegate
  6. 没匹配，webview继续跳转url(当普通的url跳转)

##4.4 跨域
Universal Links必须要求跨域，如果不跨域，就不能实现自定义按钮打开APP，经测试如果不跨域，直接输入配置的url，会跳转到url，下滑会出现如下的横幅，点击打开也可以打开app。
这里写图片描述

这里我们用跨域主要是用于自定义按钮打开App，如果打开一个页面"http://www.aa.com/index.html"，这个页面里面有个”打开APP“的按钮，点击按钮去打开APP。我们用Universal Links技术就是点击按钮让页面跳转到我们在apple-app-association配置文件里配置好的路径里去，不管访问的文件是否存在，都能打开APP。例如我们设置的Universal Links的域名为二级域名"https://bb.aa.com/"，配置文件的path为"/demo/*"，我们将按钮的跳转链接设置为"https://bb.aa.com/demo/xxx"，这时就可以打开APP。

PS:
1.这里配置文件就要放在二级域名的根目录
2.xxx可以不存在，也可以存在
3.如果没有跨域的话，会当普通的url跳转
4.二级域名同样要添加到Domain里
5.跨域最好使用二级域名的方式

##4.5 Universal Links会因为用户的行为而失效
　　Universal LInks触发后打开APP，这时候APP的状态栏右上角会有文字提示来自XXX App，可以点击状态栏的文字快速返回原来的APP，如果用户点击了返回微信，就会被iphone记住，认为用户不需要跳出原APP打开新APP，因此这个APP的Universal Links会被关闭，再也无效。还有在备忘录里长按Universal Links链接会出现"用XXApp打开"的选项，如果你点击了"用Safari浏览器打开"，那么点击此链接也会默认用浏览器打开url，而不是打开APP。
　　想要开启也不是不行，让用户重新用safari打开，Universals Links的页面，然后会出现很像苹果smart bar的东西，那个东西点了后就能打开。

##4.6 判断是否安装了APP及跳转APP Store
　　我们要做的时如果用户安装了APP就直接打开APP，如果没有安装就打开下载页面或者进入应用市场让用户下载应用，但是在前端时无法通过js去判断是否已经安装了APP，解决办法：
　　1.用URL Scheme时用延时。设置3秒延时，如果用户安装了APP，3秒内没有打开则进入下载页面或应用市场，弊端是用URL Scheme会有询问框“是否在XXXAPP中打开”，如果用户3秒内没有点击，则页面就跳转到了下载页。
　　2.安卓端Chrome浏览器可以用intent配置S.browser_fallback_url来使没有打开app时直接进入下载页面。
　　3.用Universal Links打开的页面设置为下载页，下载页里放置下载按钮，点击下载按钮进入应用市场。如果已经安装了APP，则直接打开APP，如果没有安装，则这个下载url会被当作普通链接，浏览器就能打开下载页，点击下载按钮，打开APP Store。

5.源码

源码地址：点击下载

6.实现的功能

IOS实现功能：
1.在浏览器中点击，若没有安装app,会跳转到下载页，点击下载按钮，打开itunes应用市场；
2.在浏览器中点击，若安装了app,则直接打开app;
3.在微信页面中点击按钮，若没有安装app,会跳转到下载页，点击下载按钮，打开itunes应用市场；
4.在微信页面中点击按钮，若安装了app,则直接打开app;
5.在微信消息中直接点击打开app的链接，可以直接打开app.(不是在微信浏览器中)
6.在记事本，短信，邮件中直接打开app

AOS实现功能：
1.在浏览器中点击，若没有安装app,3秒会跳转到下载页；
2.在浏览器中点击，若安装了app,则直接打开app;
3.在Chrome浏览器，没有 超过3秒后造成页面跳转到下载页 的问题

优小U
关注
专栏目录
微信内H5页面唤醒App
web全栈开发的博客
11-08 287
首先，简述一下这个需求的背景，产品希望能够让用户在微信内，打开一个h5页面，然后就能唤醒公司中维护的app，这个是为了能够更好的引流。
h5打开app源码
01-30
这是h5打开app源码，包含IOS和安卓平台，用到的技术有Universal Links,Intent,URL Scheme，详细介绍查看博客http://blog.csdn.net/zy1281539626/article/details/79203853
H5打开外部APP
Bonrui编程路
01-16 7807
H5开发我们会遇到这样的需求，在页面中打开外部APP。下面我们来总结一下H5打开APP的方式。并详细介绍 URL Scheme 打开方式。 目前常见的唤醒APP方式有： 1：URL Scheme 2：Android intent 3：Safari内置APP广告条 4：Universal Links 方式一：URL Scheme IOS和Android都支持Scheme，在APP开发时
h5浏览器跳转打开微信小程序
最新发布
qq_45320250的博客
09-04 855
首先，在项目中引入微信 JSSDK。
h5: 打开手机上的某个app
qq_38969618的博客
02-28 2587
url Scheme & universal link
js h5页面打开APP程序例子
weixin_44792197的博客
06-20 1843
例如，在 iOS 系统中，需要使用特定的协议来打开 APP，而在 Android 系统中，则可以使用类似于网页链接的方式打开 APP。需要注意的是，需要替换示例代码中的 myapp://open 和 https://www.example.com/ 两个 URL 地址为真实的地址。在实际使用时，需要根据具体的 APP 和备选网址进行调整。要在 H5 页面中实现打开 APP 程序的功能，可以使用 JavaScript 中的 window.location.href 方法来跳转到指定的 URL 地址。
ios系统中H5页面如何一键打开App？
A966669的博客
04-28 341
在移动互联网时代，H5页面因其跨平台、易传播的特性而广受欢迎。然而，当用户通过H5页面了解到感兴趣的内容后，如何快速引导用户打开对应的App进行深度体验，一直是运营者面临的挑战。特别是在iOS系统中，由于系统的封闭性，这一问题尤为突出。今天，我们就来探讨一种高效的解决方案——使用Xinstall实现H5页面一键打开iOS App。 首先，我们需要了解iOS系统的特性。在iOS系统中，想要通过H5
H5如何实现唤起APP
m0_67401228的博客
08-01 1906
写过hybrid的同学，想必都会遇到这样的需求，如果用户安装了自己的APP，就打开APP或跳转到APP内某个页面，如果没安装则引导用户到对应页面或应用商店下载。这里就涉及到了H5与Native之间的交互，为什么H5能够唤起APP并且跳转到对应的页面？就算你没写过想必也体验过，最常见的就是抖音里面的一些广告，如果你点击了广告，他判断你手机装了对应APP，那他就会去打开那个APP，如果没安装，他会帮你跳转到应用商店去下载，这个还算人性化一点的，有些直接后台给你去下载，你完全无感知。...
HTML5打开本地app应用的方法
09-28
总结来说，HTML5打开本地app应用的方法是通过定义自定义URL协议，并在应用的配置文件中设置监听这个协议的意图过滤器。在HTML5网页中，使用相应的链接或JavaScript代码来触发这个协议，从而启动本地应用。这种技术...
Html5如何唤起百度地图App的方法
12-13
这段改进的代码每隔20毫秒检查一次，如果在600毫秒内App仍未被唤起，且H5页面仍处于前台，那么就会打开Web端导航。同时，无论成功与否，200毫秒后都会清除定时器，防止不必要的资源消耗。 整个`wakeBaidu`函数包括...
H5安卓套壳应用（嵌套url）
08-29
开发者需要在Android Studio中打开`HybridApp`项目，然后替换项目中指定的URL，这个URL指向的就是要展示的H5网页。这样做可以让应用在启动时加载特定的Web内容，从而实现动态更新或切换不同功能模块。 Android ...
安卓网页h5打开另外一个应用
05-09
h5打开安卓app
详解如何通过H5（浏览器/WebView/其他）唤起本地app
01-19
前两天接到一个无线的需求，我这个小白可是忙活了好几天……在页面上有一个连接， 如果用户安装了APP，则点击打开对应的APP如果用户没有安装，则点击打开对应的设置连接.上网搜索了一下，基本都说可以实现，但是实际情况却不乐观. 当然只是其中的一个需求，还有的是现在各类app，分享出去的H5页面中，一般都会带着一个立即打开的按钮，如果本地安装了app，那么就直接唤起本地的app，如果没有安装，则跳转到下载。这是一个很正常的推广和导流量的策略，最近产品经理就提出了这样的一个需求，做一个像今日头条功能一样的带打开app的下载条等等，其他的就不说了！ 下面进入我们今天的正题，H5如何打开或者说唤起手机本地
h5打开APP
notaloney的博客
11-07 995
1，页面中加点击事件（判断是否在微信中打开） 2，具体的js方法
可能是最全的h5唤起App方案
热门推荐
分享前端开发工程师的一些日常生活、前端知识点、职业发展、对一些问题的看法、感悟等等
11-08 2万+
背景 调研 h5 唤起 App 方案 目的：引导已下载用户打开APP，引导未下载用户下载APP。 先说结论 ios9 及以上用 Universal Link（uc/qq浏览器不支持，不过safari占比最大） android6及以上用applink（chrome和小众浏览器支持，市场占比还是比想像中大的） 其它情况scheme（各种限制及弹窗确认） 微信ios7月的版本已经支持ulink了，android还是乖乖走应用宝吧（引导出微信也行，效果不好） ok，接下来我们一个一个聊 URL Scheme 有
h5 唤起app
m0_61195004的博客
01-07 869
1.a标签唤起 const a = document.createElement("a"); a.setAttribute("href",'' ); //打开app的协议，安卓提供 a.style.display = "none"; document.body.appendChild(a); a.click() //微信浏览器打开需要配置白名单 2.iframe 唤起 ifr.
网页web、h5打开app
gg_1st的博客
07-23 543
web端示例 打开淘宝 window.location.href="taobao://item.taobao.com/item.html?id=41700658839" uni-app schema 设置 manifest.json -> App常用其他设置 -> Android设置/Ios设置 -> Urlschemes
h5打开App并跳转到相应页面
weixin_46355018的博客
12-14 863
使用urlSchemes进行跳转。但是微信的浏览器不行，只能跳到手机浏览器再打开app。
h5页面唤起app如果没安装就跳转下载(ios和android)
09-04
H5页面唤起APP的方式可以通过判断手机设备类型来实现，当用户点击唤起APP的按钮时，先检测用户手机是iOS还是Android设备，然后进行相应的操作。 对于iOS设备，可以利用Universal Links技术进行唤起操作。在H5页面中，通过 JavaScript 判断是否能够打开 APP 的链接，如果可以，则直接跳转至 APP 的下载页面；如果不能打开，则跳转至 APP 在 App Store 的下载页面。 对于Android设备，可以使用Scheme URL和Intent URI的方式进行唤起操作。在H5页面中，通过 JavaScript 判断是否能够打开特定的Scheme URL或Intent URI，如果可以打开，则直接跳转至 APP 的下载页面；如果不能打开，则跳转至 APP 在应用商店的下载页面。 若用户手机上未安装需要唤起的APP，以上方式在唤起时会无法打开，并且会触发失败回调。在失败回调中，我们可以进行判断，如果是iOS设备，则跳转至 APP 在 App Store 的下载页面；如果是Android设备，则跳转至 APP 在应用商店的下载页面。 总结，通过检测用户手机设备类型，结合相应设备的唤起方式和下载页面，可以实现在H5页面唤起APP，若APP未安装则跳转至下载页面的功能。
评论 9
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

优小U

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值