作為前端開發人員經常會有這樣的需求,如果某個使用者安裝了自己的APP就開啟APP首頁或則指定頁面,如果沒有安裝APP就跳轉到相應下載頁面。這樣的一個需求也是拉新和裂變必不可少的環節,所以是需要我們去解決的。今天來看看到底如何實現呢?
跳轉APP方式
目前實現該功能的有兩種比較好的方式:URL Scheme、meta標籤和Universal Links。
URL Scheme
URL Scheme就是一個可以讓app相互之間可以跳轉的對外介面。通過給APP定義一個唯一的URL路徑來從外部快速的開啟這個指定的APP,每個app的URL Scheme都是不一樣的,如果存在一樣的URL Scheme,那麼系統就會響應先安裝那個app的URL Scheme,因為後安裝的app的URL Scheme被覆蓋掉了,是不能被呼叫的。URL scheme的格式是:
[scheme]://[host]/[path]?[query]
複製程式碼
介紹幾個常用的URL Scheme平臺:
- QQ: mqq://
- 微信: weixin://
- 騰訊微博: TencentWeibo://
- 淘寶: taobao://
- 支付寶: alipay://
- 微博: sinaweibo://
同時支援Android和iOS平臺
meta標籤
在網頁上設定meta標籤,使用safari開啟的時候,就會在頂部顯示自己app的導航條。如果沒有安裝app點選能夠跳轉到appstore去下載,如果安裝了app就能直接通過頂部的meta標籤喚醒app了。
iOS獨有
Universal Links
Universal Links就是一個通用連結,iOS9以上的使用者,可以通過點選這個連結無縫的重定向到一個app應用,而不需要通過safari開啟跳轉。如果使用者沒有安裝這個app,則會在safari中開啟這個連結指向的網頁。
iOS獨有並且是iOS9.0才出的
各種方式的使用
URL Scheme和Universal Links都是需要配置的,只有配置了才能有作用。
URL Scheme使用
URL Scheme的使用方式不難,最簡單的使用方式就是新增一個a標籤連結即可:
<a href="weixin://">開啟微信</a>
複製程式碼
這種方式訪問是比較簡單的,安卓和IOS都可以使用,但是在微信端就不行了,微信端設定了白名單,完全遮蔽了URL Scheme 用法,除非加入了白名單,像京東就可以直接開啟,否則是不可能的。
meta標籤使用
meta標籤的方式也很簡單隻需要在網頁中新增meta標籤即可:
<meta charset="UTF-8" name="apple-itunes-app" content="app-id=7777777, affiliate-data=myAffiliateData, app-argument=yourScheme://">
複製程式碼
效果就是在網頁的頂部顯示一個置頂條。
Universal Links使用
這種方式配置有點麻煩,本人也沒有接觸過iOS的開發所以就給大家一個官方網站的介紹了
總結
上面的每一種方式都不能完美的解決,要麼只有蘋果支援,要麼會有很多頭部APP限制,所以需要自己來做很多其它工作才能適配。
首先我們要確認採取哪一種方式,綜合以上介紹唯有第一種URL Scheme的方式應該是算是最優的選擇了畢竟兩個平臺都支援,接下倆就是如何解決在頭部APP裡面如何開啟,其實這個問題通常都是提示使用者在外部瀏覽器中開啟,所以這樣基本就解決了這個難題,下面就用程式碼來一步步實現。
實現喚醒APP功能
提示瀏覽器開啟
首先需要實現一個在瀏覽器開啟的小提示如下:
實現判斷頭部APP的功能
這裡就是通過瀏覽器的User-Agent來判斷是否為微信或則其它APP瀏覽器,程式碼如下:
/**
* 判斷瀏覽器是否為頭部APP
*/
function isBlackApp() {
var u = navigator.userAgent.toLowerCase();
return /micromessenger/i.test(u) || u.indexOf("weibo") > -1 || u.indexOf("qq") > -1 || u.indexOf('mqqbrowser') > -1;
}
複製程式碼
上面的函式判斷了幾種瀏覽器,微信、微博、QQ、QQ瀏覽器。如果點選開啟或則下載按鈕時就判斷是否為頭部APP,如果是則提示在瀏覽器開啟否則直接開啟自己的APP即可,程式碼如下:
function openTuer() {
if (isBlackApp()) {
// 頭部APP讓網頁顯示提示在瀏覽器中開啟
showTips();
} else {
// 不是頭部APP就直接開啟,這裡大家開始可以不用引數,後面寫好再來新增即可
openApp(0, 0);
}
}
複製程式碼
喚醒APP的核心方法
上面也提到了openApp這個函式,那麼具體是什麼樣的呢,這裡我們就來看看如何去實現這個函式。這裡按照目前自己的專案需求就是開啟APP需要兩個引數一個是開啟APP的某一個頁面which,一個是開啟某個頁面需要的引數arg。所以我們的openApp函式才需要兩個引數。
openApp的實現
openApp這個函式很簡單就是呼叫兩個函式如下:
function openApp(which, arg) {
jumpApp("testApp://which=" + which + "&arg=" + arg);
noApp();
}
複製程式碼
第一個函式就是負責開啟APP的,第二個負責如果沒有開啟APP或沒有安裝APP時跳轉的地址處理。
jumpApp的實現
這個函式的實現要注意iOS8之前是可以使用iframe來實現的,但是之後的就不行了,被蘋果遮蔽了,所以只能通過頁面跳轉了,具體程式碼如下:
function jumpApp(t) {
try {
var e = navigator.userAgent.toLowerCase(),
n = e.match(/cpu iphone os (.*?) like mac os/);
if (((n = null !== n ? n[1].replace(/_/g, ".") : 0), parseInt(n) >= 9)) {
window.location.href = t;
} else {
var r = document.createElement("iframe");
(r.src = t), (r.style.display = "none"), document.body.appendChild(r);
}
} catch (e) {
window.location.href = t;
}
}
複製程式碼
noApp的實現
noApp的實現也很簡單就是定義一個定時器,如果在某個時間段內沒啥反應就跳轉到指定的下載頁面即可。具體程式碼如下:
var timer = null;
function noApp() {
var t = Date.now(),
r = "http://www.tuerapp.com";
timer = setTimeout(function() {
return Date.now() - t > 2200
? (clearTimeout(timer), !1)
: !document.webkitHidden && !document.hidden && void (location.href = r);
}, 2000);
}
複製程式碼
到此就實現了基本的功能了,實際過程中可能還有很多問題存在,如有請留言哦。