溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

怎么通過Html5喚起本地app

發(fā)布時間:2021-05-24 11:14:16 來源:億速云 閱讀:191 作者:小新 欄目:web開發(fā)

這篇文章主要介紹了怎么通過Html5喚起本地app,具有一定借鑒價值,感興趣的朋友可以參考下,希望大家閱讀完這篇文章之后大有收獲,下面讓小編帶著大家一起了解一下。

第一種方式:

通過在html的a標簽里面的href中直接配置android端的schema,當然,如果有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>

注:如果這個是配置在啟動頁要和標簽并列在一起,不然運行后手機app的圖標會沒有;注意schema協(xié)議要小寫,否則會有不能響應(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">打開app</a><br/>
        </body>
</html>

 這里我們來看看schema拼接協(xié)議的格式:

< a href="[scheme]://[host]/[path]?[query]">啟動應(yīng)用程序< /a>

各個項目含義如下所示:

scheme:判別啟動的App。 ※詳細后述

host:適當記述

path:傳值時必須的key ※沒有也可以

query:獲取值的Key和Value ※沒有也可以

以上就能實現(xiàn)打開本地的app了,當然是在app存在的情況下,否則的話沒有反應(yīng)。

大家可能會問上面的html代碼中配置的不是android里面配置的schema協(xié)議嗎?我明明沒有配置pid,為什么要寫這個呢?這是因為我們有些時候在喚起本地app的時候可能會向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);
 // 訪問路勁
 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);
}

 如何判斷一個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);
}

這種方式也是我百度到的最多的方式,但是這樣就帶來了一個問題了,上面的需求說的是“在頁面上有一個連接, 如果用戶安裝了APP,則點擊打開對應(yīng)的APP;如果用戶沒有安裝,則點擊打開對應(yīng)的設(shè)置連接”,這明顯就不符合需求了,這只能作為一些個別需求來使用了。

第二種方式:

既然通過在href配置schema協(xié)議不行,那就只能通過js代碼來實現(xiàn)了,只有這樣才能根據(jù)判斷實現(xiàn)app有的時候就打開,沒有的時候就跳轉(zhuǎn)到下載鏈接下載。
我們知道,js是無法判斷手機是否安裝了某款app的,所以我們只能夠曲線救國了,我們可以獲取時間如果,長時間不能呼起app則默認為沒有安裝這款app,然后跳轉(zhuǎn)到下載頁。當然這不是我想出來的,是網(wǎng)上的各位大佬的想法。在這里又要細分為兩種情況了。

1.直接喚醒

說明:通過h6可換醒app,如訪問一個URL,點擊按鈕,打開應(yīng)用,如果該應(yīng)用APP沒有安裝,那么直接跳轉(zhuǎn)到App Store的APP下載頁面,通過點擊的方式兼容性較好,如果安裝了app,在手機各大瀏覽器(360瀏覽器、uc瀏覽器、搜狗瀏覽器、QQ瀏覽器、百度瀏覽器 )和QQ客戶端中,能喚醒。微信、新浪微博客戶端、騰訊微博客戶端無法喚醒。

代碼如下:

<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>
<!--
說明:通過h6可換醒app,如訪問一個URL,點擊按鈕,打開應(yīng)用,如果該應(yīng)用APP沒有安裝,那么直接跳轉(zhuǎn)到App Store的APP下載頁面,通過點擊的方式。兼容性較好,如果安裝了app,在手機各大瀏覽器(360瀏覽器 uc瀏覽器 搜狗瀏覽器 QQ瀏覽器 百度瀏覽器 )和QQ客戶端中,能喚醒。微信 新浪微博客戶端 騰訊微博客戶端無法喚醒。
-->
<a href="zjmobile://platformapi/startapp" id="zjmobliestart" target="_blank">喚醒浙江移動手機營業(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.點擊喚醒

說明:通過h6可換醒app,如訪問一個URL就能直接打開應(yīng)用,如果該應(yīng)用APP沒有安裝,那么直接跳轉(zhuǎn)到App Store的APP下載頁面。兼容性一般:在手機各大瀏覽器(360瀏覽器、uc瀏覽器、搜狗瀏覽器 QQ瀏覽器、百度瀏覽器 )能喚醒。微信、QQ客戶端、新浪微博客戶端、 騰訊微博客戶端無法喚醒。

代碼如下:

<!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>
<!--
說明:通過h6可換醒app,如訪問一個URL就能直接打開應(yīng)用,如果該應(yīng)用APP沒有安裝,那么直接跳轉(zhuǎn)到App Store的APP下載頁面
兼容性一般:在手機各大瀏覽器(360瀏覽器 uc瀏覽器 搜狗瀏覽器 QQ瀏覽器 百度瀏覽器 )能喚醒。微信 QQ客戶端 新浪微博客戶端 騰訊微博客戶端無法喚醒。
-->
<p id="zjmobliestart">喚醒浙江移動手機營業(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>

 這樣就完成了我們的需求了,在這個過程中,也遇到了很多熱心人的講解,這里記錄一下,剛開始有人沒理解我的需求,以為我是在android端來實現(xiàn),讓我通過包名的方式來檢驗app是否安裝,這里記錄一下方法,代碼如下:

怎么通過Html5喚起本地app

更多方法請查看我的工具類: CommonUtilLibrary

還有的就是以為我是要在app里面通過加載webview的形式來喚起本地的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,手機的微信中,是利用微信內(nèi)置的瀏覽器(你可以將之前獲取的頁面在服務(wù)器上的地址發(fā)給你的任何聯(lián)系人,點擊發(fā)送的消息即可打開網(wǎng)頁)打開那個簡單的HTML頁面,注意:直接打開scheme://host/datastring是不可行的,微信不會把這串字符解析成網(wǎng)址,必須包裝成網(wǎng)頁才能借助微信的瀏覽器打開。進入后就是我們剛剛設(shè)計的頁面。這個時候,直接點擊“啟動應(yīng)用程序”是不會喚醒之前安裝的APP的,因為微信做了屏蔽,你需要在右上角的菜單中選擇“在瀏覽器中打開”。這個時候,有些瀏覽器就可以喚醒,有些瀏覽器則不行,比如筆者測試機MX4上的內(nèi)置瀏覽器不行,UC瀏覽器就能喚醒。部分瀏覽器不能喚醒,筆者查閱了很多資料也不能徹底解決,我現(xiàn)在唯一能想到的是將遇到問題的瀏覽器讓前端做一個判斷,提示不支持,應(yīng)該使用什么瀏覽器。如果有讀者有解決方案,敬請留言,多謝!

后記:

微信中為什么無法喚醒App,需要“用瀏覽器打開”?

因為微信對所有的分享連接做了scheme屏蔽,也就是說分享連接中所有對于scheme的調(diào)用都被微信封掉了。

那為什么有些應(yīng)用是可以喚起的,比如大眾點評,嘀嘀打車?

從非技術(shù)角度講,因為大眾點評,嘀嘀打車都是微信的干兒子,親兒子。對于兒子有特殊照顧。

從技術(shù)角度講,微信有一個白名單,對于在白名單中的分享連接是不會屏蔽掉scheme調(diào)用的。

聽不明白?那我們舉一個例子。

比如大眾點評的分享連接是 http://dazhongdianping.share.1.com

對應(yīng)到微信白名單中就會有 http://dazhongdianping 這一項,所有源自于這個連接的分享,都不會屏蔽scheme,

比如 http://dazhongdianping.share.2.com
http://dazhongdianping.share.3.com

就算是大眾點評的子公司也可以http://zigongsi.dazhongdianping.share.3.com,根域名也在白名單中,所以也可以使用。

到這里,大家就應(yīng)該明白,想借用大眾點評的scheme,繞過這個問題是不可能的,除非你的分享連接能掛到大眾點評的根域名上。

這個問題應(yīng)該解釋清楚了,另外提一句,對于下載apk這種,微信是屏蔽任何應(yīng)用的,對于兒子也不例外,所以你想提供下載鏈接,無論你是不是兒子,都逃不過使用瀏覽器打開之中l(wèi)ow的方式了.

附錄:常見應(yīng)用的URL Scheme

1,系統(tǒng)默認應(yīng)用

名稱URL SchemeBundle identifier
Safarihttp://&emsp;
mapshttp://maps.google.com&emsp;
Phonetel://&emsp;
SMSsms://&emsp;
Mailmailto://&emsp;
iBooksibooks://&emsp;
App Storeitms-apps://itunes.apple.com&emsp;
Musicmusic://&emsp;
Videosvideos://&emsp;

2,常用第三方軟件

名稱URL SchemeBundle identifier
QQmqq://&emsp;
微信weixin://&emsp;
騰訊微博TencentWeibo://&emsp;
淘寶taobao://&emsp;
支付寶alipay://&emsp;
微博sinaweibo://&emsp;
weico微博weico://&emsp;
QQ瀏覽器mqqbrowser://com.tencent.mttlite
uc瀏覽器dolphin://com.dolphin.browser.iphone.chinese
歐朋瀏覽器ohttp://com.oupeng.mini
搜狗瀏覽器SogouMSE://com.sogou.SogouExplorerMobile
百度地圖baidumap://com.baidu.map
Chromegooglechrome://&emsp;
優(yōu)酷youku://&emsp;
京東openapp.jdmoble://&emsp;
人人renren://&emsp;
美團imeituan://&emsp;
1號店wccbyihaodian://&emsp;
我查查wcc://&emsp;
有道詞典yddictproapp://&emsp;
知乎zhihu://&emsp;
點評dianping://&emsp;
微盤sinavdisk://&emsp;
豆瓣fmdoubanradio://&emsp;
網(wǎng)易公開課ntesopen://&emsp;
名片全能王camcard://&emsp;
QQ音樂qqmusic://&emsp;
騰訊視頻tenvideo://&emsp;
豆瓣電影doubanmovie://&emsp;
網(wǎng)易云音樂orpheus://&emsp;
網(wǎng)易新聞newsapp://&emsp;
網(wǎng)易應(yīng)用apper://&emsp;
網(wǎng)易彩票ntescaipiao://&emsp;
有道云筆記youdaonote://&emsp;
多看duokan-reader://&emsp;
全國空氣質(zhì)量指數(shù)dirtybeijing://&emsp;
百度音樂baidumusic://&emsp;
下廚房xcfapp://&emsp;

感謝你能夠認真閱讀完這篇文章,希望小編分享的“怎么通過Html5喚起本地app”這篇文章對大家有幫助,同時也希望大家多多支持億速云,關(guān)注億速云行業(yè)資訊頻道,更多相關(guān)知識等著你來學習!

向AI問一下細節(jié)

免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI