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

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

  • 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相同,只是所需的文件与细节上有所差异。

结束

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


相关推荐
蜗牛前端16 分钟前
codex 全流程开发上线的高颜值礼簿小程序
前端·微信小程序
大龄秃头程序员1 小时前
我在图文流 App 里落地双层缓存、弱网降级与 OOM 治理
前端
老王以为1 小时前
React Renderer 分离的多平台架构
前端·react native·react.js
hunterandroid1 小时前
Kotlin Coroutines 与 Flow:让异步任务更清晰
前端
Bigger2 小时前
从零搭建 AI 代码审查服务:一份前端也能看懂的 Python 学习笔记
前端·ci/cd·ai编程
lichenyang4532 小时前
JSAPI、NAPI、Biz、Imp:ASCF Demo 如何真正调用系统能力和 C++ 能力
前端
lichenyang4532 小时前
IPC、JSVM、UIThread、libuv:ASCF 架构图里最容易混的几个词
前端
用户059540174462 小时前
Redis记忆存储故障恢复测试踩坑实录:手动测试让我漏掉了2个一致性Bug
前端·css
用户2136610035722 小时前
Vue2脚手架工程化与Axios集成
前端·vue.js
我不是外星人2 小时前
我把 Claude Code 搬到网页!自研高颜值 Web 交互工作台
前端·ai编程·claude