社群 學習 工具庫 休閒
搜尋
繁体中文
首頁 > web前端 > H5教程 > 詳解如何透過H5喚起本地app

詳解如何透過H5喚起本地app

小云云
發布： 2017-12-13 10:28:08
原創
14863 人瀏覽過

H5如何開啟或喚起手機本地的app，縱觀百度和Google上面的答案，無非是兩種：本文主要介紹了詳解如何透過H5（瀏覽器/WebView/其他）喚起本地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協議要小寫,否則會有不能回應的異常!

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拼接協定的格式：

#

< a href="[scheme]://[host]/[path]?[query]">启动应用程序< /a>
登入後複製

各個專案意義如下：

scheme：判別啟動的App。 ※詳細後述

host：適當記述

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

query：取得值的Key和Value ※沒有也可以

以上就能實現開啟本地的app了，當然是在app存在的情況下，否則的話沒有反應。

大家可能會問上面的html程式碼中設定的不是android裡面設定的schema協定嗎？我明明沒有配置pid，為什麼要寫這篇？這是因為我們有些時候在喚起本地app的時候可能會向app傳遞一些參數，這些參數我們就可以配置在這裡，我們只需要在oncreate裡面獲取就可以了，代碼如下：

Intent intent = getIntent();
    Uri uri = intent.getData();
    if (uri != null) {
        String pid = uri.getQueryParameter("pid");
    }
登入後複製

如果還要取得android裡面設定的schema協定的話，還可以這樣:

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);
 //获取指定参数值
 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，則點擊打開對應的APP；如果用戶沒有安裝，則點擊打開對應的設定連接”，這明顯就不符合需求了，這只能作為一些個別需求來使用了。

第二種方式：

既然透過在href設定schema協定不行，那就只能透過js程式碼來實現了，只有這樣才能根據判斷實作app有的時候就打開，沒有的時候就跳到下載鏈接下載。

我們知道，js是無法判斷手機是否安裝了某款app的，所以我們只能夠曲線救國了，我們可以獲得時間如果，長時間不能呼起app則默認為沒有安裝這款app，然後跳轉到下載頁。當然這不是我想出來的，是網路上的各位大佬的想法。這裡又要細分為兩種情況了。

1.直接喚醒

說明：透過h5可換醒app，如訪問一個URL，點擊按鈕，開啟應用，如果該應用程式APP沒有安裝，那麼直接跳到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>
<!--
说明：通过h5可换醒app，如访问一个URL，点击按钮，打开应用，如果该应用APP没有安装，那么直接跳转到App Store的APP下载页面，通过点击的方式。兼容性较好，如果安装了app，在手机各大浏览器(360浏览器 uc浏览器 搜狗浏览器 QQ浏览器 百度浏览器 )和QQ客户端中，能唤醒。微信 新浪微博客户端 腾讯微博客户端无法唤醒。
-->
<a href="zjmobile://platformapi/startapp" id="zjmobliestart" target="_blank">唤醒浙江移动手机营业厅！</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 = &#39;https://itunes.apple.com/us/app/zhe-jiang-yi-dong-shou-ji/id898243566#weixin.qq.com&#39;;  
                   }  
             }, 500);       
         }, 500)   
    };  
}  
document.getElementById("zjmobliestart").onclick = applink();  
</script>   
</body>
</html>
登入後複製

2.點選喚醒

說明：透過h5可換醒app，如造訪一個URL就能直接開啟應用，如果應用程式APP沒有安裝，那麼就直接跳到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>
<!--
说明：通过h5可换醒app，如访问一个URL就能直接打开应用，如果该应用APP没有安装，那么直接跳转到App Store的APP下载页面
兼容性一般：在手机各大浏览器(360浏览器 uc浏览器 搜狗浏览器 QQ浏览器 百度浏览器 )能唤醒。微信 QQ客户端 新浪微博客户端 腾讯微博客户端无法唤醒。
-->
<p id="zjmobliestart">唤醒浙江移动手机营业厅！</p>
<script type="text/javascript"> 
function applink(){   
    window.location = &#39;zjmobile://platformapi/startapp&#39;;  
        var clickedAt = +new Date;  
         setTimeout(function(){
             !window.document.webkitHidden && setTimeout(function(){ 
                   if (+new Date - clickedAt < 2000){  
                       window.location = &#39;https://itunes.apple.com/us/app/zhe-jiang-yi-dong-shou-ji/id898243566#weixin.qq.com&#39;;  
                   }  
             }, 500);       
         }, 500)   

}
applink();
</script>   
</body>
</html>
登入後複製

 這樣就完成了我們的需求了，在這個過程中，也遇到了許多熱心人的解說，這裡記錄一下，剛開始有人沒理解我的需求，以為我是在android端來實現，讓我透過包名的方式來檢驗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，手機的微信中，是利用微信內置的瀏覽器（你可以將之前獲取的頁面在伺服器上的地址發給你的任何聯絡人，點擊發送的訊息即可開啟網頁）打開那個簡單的HTML頁面，注意：直接打開scheme://host/datastring是不可行的，微信不會把這串字元解析成網址，必須包裝成網頁才能藉助微信的瀏覽器打開。進入後就是我們剛剛設計的頁面。這時候，直接點擊「啟動應用程式」是不會喚醒之前安裝的APP的，因為微信做了屏蔽，你需要在右上角的選單中選擇「在瀏覽器中開啟」。這時候，有些瀏覽器就可以喚醒，有些瀏覽器則不行，例如筆者測試機MX4上的內建瀏覽器不行，UC瀏覽器就能喚醒。部分瀏覽器不能喚醒，筆者查閱了很多資料也不能徹底解決，我現在唯一能想到的是將遇到問題的瀏覽器讓前端做一個判斷，提示不支持，應該使用什麼瀏覽器。如果有讀者有解決方案，請留言，多謝！

後記：

微信中為什麼無法喚醒App，需要「用瀏覽器開啟」？

因為微信對所有的分享連結做了scheme屏蔽，也就是說分享連結中所有對於scheme的呼叫都被微信封掉了。

那為什麼有些應用是可以喚起的，例如大眾點評，嘀叫叫車？

從非技術角度講，因為大眾點評，嘀嘀叫叫搭計程車都是微信的干兒子，親兒子。對於兒子有特殊照顧。

從技術角度講，微信有一個白名單，對於在白名單中的分享連結是不會屏蔽掉scheme呼叫的。

聽不懂？那我們舉個例子。

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

對應到微信白名單中就會有http://dazhongdianping 這一項，所有來源自於這個連結的分享，都不會屏蔽scheme，

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

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

到這裡，大家就應該明白，想藉用大眾點評的scheme，繞過這個問題是不可能的，除非你的分享連結能掛到大眾點評的根域名上。

這個問題應該解釋清楚了，另外提一句，對於下載apk這種，微信是屏蔽任何應用的，對於兒子也不例外，所以你想提供下載鏈接，無論你是不是兒子，都逃不過使用瀏覽器開啟之中low的方式了.

附錄：常見應用的URL Scheme

1，系統預設應用


##名稱URL SchemeBundle identifierSafarihttp:// mapshttp://maps.google.comPhone#SMSMail##iBooksibooks:// App Storeitms-apps://itunes.apple.com#Musicmusic:// Videosvideos: // #

2，常用第三方軟體
## 
tel://  
sms://  
mailto://  
##weico微博weico:// QQ瀏覽器mqqbrowser://com.tencent.mttlite uc瀏覽器dolphin://#com.dolphin.browser.iphone.chineseohttp://SogouMSE: //baidumap://##com.baidu.mapChromegooglechrome:// 優酷youku://  京東openapp.jdmoble:// #人人renren:// 美團imeituan://# #1號店wccbyihaodian://# 我查查wcc :// 有道字典#yddictproapp://## #知乎#點評微碟##sinavdisk:// 豆瓣fmdoubanradio: // 網易公開課ntesopen:// # #名片全能王camcard:// #QQ音樂qqmusic://騰訊影片tenvideo://# 豆瓣電影
#名稱 URL Scheme Bundle identifier
QQ mqq://  
微信 weixin://  
騰訊微博 TencentWeibo://  
#淘寶 taobao://  
#支付寶 alipay://  
微博 sinaweibo://  
歐朋瀏覽器
com.oupeng.mini 搜尋狗瀏覽器
com.sogou.SogouExplorerMobile #百度地圖
zhihu://  
dianping://  

doubanmovie:// 

網易雲音樂

orpheus:// 

####### ###網易新聞######newsapp://###### #############網易應用#####apper://##### # ############網易彩票######ntescaipiao://###### ############有道雲筆記### ###youdaonote://###### ############多看######duokan-reader://####### ############################################################################################ #######全國空氣品質指數######dirtybeijing://###### ############百度音樂######baidumusic:/ /###### ############下廚房######xcfapp://####### ############################################################################################## #####H5的多執行緒如何實作Web Worker############H5實作桌面通知以及在提示功能的實例############H5中​​如何取得和設定自訂屬性######

以上是詳解如何透過H5喚起本地app的詳細內容。更多資訊請關注PHP中文網其他相關文章！

相關標籤：
html5 本地
來源：php.cn
上一篇：移動端HTML5中判斷橫屏豎屏的方法 下一篇：Html5百葉窗效果的範例程式碼_html5教學技巧
本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
作者最新文章
最新問題
如何讓我的圖像顯示在頁面的主顯示幕上？ 我想做的是使用NASAAPI接收一些照片。然後在我的網頁的縮圖和主顯示屏上顯示這些照片。我只是弄清楚為什麼程式碼不從縮圖中獲取圖像並將其顯示在頁面上。我還使用HTML5以上版本的模...
來自於 2024-04-06 15:33:12
0
1
433
PDF檔案能夠運行HTML5和Javascript嗎？ 我有一個愚蠢的想法，想嘗試製作一個在任何計算機上都不會被阻止的程序，因為它將嵌入在PDF中（我聽說Javascript可以在PDF中運行）。它將在PDF檔案中運行HTML5和Jav...
來自於 2024-04-05 12:57:00
0
1
456
HTML5中的enctype和formenctype有什麼差別？ 我只是想知道HTMLLivingStandard（又稱新的HTML5規範）中的屬性enctype和formenctype之間有什麼區別？我一直在閱讀《開發人員的HTML標準》，但似...
來自於 2024-04-02 11:47:56
0
1
275
使頁面適合行動裝置嗎？ 我有很多網頁和一些網站。問題是，我是一個初學者。我使用基本的html5和css3，但我不知道如何使它們放大、縮小並且適合行動裝置。例如，這是我的頁面之一和我的網站之一，您可以在其中...
來自於 2024-04-01 20:42:38
0
1
259
相關專題
更多>
熱門推薦
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板