這個(gè)詞我第一次是在IONIC Deeplinks中看到的，它表示在H5中使用一個(gè)鏈接（URL Scheme或者Universal Links）就能打開我們指定的App。這樣的需求可以參考下面的流程圖：
因此，結(jié)合這個(gè)需求，我介紹下DeepLinks的概念和交互設(shè)計(jì)。
DeepLinks的概念
在H5中點(diǎn)擊鏈接跳轉(zhuǎn)到App可以使用兩個(gè)方式實(shí)現(xiàn)：URL Scheme或者Universal Links，URL Scheme較為通用，Universal Links為IOS9.0+系統(tǒng)專屬。
URL Scheme
簡(jiǎn)單地說，就是使用這樣的連接mycoolapp://path?foo=bar開啟你的App，例如：
<a href="mycoolapp://">Open my app</a>
<a href="mycoolapp://somepath">Open my app</a>
<a href="mycoolapp://somepath?foo=bar">Open my app</a>
<a href="mycoolapp://?foo=bar">Open my app</a>
或者來一個(gè)真實(shí)的案例：
使用手機(jī)模式在外部瀏覽器中打開，且安裝了
知乎或者網(wǎng)易新聞，否則點(diǎn)擊會(huì)報(bào)錯(cuò)或者沒反應(yīng)。
-
知乎: 《JS判斷APP是否安裝?》
-
網(wǎng)易新聞: 《劉強(qiáng)東力挺順豐：我相信王衛(wèi)為人，質(zhì)疑菜鳥違法》
1. 給IOS的建議
上面的這種方式對(duì)全系的Android和IOS系統(tǒng)都適用，但是對(duì)于IOS9.0+在Safari中會(huì)存在以下問題（以知乎為例）：
在Safari中點(diǎn)擊鏈接會(huì)彈出在“知乎”中打開？的提示，且JS腳本此時(shí)不會(huì)中斷，如果設(shè)置了setTimeout等操作則完全達(dá)不到預(yù)期，因?yàn)椴恢烙脩羰裁磿r(shí)候會(huì)點(diǎn)擊打開還是取消。
因此，建議使用Universal Links式。當(dāng)用戶安裝了App則流暢的跳轉(zhuǎn)到App中，如果沒安裝則進(jìn)入Universal Links所指向的位置，一般是下載中轉(zhuǎn)頁。
2. 給Android的建議
這個(gè)問題和IOS9.0+在Safari中出現(xiàn)的問題相同，一些安卓機(jī)會(huì)有ActionSheet彈出提示是否進(jìn)入App等選項(xiàng)，因此也會(huì)出現(xiàn)setTimeout失效的問題。目前「知乎」的方式是：第一次嘗試使用URL Scheme，1000ms后H5跳轉(zhuǎn)到下載中轉(zhuǎn)頁而不做其他處理。
3. 微信、微博、QQ、支付寶等殼子會(huì)攔截URL Scheme
攔截的意思是點(diǎn)擊了這樣的鏈接會(huì)毫無反應(yīng)，上面的示例鏈接可以在微信中體驗(yàn)下。但是IOS9.0+使用Universal Links的方式上述平臺(tái)是無法攔截的。因此，對(duì)于安卓用戶只能跳轉(zhuǎn)到下載中轉(zhuǎn)頁再做后續(xù)動(dòng)作。
4. URL Scheme命名規(guī)則
- 不要使用已存在的scheme，比如：zhihu、twitter、newsapp、fb等
- 使用小寫字母
- 不要使用
-，因?yàn)榘沧肯聲?huì)轉(zhuǎn)化為_ - 使用一個(gè)單詞且不加空格
5. 建議
建議讓IOS和Android的小伙伴提供一致規(guī)則的URL Scheme規(guī)則。
Universal Links
這個(gè)方法是專屬IOS9.0+的，簡(jiǎn)單來說就是一種能夠方便的通過傳統(tǒng)的HTTP/HTTPS 鏈接來啟動(dòng)App，使用相同的網(wǎng)址打開網(wǎng)站和App。如果英語可以的話建議閱讀下面的鏈接：
當(dāng)用戶點(diǎn)擊鏈接時(shí)，如果安裝了App則跳轉(zhuǎn)到App；如果沒安裝則打開鏈接指向的網(wǎng)址。相比于URL Scheme方案具有以下優(yōu)點(diǎn)：
- Unique：因?yàn)槭鞘褂玫臉?biāo)準(zhǔn)HTTP or HTTPS鏈接到自己的網(wǎng)站，因此別的應(yīng)用無法偽造
-
Secure：IOS系統(tǒng)會(huì)檢查放在自己服務(wù)器上的
apple-app-site-association文件，這個(gè)文件用于關(guān)聯(lián)網(wǎng)站和app之間的聯(lián)動(dòng)關(guān)系 -
Flexible：如果沒安裝應(yīng)用，則點(diǎn)擊
Universal Links會(huì)跳轉(zhuǎn)到關(guān)聯(lián)的網(wǎng)址，可以是主頁也可以是下載引導(dǎo)頁 - Simple：一個(gè)URL連接可以給App服務(wù)，也可是一個(gè)簡(jiǎn)單的網(wǎng)站
- Private：別的應(yīng)用無法攔截這個(gè)過程，也無法知道后續(xù)是開啟App還是跳轉(zhuǎn)到Safari
1. 這里給兩個(gè)示例：
使用IOS手機(jī)在任何webview中打開，且安裝了
知乎或者網(wǎng)易新聞，否則點(diǎn)擊就會(huì)進(jìn)入鏈接指向的網(wǎng)站。
-
知乎: 《JS判斷APP是否安裝?》
-
網(wǎng)易新聞: 《劉強(qiáng)東力挺順豐：我相信王衛(wèi)為人，質(zhì)疑菜鳥違法》
2. 如何獲得IOS版本
var arr = window.navigator.userAgent.match(/OS (\d+)_(\d+)?/)
var version = arr[1] + '.' + arr[2]
// -> 9.1
使用何種方式觸發(fā)跳轉(zhuǎn)
這里有三種方式：
- iframe
- a標(biāo)簽href屬性
- window.location.href
現(xiàn)在網(wǎng)上給的方案都是大概1年左右，都傾向于使用iframe，但是像「網(wǎng)易新聞」和「知乎」都是使用的window.location.href（翻看了源碼），好吧，用這個(gè)方案吧。
在IOS的Safari上使用iframe方案點(diǎn)擊無反應(yīng)
交互設(shè)計(jì)
上面的關(guān)系理清，交互就很明確了，簡(jiǎn)單的流程如下圖：
因?yàn)椤妇W(wǎng)易新聞」和「知乎」兩個(gè)平臺(tái)都對(duì)setTimeout定時(shí)跳轉(zhuǎn)沒有處理，因此都會(huì)進(jìn)入跳轉(zhuǎn)中轉(zhuǎn)頁然后根據(jù)設(shè)備類型及殼子類型初始化對(duì)應(yīng)的操作提示及下載鏈接。
關(guān)于這這部分的代碼，請(qǐng)參考我寫的一個(gè)Demo示例： 仿「知乎」中轉(zhuǎn)頁項(xiàng)目工程，如果需要對(duì)setTimeout處理的話，建議監(jiān)聽頁面hide事件，對(duì)應(yīng)的兼容庫(kù)在這里：visibly.js。
最后
作為前端，你需要向Android和IOS開發(fā)的小伙伴要URL Scheme地址及定位規(guī)則，此外還要向IOS開發(fā)要Universal Links的地址及定位規(guī)則，你這邊需要準(zhǔn)備Universal Links指向的網(wǎng)址，一般是下載頁或者下載引導(dǎo)頁。下載引導(dǎo)頁會(huì)根據(jù)用戶的環(huán)境給出正確的提示及下載鏈接。
希望以上對(duì)你有用。
