前兩天接到一個(gè)無(wú)線的需求，我這個(gè)小白可是忙活了好幾天……在頁(yè)面上有一個(gè)連接， 如果用戶安裝了APP，則點(diǎn)擊打開(kāi)對(duì)應(yīng)的APP如果用戶沒(méi)有安裝，則點(diǎn)擊打開(kāi)對(duì)應(yīng)的設(shè)置連接.上網(wǎng)搜索了一下，基本都說(shuō)可以實(shí)現(xiàn)，但是實(shí)際情況卻不樂(lè)觀.
當(dāng)然只是其中的一個(gè)需求，還有的是現(xiàn)在各類app，分享出去的H5頁(yè)面中，一般都會(huì)帶著一個(gè)立即打開(kāi)的按鈕，如果本地安裝了app，那么就直接喚起本地的app，如果沒(méi)有安裝，則跳轉(zhuǎn)到下載。這是一個(gè)很正常的推廣和導(dǎo)流量的策略，最近產(chǎn)品經(jīng)理就提出了這樣的一個(gè)需求，做一個(gè)像今日頭條功能一樣的帶打開(kāi)app的下載條等等，其他的就不說(shuō)了！
下面進(jìn)入我們今天的正題，H5如何打開(kāi)或者說(shuō)喚起手機(jī)本地的app，縱觀百度和Google上面的答案，無(wú)非是兩種：
第一種方式：
通過(guò)在html的a標(biāo)簽里面的href中直接配置android端的schema，當(dāng)然，如果有host其他的配置，跟在后面就可以了，android端配置和代碼如下：
android端配置：
<activity android:name = ".MainActivity">
<intent-filter>
<action android:name = "android.intent.action.MAIN" />
<category android:name = "android.intent.category.LAUNCHER" />
</intent-filter>
<intent-filter>
<action android:name="android.intent.action.VIEW"/>
<category android:name="android.intent.category.DEFAULT"/>
<category android:name="android.intent.category.BROWSABLE"/>
<data android:host="jingewenku.com"
android:scheme="abraham"/>
</intent-filter>
</activity>
注：如果這個(gè)是配置在啟動(dòng)頁(yè)要和標(biāo)簽并列在一起，不然運(yùn)行后手機(jī)app的圖標(biāo)會(huì)沒(méi)有；注意schema協(xié)議要小寫(xiě),否則會(huì)有不能響應(yīng)的異常!
html代碼：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<a href="abraham://jingewenku.com/?pid=1">打開(kāi)app</a><br/>
</body>
</html>
這里我們來(lái)看看schema拼接協(xié)議的格式：
< a href="[scheme]://[host]/[path]?[query]">啟動(dòng)應(yīng)用程序< /a>
各個(gè)項(xiàng)目含義如下所示：
scheme：判別啟動(dòng)的App。 ※詳細(xì)后述
host：適當(dāng)記述
path：傳值時(shí)必須的key ※沒(méi)有也可以
query：獲取值的Key和Value ※沒(méi)有也可以
以上就能實(shí)現(xiàn)打開(kāi)本地的app了，當(dāng)然是在app存在的情況下，否則的話沒(méi)有反應(yīng)。
大家可能會(huì)問(wèn)上面的html代碼中配置的不是android里面配置的schema協(xié)議嗎？我明明沒(méi)有配置pid，為什么要寫(xiě)這個(gè)呢？這是因?yàn)槲覀冇行r(shí)候在喚起本地app的時(shí)候可能會(huì)向app傳遞一些參數(shù)，這些參數(shù)我們就可以配置在這里，我們只需要在oncreate里面獲取就可以了，代碼如下：
Intent intent = getIntent();
Uri uri = intent.getData();
if (uri != null) {
String pid = uri.getQueryParameter("pid");
}
如果還想要獲取android里面配置的schema協(xié)議的話，還可以這樣:
Uri uri = getIntent().getData();
if(uri != null) {
// 完整的url信息
String url = uri.toString();
Log.e(TAG, "url: " + uri);
// scheme部分
String scheme = uri.getScheme();
Log.e(TAG, "scheme: " + scheme);
// host部分
String host = uri.getHost();
Log.e(TAG, "host: " + host);
//port部分
int port = uri.getPort();
Log.e(TAG, "host: " + port);
// 訪問(wèn)路勁
String path = uri.getPath();
Log.e(TAG, "path: " + path);
List<String> pathSegments = uri.getPathSegments();
// Query部分
String query = uri.getQuery();
Log.e(TAG, "query: " + query);
//獲取指定參數(shù)值
String goodsId = uri.getQueryParameter("goodsId");
Log.e(TAG, "goodsId: " + goodsId);
}
如何判斷一個(gè)Schema是否有效 :
PackageManager packageManager = getPackageManager();
Intent intent = newIntent(Intent.ACTION_VIEW, Uri.parse("abraham://jingewenku.com:8888/goodsDetail?goodsId=10011002"));
List<ResolveInfo> activities = packageManager.queryIntentActivities(intent, 0);
booleanisValid = !activities.isEmpty();
if(isValid) {
startActivity(intent);
}
這種方式也是我百度到的最多的方式，但是這樣就帶來(lái)了一個(gè)問(wèn)題了，上面的需求說(shuō)的是“在頁(yè)面上有一個(gè)連接， 如果用戶安裝了APP，則點(diǎn)擊打開(kāi)對(duì)應(yīng)的APP；如果用戶沒(méi)有安裝，則點(diǎn)擊打開(kāi)對(duì)應(yīng)的設(shè)置連接”，這明顯就不符合需求了，這只能作為一些個(gè)別需求來(lái)使用了。
第二種方式：
既然通過(guò)在href配置schema協(xié)議不行，那就只能通過(guò)js代碼來(lái)實(shí)現(xiàn)了，只有這樣才能根據(jù)判斷實(shí)現(xiàn)app有的時(shí)候就打開(kāi)，沒(méi)有的時(shí)候就跳轉(zhuǎn)到下載鏈接下載。
我們知道，js是無(wú)法判斷手機(jī)是否安裝了某款app的，所以我們只能夠曲線救國(guó)了，我們可以獲取時(shí)間如果，長(zhǎng)時(shí)間不能呼起app則默認(rèn)為沒(méi)有安裝這款app，然后跳轉(zhuǎn)到下載頁(yè)。當(dāng)然這不是我想出來(lái)的，是網(wǎng)上的各位大佬的想法。在這里又要細(xì)分為兩種情況了。
1.直接喚醒
說(shuō)明：通過(guò)h5可換醒a(bǔ)pp，如訪問(wèn)一個(gè)URL，點(diǎn)擊按鈕，打開(kāi)應(yīng)用，如果該應(yīng)用APP沒(méi)有安裝，那么直接跳轉(zhuǎn)到App Store的APP下載頁(yè)面，通過(guò)點(diǎn)擊的方式兼容性較好，如果安裝了app，在手機(jī)各大瀏覽器(360瀏覽器、uc瀏覽器、搜狗瀏覽器、QQ瀏覽器、百度瀏覽器 )和QQ客戶端中，能喚醒。微信、新浪微博客戶端、騰訊微博客戶端無(wú)法喚醒。
代碼如下：
<html xmlns=http://www.w3.org/1999/xhtml>
<head>
<meta http-equiv=Content-Type content="text/html;charset=utf-8">
<head>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<title>點(diǎn)擊喚醒demo</title>
</head>
<body>
<style>
#zjmobliestart{font-size:40px;}
</style>
<!--
說(shuō)明：通過(guò)h5可換醒a(bǔ)pp，如訪問(wèn)一個(gè)URL，點(diǎn)擊按鈕，打開(kāi)應(yīng)用，如果該應(yīng)用APP沒(méi)有安裝，那么直接跳轉(zhuǎn)到App Store的APP下載頁(yè)面，通過(guò)點(diǎn)擊的方式。兼容性較好，如果安裝了app，在手機(jī)各大瀏覽器(360瀏覽器 uc瀏覽器 搜狗瀏覽器 QQ瀏覽器 百度瀏覽器 )和QQ客戶端中，能喚醒。微信 新浪微博客戶端 騰訊微博客戶端無(wú)法喚醒。
-->
<a href="zjmobile://platformapi/startapp" id="zjmobliestart" target="_blank">喚醒浙江移動(dòng)手機(jī)營(yíng)業(yè)廳！</a>
<script type="text/javascript">
function applink(){
return function(){
var clickedAt = +new Date;
setTimeout(function(){
!window.document.webkitHidden && setTimeout(function(){
if (+new Date - clickedAt < 2000){
window.location = 'https://itunes.apple.com/us/app/zhe-jiang-yi-dong-shou-ji/id898243566#weixin.qq.com';
}
}, 500);
}, 500)
};
}
document.getElementById("zjmobliestart").onclick = applink();
</script>
</body>
</html>
2.點(diǎn)擊喚醒
說(shuō)明：通過(guò)h5可換醒a(bǔ)pp，如訪問(wèn)一個(gè)URL就能直接打開(kāi)應(yīng)用，如果該應(yīng)用APP沒(méi)有安裝，那么直接跳轉(zhuǎn)到App Store的APP下載頁(yè)面。兼容性一般：在手機(jī)各大瀏覽器(360瀏覽器、uc瀏覽器、搜狗瀏覽器 QQ瀏覽器、百度瀏覽器 )能喚醒。微信、QQ客戶端、新浪微博客戶端、 騰訊微博客戶端無(wú)法喚醒。
代碼如下：
<!Doctype html>
<html xmlns=http://www.w3.org/1999/xhtml>
<head>
<meta http-equiv=Content-Type content="text/html;charset=utf-8">
<head>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<title>直接喚醒demo</title>
</head>
<body>
<style>
#zjmobliestart{font-size:40px;}
</style>
<!--
說(shuō)明：通過(guò)h5可換醒a(bǔ)pp，如訪問(wèn)一個(gè)URL就能直接打開(kāi)應(yīng)用，如果該應(yīng)用APP沒(méi)有安裝，那么直接跳轉(zhuǎn)到App Store的APP下載頁(yè)面
兼容性一般：在手機(jī)各大瀏覽器(360瀏覽器 uc瀏覽器 搜狗瀏覽器 QQ瀏覽器 百度瀏覽器 )能喚醒。微信 QQ客戶端 新浪微博客戶端 騰訊微博客戶端無(wú)法喚醒。
-->
<p id="zjmobliestart">喚醒浙江移動(dòng)手機(jī)營(yíng)業(yè)廳！</p>
<script type="text/javascript">
function applink(){
window.location = 'zjmobile://platformapi/startapp';
var clickedAt = +new Date;
setTimeout(function(){
!window.document.webkitHidden && setTimeout(function(){
if (+new Date - clickedAt < 2000){
window.location = 'https://itunes.apple.com/us/app/zhe-jiang-yi-dong-shou-ji/id898243566#weixin.qq.com';
}
}, 500);
}, 500)
}
applink();
</script>
</body>
</html>
這樣就完成了我們的需求了，在這個(gè)過(guò)程中，也遇到了很多熱心人的講解，這里記錄一下，剛開(kāi)始有人沒(méi)理解我的需求，以為我是在android端來(lái)實(shí)現(xiàn)，讓我通過(guò)包名的方式來(lái)檢驗(yàn)app是否安裝，這里記錄一下方法，代碼如下：
更多方法請(qǐng)查看我的工具類: CommonUtilLibrary
還有的就是以為我是要在app里面通過(guò)加載webview的形式來(lái)喚起本地的app，這里也記錄一下，代碼如下：
webView.setWebViewClient(new WebViewClient(){
@Override public boolean shouldOverrideUrlLoading(WebView view, String url) {
Uri uri=Uri.parse(url);
if(uri.getScheme().equals("abraham")&&uri.getHost().equals("jingewenku.com")){
String arg0=uri.getQueryParameter("arg0");
String arg1=uri.getQueryParameter("arg1");
}else{
view.loadUrl(url);
} return true;
}});
還要注意的是，如果是在微信中喚起本地app，手機(jī)的微信中，是利用微信內(nèi)置的瀏覽器（你可以將之前獲取的頁(yè)面在服務(wù)器上的地址發(fā)給你的任何聯(lián)系人，點(diǎn)擊發(fā)送的消息即可打開(kāi)網(wǎng)頁(yè)）打開(kāi)那個(gè)簡(jiǎn)單的HTML頁(yè)面，注意：直接打開(kāi)scheme://host/datastring是不可行的，微信不會(huì)把這串字符解析成網(wǎng)址，必須包裝成網(wǎng)頁(yè)才能借助微信的瀏覽器打開(kāi)。進(jìn)入后就是我們剛剛設(shè)計(jì)的頁(yè)面。這個(gè)時(shí)候，直接點(diǎn)擊“啟動(dòng)應(yīng)用程序”是不會(huì)喚醒之前安裝的APP的，因?yàn)槲⑿抛隽似帘?，你需要在右上角的菜單中選擇“在瀏覽器中打開(kāi)”。這個(gè)時(shí)候，有些瀏覽器就可以喚醒，有些瀏覽器則不行，比如筆者測(cè)試機(jī)MX4上的內(nèi)置瀏覽器不行，UC瀏覽器就能喚醒。部分瀏覽器不能喚醒，筆者查閱了很多資料也不能徹底解決，我現(xiàn)在唯一能想到的是將遇到問(wèn)題的瀏覽器讓前端做一個(gè)判斷，提示不支持，應(yīng)該使用什么瀏覽器。如果有讀者有解決方案，敬請(qǐng)留言，多謝！
后記：
微信中為什么無(wú)法喚醒App，需要“用瀏覽器打開(kāi)”？
因?yàn)槲⑿艑?duì)所有的分享連接做了scheme屏蔽，也就是說(shuō)分享連接中所有對(duì)于scheme的調(diào)用都被微信封掉了。
那為什么有些應(yīng)用是可以喚起的，比如大眾點(diǎn)評(píng)，嘀嘀打車？
從非技術(shù)角度講，因?yàn)榇蟊婞c(diǎn)評(píng)，嘀嘀打車都是微信的干兒子，親兒子。對(duì)于兒子有特殊照顧。
從技術(shù)角度講，微信有一個(gè)白名單，對(duì)于在白名單中的分享連接是不會(huì)屏蔽掉scheme調(diào)用的。
聽(tīng)不明白？那我們舉一個(gè)例子。
比如大眾點(diǎn)評(píng)的分享連接是 http://dazhongdianping.share.1.com
對(duì)應(yīng)到微信白名單中就會(huì)有 http://dazhongdianping 這一項(xiàng)，所有源自于這個(gè)連接的分享，都不會(huì)屏蔽scheme，
比如 http://dazhongdianping.share.2.com
http://dazhongdianping.share.3.com
就算是大眾點(diǎn)評(píng)的子公司也可以http://zigongsi.dazhongdianping.share.3.com，根域名也在白名單中，所以也可以使用。
到這里，大家就應(yīng)該明白，想借用大眾點(diǎn)評(píng)的scheme，繞過(guò)這個(gè)問(wèn)題是不可能的，除非你的分享連接能掛到大眾點(diǎn)評(píng)的根域名上。
這個(gè)問(wèn)題應(yīng)該解釋清楚了，另外提一句，對(duì)于下載apk這種，微信是屏蔽任何應(yīng)用的，對(duì)于兒子也不例外，所以你想提供下載鏈接，無(wú)論你是不是兒子，都逃不過(guò)使用瀏覽器打開(kāi)之中l(wèi)ow的方式了.
附錄：常見(jiàn)應(yīng)用的URL Scheme
1，系統(tǒng)默認(rèn)應(yīng)用
| 名稱 |
URL Scheme |
Bundle identifier |
| Safari |
http:// |
|
| maps |
http://maps.google.com |
|
| Phone |
tel:// |
|
| SMS |
sms:// |
|
| Mail |
mailto:// |
|
| iBooks |
ibooks:// |
|
| App Store |
itms-apps://itunes.apple.com |
|
| Music |
music:// |
|
| Videos |
videos:// |
|
2，常用第三方軟件
| 名稱 |
URL Scheme |
Bundle identifier |
| QQ |
mqq:// |
|
| 微信 |
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 |
| Chrome |
googlechrome:// |
|
| 優(yōu)酷 |
youku:// |
|
| 京東 |
openapp.jdmoble:// |
|
| 人人 |
renren:// |
|
| 美團(tuán) |
imeituan:// |
|
| 1號(hào)店 |
wccbyihaodian:// |
|
| 我查查 |
wcc:// |
|
| 有道詞典 |
yddictproapp:// |
|
| 知乎 |
zhihu:// |
|
| 點(diǎn)評(píng) |
dianping:// |
|
| 微盤 |
sinavdisk:// |
|
| 豆瓣fm |
doubanradio:// |
|
| 網(wǎng)易公開(kāi)課 |
ntesopen:// |
|
| 名片全能王 |
camcard:// |
|
| QQ音樂(lè) |
qqmusic:// |
|
| 騰訊視頻 |
tenvideo:// |
|
| 豆瓣電影 |
doubanmovie:// |
|
| 網(wǎng)易云音樂(lè) |
orpheus:// |
|
| 網(wǎng)易新聞 |
newsapp:// |
|
| 網(wǎng)易應(yīng)用 |
apper:// |
|
| 網(wǎng)易彩票 |
ntescaipiao:// |
|
| 有道云筆記 |
youdaonote:// |
|
| 多看 |
duokan-reader:// |
|
| 全國(guó)空氣質(zhì)量指數(shù) |
dirtybeijing:// |
|
| 百度音樂(lè) |
baidumusic:// |
|
| 下廚房 |
xcfapp:// |
|
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
