詳解如何透過H5喚起本地app-H5教程-PHP中文網

首頁

web前端

H5教程

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

小云云

Dec 13, 2017 am 10:28 AM

html5 本地

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中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn