链接这些相关知识,你都知道吗?

链接有啥好了解的,做开发的谁不清楚。但是当问起:

  • URI ?

  • 短连接 ?

  • Deeplink ?如何实现的 ?

URI(Uniform Resource Identifier)

即统一资源标识符,是对互联网资源的字符串标识。共分为两种:

1. URL(Uniform Resource Locator)统一资源定位符,也就是链接。

最常见的例子:https://www.baidu.com/s?wd=掘金

其实,链接格式还是挺复杂的:

<协议>://<用户名>:<密码>@<主机>:<端口>/<路径>?<查询>#<片段>

当然不是所有的组成部分都有用,不过至少要有协议、主机和路径。

2. URN(Uniform Resource Name)统一资源名称。

它通过名称来标识资源,比如 urn:isbn:0321751043。通常用于以下情况:

  • 标识电子文档和其他不可变资源,如urn:isbn:0451450523用来标识一本书的国际标准书号。

  • 在语音电话、视频会议等应用中标识用户,如urn:user:alice123标识名为alice123的用户。

  • 在语音识别技术中标识语音命令,如urn:speech:playmusic标识播放音乐这个语音命令。

简单来说,每当需要一个统一且唯一的标识符来标识某个实体或对象时,都可以考虑使用 URN。

URN反正我是没用过。

什么是短连接?

顾名思义,短连接就是很短的链接:),与之相对的是长链接。

举个例子,百度页面的一个链接:

ini 复制代码
https://www.baidu.com/s?wd=%E9%95%BF%E9%93%BE%E6%8E%A5&rsv_spt=1&rsv_iqid
=0xa0c02d38002d14bc&issp=1&f=8&rsv_bp=1&rsv_idx=2&ie=utf-8&tn=baiduhome_pg&
rsv_dl=tb&rsv_enter=1&rsv_sug3=39&rsv_sug1=35&rsv_sug7=101&rsv_sug2=0&rsv_btype=i&
prefixsug=%25E9%2595%25BF%25E9%2593%25BE%25E6%258E%25A5&rsp=9&inputT=16793&
rsv_sug4=16994

这种长长的链接很常见,但如果这是一个平台的推广链接,那就太low了;如果换成这样就顺眼多了:

arduino 复制代码
https://dwz.cn/VIPlV5nN

那么长的链接能变得这么简洁?什么原理?简单来说:短链接是用来请求长链接的

当你访问短连接,他其实是去访问了一个中间服务器,服务器根据短连接查到长链接,再帮你跳转。

也就是说,短连接是长链接的映射;而想使用短链接,就需要专门的服务来转换长链接。

对短链接增加签名参数用来防止篡改,就得到了防伪短链[https://dwz.cn/abcd?sign=xxxxxx](https://dwz.cn/abcd?sign=xxxxxx)

Deeplink又是什么?

Deeplink叫做深链接 。比如你用浏览器打开一个淘宝页面,点击购买;这时如果你安装了淘宝,App将自动唤起,跳到对应的页面里。

Deeplink应用十分广泛:短信打开App、二维码打开App...... Deeplink就是为了打通APP间的界限,让你能够从一个应用跳到另一个应用。

**"支付宝"**的Deeplink链接大致长这样:

ini 复制代码
alipays://platformapi/startapp?appId=0000&url=https%3A%2F%2Fqr.alipay.com ...

Deeplink常见的实现方式有3种:

  • URL Scheme (通用性最佳)

  • Universal Link (iOS)

  • App Link(android)

上面的"支付宝"链接就是**URL Scheme,**其实它就是一个链接,依然是URL的格式。其中,alipays 是自定义协议。

URL Scheme 跳转过程:首先,当你的手机安装了"支付宝","支付宝"会在手机系统的映射表中注册自定义的协议:alipays;其次,手机系统会监听请求;如果链接的域名存在于映射表中,就会唤起对应的App了。

通常网页可以通过以下方式触发URL Scheme

  1. window.location.href=alipays://...

  2. <a href="alipays://...">alipay</a>

如果没装App?点击就没反应了。测试、运营小哥哥姐姐:"没下载那得跳下载页啊!"

可以用间接方式实现:

xml 复制代码
// 伪代码
<a href="alipays://..." onclick="toApp">alipay</a> 
<script>
var timer;
document.addEventListener('visibilitychange', function(e) {
    if (document.hidden) {
       clearTimeout(timer)
    }
})
function toApp() {
    timer = setTimeout(function() {
        window.location.href='http://download'
    }, 1000)
}
</script>

iOS系统实现了Universal Links;

Universal Links看起来就是一个正常的http的链接,但也能够唤起APP;它实际是多了一步域名校验的流程,从而使一个正常http链接有了Deeplink的能力。

具体过程:

  1. App下载网站的服务器根目录需要一个apple-app-site-association文件,声明可以处理的域名和链接路径。例如:App下载页为http://myapp/download,那么http://myapp/apple-app-site-association要能够访问到apple-app-site-association文件。

  2. 当iOS设备触发该网站的链接时,手机系统会先检查网站的apple-app-site-association文件,看是否有App可以处理这个链接。

  3. 如果有,系统会打开该App并传入链接数据;如果没App,则打开网页。

  4. App收到打开请求后,可以根据路径和参数处理业务逻辑。

Android则实现了APP Link功能;

APP Link 的过程基本与Universal Links相同,只是所需的文件与细节上有所差异。

结束

链接看似简单,但其相关的技术确十分广泛。希望本文可以帮助大家对链接有一个更全面系统的认识。


相关推荐
Martin -Tang7 分钟前
vite和webpack的区别
前端·webpack·node.js·vite
迷途小码农零零发8 分钟前
解锁微前端的优秀库
前端
王解1 小时前
webpack loader全解析,从入门到精通(10)
前端·webpack·node.js
我不当帕鲁谁当帕鲁1 小时前
arcgis for js实现FeatureLayer图层弹窗展示所有field字段
前端·javascript·arcgis
那一抹阳光多灿烂1 小时前
工程化实战内功修炼测试题
前端·javascript
放逐者-保持本心,方可放逐2 小时前
微信小程序=》基础=》常见问题=》性能总结
前端·微信小程序·小程序·前端框架
毋若成4 小时前
前端三大组件之CSS,三大选择器,游戏网页仿写
前端·css
红中马喽4 小时前
JS学习日记(webAPI—DOM)
开发语言·前端·javascript·笔记·vscode·学习
Black蜡笔小新5 小时前
网页直播/点播播放器EasyPlayer.js播放器OffscreenCanvas这个特性是否需要特殊的环境和硬件支持
前端·javascript·html
秦jh_6 小时前
【Linux】多线程(概念,控制)
linux·运维·前端