H5打开应用-URL Scheme

最新推荐文章于 2024-07-23 11:22:40 发布
最新推荐文章于 2024-07-23 11:22:40 发布
阅读量1.4w 收藏 39
点赞数 7
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42895400/article/details/87799262
版权

H5打开应用-URL Scheme

URL scheme

scheme 是一种页面之间跳转的协议，不仅可以用于app之间进行跳转，还可以用于 H5 页面跳转到app页面。

无论Android还是IOS，都可以通过在H5页面中打开 scheme 协议的地址，从而打开本地app。

URL Schemes 有两个单词：

  • URL，http://www.apple.com 就是个 URL，我们也叫它链接或网址；
  • Schemes，表示的是一个 URL 中的一个位置——最初始的位置，即 ://之前的那段字符。比如 https://www.apple.com 这个网址的 Schemes 是 https。

你可以完全按照理解一个网页的 URL也就是它的网址的方式来理解一个 手机应用的 URL，拿苹果的网站和 微信APP来做个简单对比：

网页（苹果官网）应用（微信APP）
网站首页/打开应用<https://www.apple.com>weixin://
子页面/具体功能https://www.apple.com/mac/（Mac页面）weixin://dl/moments（朋友圈）

scheme 协议定义和 http 协议类似，都是标准的 URI 结构。

[scheme:][//host:port][path][?query][#fragment]
  • scheme : 协议名称 - 必须
  • host : 协议地址 - 必须
  • port : 协议的端口，可以不填
  • path : 协议路径，可用 / 连接多个
  • query : 携带的参数可用 & 连接多个
  • fragment : 锚点

Example：

wexin://tencent.com:8080/dl/news/open?data=902323&params=test
  • weixin : 协议名称
  • tencent.com : 域名
  • 8080 : 端口
  • /dl/news/open : 页面的路径
  • data, params : 传递的参数

示例URI及其组成部分。

          userinfo     host        port
          ┌─┴────┐ ┌────┴────────┐ ┌┴┐ 
  https://john.doe@www.example.com:123/forum/questions/?tag=networking&order=newest#top
  └─┬─┘ └───────┬────────────────────┘└─┬─────────────┘└──┬───────────────────────┘└┬─┘  
  scheme     authority                 path              query                      fragment

  ldap://[2001:db8::7]/c=GB?objectClass?one
  └─┬┘ └───────┬─────┘└─┬─┘ └──────┬──────┘
 scheme    authority  path       query

  mailto:John.Doe@example.com
  └──┬─┘ └─────────┬────────┘
  scheme         path

  news:comp.infosystems.www.servers.unix
  └─┬┘ └───────────────┬───────────────┘
 scheme              path

  tel:+1-816-555-1212
  └┬┘ └──────┬──────┘
scheme     path

  telnet://192.0.2.16:80/
  └──┬─┘ └──────┬──────┘│
  scheme    authority  path

  urn:oasis:names:specification:docbook:dtd:xml:4.1.2
  └┬┘ └──────────────────────┬──────────────────────┘
scheme                     path

各类URL Schemes

  1. 基本 URL Schemes，是指一个 URL 的 Schemes 部分，比如上文提到的微信的。这个部分的唯一功能，就是打开相应应用，而不能够跳转到任何功能。

    weixin://

  2. 复杂 URL Schemes 有两种：一种是直接打开某个应用的某个功能，另一种是打开某个功能后直接填写预设的字符

    http://images.google.com/images?q=关键字

  3. 变形 URL Schemes 是指一些应用利用了 URL Schemes 的规则和 系统的一些内置功能，来拓充复杂 URL Schemes，并使其中需要输入字符或参数的部分可以预设或输入后再跳转，进一步减少步骤。

    OmniFocus:///add?name=任务名&note=备注

  4. x-callback-URL

    如果我们还想让应用根据不同的结果有对应的反应，就要用到 x-callback-URL。比如当上一个 URL Schemes 运行成功以后，我是要回到跳转前的应用？还是要接另一个动作（接上另一段 URL Schemes，打开另一个应用的某个功能）？无论是跳转回上个应用还是打开另一个动作，只要你在运行完一个 URL Schemes 后还想再利用一段新的 URL Schemes 做下一件事，就要靠 x-callback-URL，它的固定语法是：

  • 在一个 URL Schemes 后面接&x-success，表示前一个 URL 成功以后下一步做什么；
  • 在一个 URL Schemes 后面接&x-error，表示前一个 URL 失败以后下一步做什么；
  • 在一个 URL Schemes 后面接&x-cancel，表示取消前一个 URL 的操作结果后下一步做什么；
  • 还有一个 &x-source 我们遇到了再说。

URL 编码（Encode）

URL中的参数如果包含特殊字符，需要预先进行url编码，否则的话URL可能不能打开。

URL 中的字符可以分为两类，一部分可以在链接中正常显示，比如字母、数字还有/等一部分符号。除此之外，全部不能正常显示，需要进行编码才能够作为 URL 的一部分出现。比如空格，在 URL 中就必须表示为 %20转换的规则不用深究，网上有很多工具（比如 FeHelper提供 URL 的编码和解码功能，可以把编码过的乱七八糟的 URL 解码为我们看得清爽的字符：

Hi%2C+%E6%88%91%E6%98%AF+%40JailbreakHum` 转换为 `Hi, 我是 @JailbreakHum

这些工具当然也可以反过来把我们常用的字符转换成可以在 URL 中使用的字符。

所以理论上，所有 URL 不支持的字符，都要编码。编码的任务也就是这么简单，把 URL 不支持的字符换位它支持的字符。既然如此，为什么有的时候不用编码？因为那些不用编码的时候，是 App 私下替你编了。

如何查找URL

其中，基本 URL Schemes 是可以由你自己手动查询的，所有支持基本 URL Schemes 的 App 都可以用以下方法查到其基本 URL Schemes。而其它几种 URL Schemes 因为是写进代码中的，需要查询各 App 的文档，来参照例子根据自己的需求制作 URL。

查找基本 URL Schemes
  1. IOS: 基本 URL Schemes 的查找方法可以通过 App 中的 info.plist 来查询
  2. AOS: 在AndroidManifest.xml文件中查找
复杂 / 变形 / x-callback-URL

若想全知全能，唯有查询文档。

复杂 / 变形 / x-callback-URL 这三种类型的 URL Schemes 是写入代码中的，无法通过查询 .plist 文件来获取。但支持这三种 URL Schemes 的 App 的开发者将这些功能加入到自己 App 中一般是希望用户使用的，所以针对那些希望用户使用的功能都会专门写文档来告诉读者如何使用它们。

如果你想搜索任何一个 App 的复杂 / 变形 / x-callback-URL，你只要搜 App 名 URL Schemes，一般就能找到该 App 的 URL Schemes 文档页面。同时，直接去这些 App 的官网查找相关网页也可以。

Universal Link(通用链接)

IOS9+支持通用链接，IOS用户可以点击指向您网站的链接，无需通过Safari即可无缝地重定向到已安装的应用。如果您的应用未安装，点击指向您网站的链接即可在Safari中打开您的网站。

通用链接为您提供了使用自定义URL方案时无法获得的几个主要优势。具体而言，通用链接是：

  • 独特。与自定义网址方案不同，其他应用无法声明通用链接，因为它们使用指向您网站的标准HTTP或HTTPS链接。
  • 安全。当用户安装您的应用时，IOS会检查您上传到网络服务器的文件，以确保您的网站允许您的应用代表其打开网址。只有您可以创建并上传此文件，因此您的网站与应用的关联是安全的。
  • 灵活。即使您的应用未安装，通用链接也能正常工作。未安装您的应用时，点按指向您网站的链接会在用户期望的Safari中打开内容。
  • 简单。一个URL适用于您的网站和您的应用。
  • 私人的。其他应用可以与您的应用进行通信，而无需知道您的应用是否已安装。

Android不支持Universal Link。

H5打开APP的流程

  1. AOS中，由于不支持统一通用链接使用scheme，如果系统有安装应用则打开应用，否则无反应。
  2. IOS9+中，应用有通用链接的，则使用通用链接，如果系统有安装（系统自动识别）应用则打开应用，否则打开网页; 没有通用链接的以及不支持通用链接的IOS，则与AOS一致;

如何检测系统是否安装相应的应用？

关于这个H5并不能做到。

在不知道系统是否安装相应的应用的情况下如何实现上面的场景呢？

1、通过设置延时，浏览器尝试打开URL scheme并记录时间点t1，在2秒计时后，检查当前时间t2，如果t2-t1 > 2200ms,说明唤起app成功(唤起app会是浏览器的定时器延后执行)，如果t2-t1 < 2200ms,可能没有安装app，可以引导用户进入下载页（IOS直接跳转APP Store, 如itms-apps://itunes.apple.com/cn/app/id477927812）或者直接跳转与应用功能对应的web页面。

function openWithApp(){
    var openTime = Date.now(),
	timer = null,
	appLink = "twitter://messages/compose?text=hello",
    webLink = "https://twitter.com/messages/compose?text=hello",
	appDownloadURL = "you app download page"，
	
	window.location.href = appLink;
	
	timer = setTimeout(function () {
	        if (Date.now() - openTime < 2200) {//加了200ms基准误差
	            window.location.href = appDownloadURL;
	        }else{
	            clearTimeout(timer);
	        }
	    }
	}, 2000);
	}

2、在浏览器实际上是没有能力判断手机里是否安装了某个App的，所以只能够采取一种投机取巧的方式。

在JavaScript中判断页面是否进入后台来判断打开成功。Html5提供了下列事件和属性可以利用：

  • pagehide : 页面隐藏时触发

  • visibilitychange : 页面隐藏没有在当前显示时触发(切换tab也会触发该事件)

  • document.hidden ： 当页面隐藏时，该值为true，显示时为false

上面这些事件或者属性并不是所有浏览器都支持。下面是一个给出为id为openBtn 的按钮添加打开scheme或者下载事件的例子，但对于Android 4.4版本以下则不支持

function openWithApp(id) {
    var scheme = "fb://", // 需要打开的app scheme 地址
        iosDownloadURL = "https://www.baidu.com", // 如果打开scheme失效的app下载地址
        aosDownloadURL = "https://www.baidu.com",
        ua = navigator.userAgent,
        isIOS = !!ua.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
        isAOS = ua.indexOf("Android") > -1 || ua.indexOf("linus") > -1,
        localDoc = document,
        localLocation = window.location,
        downloadTimer;

    // 尝试打开 scheme
    localLocation.href = scheme;

    // 设置3秒的定时下载任务，3秒之后下载app
    downloadTimer = setTimeout(function () {
        if (isAOS) {
            localLocation.href = aosDownloadURL;
        } else if (isIOS) {
            localLocation.href = iosDownloadURL;
        }
    }, 3000);

    localDoc.addEventListener("visibilitychange webkitvisibilitychange", function () {

        // 如果页面隐藏，推测打开scheme成功，清除下载任务
        if (localDoc.hidden || localDoc.webkitHidden) {
            clearTimeout(downloadTimer);
        }
    });

    window.addEventListener("pagehide", function () {
        clearTimeout(downloadTimer);
    });
}

有些APP在微信中为什么无法唤醒，需要“用浏览器打开”？

微信浏览器使用你自己APP的 url scheme 满足两个条件

  1. 使用腾讯开放平台的微下载服务,

    在微信浏览器中使用应用宝的微下载，将当前页面重定向到应用宝的下载页面

  2. 该应用在平台必须是S级应用

    将你的APP的Scheme添加到微信官方的白名单中

  3. 如果不符合以上两个条件，只有引导用户用其他浏览器打开

PS：对于下载apk这种，微信是屏蔽任何应用的，所以你想提供下载链接，都逃不过使用浏览器打开之中low的方式了.

参考：

  1. https://blog.csdn.net/u013517637/article/details/55251421
  2. https://www.jb51.net/html5/591158.html
  3. https://sspai.com/post/31500
  4. https://en.wikipedia.org/wiki/Uniform_Resource_Identifier
  5. https://www.jianshu.com/p/0ead88409212

附录：常见应用的URL Scheme

1、记录使用过的URL Scheme

名称URL Scheme对应的普通链接
Twitter发消息twitter://messages/compose?text=[yourText]https://twitter.com/messages/compose?text=[yourText]
Twitter发动态twitter://intent/tweet?text=[yourText]https://twitter.com/intent/tweet?text=[yourText]
打开Emailmailto:?body=[yourText]
给某人发Emailmailto:[emailAddress]?body=[yourText]
发短信SMSsms:body=hello（AOS）sms:&body=hello（IOS）
whatsapp发消息whatsapp://send?text=[yourText]
fbmessenger发消息(分享链接)fb-messenger://share/?link=[yourShareURL]https://www.facebook.com/dialog/send?display=popup&app_id=[yourAppID]&link=[yourShareURL]&redirect_uri=[yourShareURL]
fbmessenger发消息(指定对象)fb-messenger://m.me/[yourPageID]（通用） fb-messenger-public://user-thread/[yourPageID]（IOS）https://www.messenger.com/t/[yourPageID] / https://m.me/[yourPageID]
fb打开相关主页fb://page/[yourPageID]https://www.facebook.com/[yourPageID]
Amazon打开产品详情页com.amazon.mobile.shopping://www.amazon.com/dp/[yourAsin]https://www.amazon.com/dp/[yourAsin]
打开App Store中应用详情页itms-apps://itunes.apple.com/cn/app/[yourAppID]https://itunes.apple.com/cn/app/[yourAppID]
打电话tel:[telephoneNumber]

2、系统默认应用

名称URL SchemeBundle identifier
Safarihttp://
mapshttp://maps.google.com
Phonetel://
SMSsms://
Mailmailto://
iBooksibooks://
App Storeitms-apps://itunes.apple.com
Musicmusic://
Videosvideos://

3、常用第三方软件

名称URL SchemeBundle identifier
QQmqq://
微信weixin://
腾讯微博TencentWeibo://
淘宝taobao://
支付宝alipay://
微博sinaweibo://
weico微博weico://
QQ浏览器mqqbrowser://com.tencent.mttlite
uc浏览器dolphin://com.dolphin.browser.iphone.chinese
欧朋浏览器ohttp://com.oupeng.mini
搜狗浏览器SogouMSE://com.sogou.SogouExplorerMobile
百度地图baidumap://com.baidu.map
Chromegooglechrome://
优酷youku://
京东openapp.jdmoble://
人人renren://
美团imeituan://
1号店wccbyihaodian://
我查查wcc://
有道词典yddictproapp://
知乎zhihu://
点评dianping://
微盘sinavdisk://
豆瓣fmdoubanradio://
网易公开课ntesopen://
名片全能王camcard://
QQ音乐qqmusic://
腾讯视频tenvideo://
豆瓣电影doubanmovie://
网易云音乐orpheus://
网易新闻newsapp://
网易应用apper://
网易彩票ntescaipiao://
有道云笔记youdaonote://
多看duokan-reader://
全国空气质量指数dirtybeijing://
百度音乐baidumusic://
下厨房xcfapp://

PS: 更多URL Scheme可在下列链接中查找

  1. https://st3376519.huoban.com/share/1985010/VGi2N5Vf0C1MVnHCVWiBc8L9g15c9VGJbMGcFrb6/172707/list
  2. https://blog.csdn.net/dengchuanjiang/article/details/52554021
  3. https://blog.csdn.net/samuelltk/article/details/42290523
  4. https://mp.weixin.qq.com/s/p2-Fpua6tysgOZOml5Ywfw
MountGaoJiang
关注
H5跳转微信小程序，通过获取URL Scheme，实现短信跳转小程序，微信跳转小程序，邮件跳转小程序，外部链接跳转小程序
m0_47791238的博客
05-07 1万+
H5跳转微信小程序，通过AccessToken获取URL Scheme，在vue页面通过location.href实现短信，微信，邮件，外部链接等方式跳转小程序，实现链接跳转小程序并传参
Android页面跳转协议_URL Scheme详解
weixin_47458273的博客
08-18 4108
android中的scheme是一种页面内跳转协议，是一种非常好的实现机制，通过定义自己的scheme协议，可以非常方便跳转app中的各个页面；通过scheme协议，服务器可以定制化告诉App跳转那个页面，可以通过通知栏消息定制化跳转页面，可以通过H5页面跳转页面等。...
H5通过url scheme拉起对应应用
最新发布
hongxiaomeng的博客
07-23 880
URL Scheme的作用是应用间调用
aoshu3424的博客
07-16 922
URL Scheme的作用 我们都知道苹果手机中的APP都有一个沙盒，APP就是一个信息孤岛，相互是不可以进行通信的。但是iOS的APP可以注册自己的URL Scheme，URL Scheme是为方便app之间互相调用而设计的。我们可以通过系统的OpenURL来打开该app，并可以传递一些参数。 例如：你在Safari里输入www.alipay.com，就可以直接打开你的支付宝a...
移动浏览器H5页面通过scheme打开本地应用
weixin_30352191的博客
12-26 801
在移动端浏览器H5页面中，点击按钮打开本地应用主要通过 scheme 协议。本文主要介绍如何在浏览器H5页面中通过 scheme 协议打开本地应用。 scheme协议定义 scheme 是一种页面之间跳转的协议，不仅可以用于app之间进行跳转，还可以用于 H5 页面跳转到app页面。 无论Android还是IOS，都可以通过在H5页面中打开 scheme 协议的地址，从而打开本地app。 sche...
h5页面跳转微信小程序（最简单的方法|URL Scheme）
肥晨开发的学习之路
12-21 1万+
用户可以在H5页面中浏览和选择商品、服务等内容，然后直接跳转到微信小程序中进行购买、支付等操作，避免了在不同平台之间的切换和跳转，提高了使用效率和便捷性。微信内的网页如需打开小程序请使用微信开放标签-小程序跳转按钮，无公众号也可以直接使用小程序身份开发网页并免鉴权跳转小程序，见云开发静态网站跳转小程序。开发者无需调用平台接口，在MP平台->设置->隐私与安全->明文Scheme拉起此小程序声明后，可自行根据如下格式拼接appid和path等参数，作为明文 URL Scheme 链接。行业内幕，洞察先机。
URL Schemes入门
dasongbo7290的博客
05-01 582
自定义URL Schemes 1、引言 URL Schemes 应用在 iOS 上已经很久了。对于使用者来说，在沙盒机制下的 iOS 中，如果想做到一定程度上的自动化就不可避免地要用到 URL Schemes。但因为 URL Schemes 的使用方式不像传统 iOS 使用者接触到的图形界面那样可以直观地点来点去，造成了对它有兴趣的人（尤其是对英文有恐惧的人）一定程度上...
h5页面跳转微信小程序（最简单的方法-URL Scheme）
12-21
由于微信小程序是一种只能在微信内部访问的应用程序，而H5页面可以在任何浏览器中访问，因此需要通过跳转来实现两者之间的衔接。 对于用户来说，H5页面跳转微信小程序可以提供更好的用户体验。用户可以在H5页面中...
callapp-lib：h从h5（H5唤起客户端）调用应用
02-05
callapp-lib是一个H5唤起APP的解决方案，能够满足大部分唤起客户端的场景，也可以扩展出扩展口，帮你实现一些定制化的功能。 如果您想了解一些启发端的原理知识，或者阅读下面的文档有不理解的名词，可以访问博客。 ...
URL_Scheme页面跳转协议使用Demo
01-11
在Android开发中，URL Scheme是一种实现应用程序间交互的技术，它允许一个应用启动另一个应用或触发特定功能。这个“URL_Scheme页面跳转协议使用Demo”是基于Kotlin编写的，展示了如何实现自定义URL Scheme来实现在...
微信URL Scheme码+长链接转短链接+短链接通过h5页面跳转到微信小程序
IT_Most的博客
11-16 5177
生成微信URL Scheme码--》长链接转换成短链接--》通过短信进行推广--》访问营销短信
iOS 唤起APP之URL Scheme
qq_39714355的博客
07-10 2207
什么是URL Scheme 简单的说，由于苹果选择使用沙盒机制来保障用户的隐私和安全，APP只能访问自己沙盒数据，但同时也阻碍了应用间合理的信息共享。因此苹果提供了一个可以在APP之间跳转的方法:URL Scheme。如果你的APP需要其他APP访问某些功能或者数据，那么你需要在你的APP定义一个相应的URL Scheme。当别的APP使用URL Scheme进行访问时，系统会根据URL Sche...
H5实现生成urlscheme并从H5跳转到小程序
huaweichenai的博客
07-09 2480
微信小程序
URL scheme是什么？能拿来做什么？
热门推荐
lengye7的博客
04-27 2万+
一、什么是url scheme？ URL scheme是系统提供的一种机制，它可以由应用程序注册，然后其他程序通过url scheme来调用该应用程序。 它分为两部分：一部分是系统默认的url scheme，另外一部分是应用程序自己注册的url scheme。 例如：mailto:这种就属于系统默认的一种机制。访问一个mailto的url链接，可以直接调用本机的邮件客户端，如： 目前它...
H5通过URL Scheme协议唤起App
孤傲的博客
08-28 1万+
场景 在 h5 页面上，用户点击打开app按钮，如果已经安装了App则打开app，否则引导用户前往应用市场。 实现思路 在 h5 页面上唤醒app ，需要用到 scheme协议（由app端提供），但是在微信浏览器里scheme不起作用，因此需要先判断是否为微信浏览器，是微信浏览器的话，提示到浏览器打开，不是的话，再判断是Android端还是iOS端，然后尝试scheme协议唤醒app，如果唤醒失败再转向应用市场。 URL Scheme协议 URL Scheme是一种页面内跳转协议，通过这个协议可以比
h5跳转小程序------加密URL Scheme
D5498543的博客
02-01 2890
自 2023 年 12 月 19 日起，微信官方团队新增明文URL Scheme跳转小程序开发者无需调用平台接口，可自行根据如下格式拼接 appid 和 path 等参数，作为 URL Scheme 链接。就像这样：用window.location.href就能跳转小程序那明明已经有这个方便的方法了，我们还要用加密URL Scheme跳转小程序呢原因就是因为这个方法出来的时间还太短了，有限制，看我下面这张图：跳转小程序机型微信浏览器外部浏览器加密URL Scheme。
URL Schemes
weixin_30588729的博客
11-23 100
APP 被唤醒离不开对URL Schemes的认知。 苹果选择沙盒来保障用户的隐私和安全，但沙盒也阻碍了应用间合理的信息共享，于是有了 URL Schemes 这个解决办法。 URL Schemes 是什么 通过对比网页链接来理解 iOS 上的 URL Schemes，应该就容易多了。 URL Schemes 有两个单词： URL，我们都很清楚，http://www.apple.co...
H5通过schemeUrl、OpenInstall方式唤醒app
qq_40394071的博客
10-17 2120
记录H5通过schemeUrl、OpenInstall方式唤醒app
H5 urlscheme如何拼接地址打开微信并访问指定授权页面(非支付)
06-07
要想通过H5 urlscheme拼接地址打开微信并访问指定授权页面，可以按照以下步骤操作： 1. 在微信开放平台中创建一个新的网页应用，并获取AppID。 2. 在前端页面中，添加一个“微信授权登录”按钮，并在按钮点击事件中，使用以下地址拼接方式： ``` weixin://dl/business/?appid=wxAPPID&bizloginurl=REDIRECT_URL&nonce=NONCE&timestamp=TIMESTAMP&signature=SIGNATURE ``` 其中，wxAPPID是在微信开放平台中获取到的AppID，REDIRECT_URL是授权成功后要跳转的页面地址，NONCE是一个随机字符串，TIMESTAMP是当前时间戳（秒级），SIGNATURE是按照微信开放平台要求生成的签名，需要使用AppSecret和NONCE等参数进行加密。 3. 在后端服务器中，根据前端传递的参数，生成签名并将其返回给前端。 4. 前端根据后端返回的签名，将完整的地址拼接完成，并使用location.href进行跳转。 5. 如果用户已经安装了微信客户端，并且授权成功，微信会自动跳转到指定页面。如果用户没有安装微信客户端，则会提示用户下载微信客户端。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值