H5中啟動Android App

首先明晰,微信里屏蔽了schema協議。除非你是微信的合作伙伴之類的,他們專門給你配置進白名單。否則,我們就沒辦法通過這個協議在微信中直接喚起app。

因此,我們需要先判斷頁面場景是否在微信中,如果在微信中,則會提示用戶在瀏覽器中打開。

H5中間接判斷應用是否安裝

這里的邏輯很簡單,當沒有成功打開app的時候,新頁面不會彈出則頁面邏輯繼續進行;否則如果進入了新頁面,則頁面邏輯便終止了。所以我們可以另開一個延時的線程來判斷這個事情

if(...){
document.location = '';
setTimeout(function(){
   //此處如果執行則表示沒有app
},200);
}

通過H5喚起APP

編輯AndroidManifest.xml,主要是增加第二個<intent-filter>,launchapp用來標識schema,最好能保證手機系統唯一,那樣就可以打開應用,而不是彈出一個選擇框??梢愿綆ё约旱臄祿ㄟ^string傳遞到activity,比如完整url為 launchapp://?data=mydata

<activity    
     android:name="com.robert.MainActivity"    
     android:configChanges="orientation|keyboardHidden|navigation|screenSize"    
     android:screenOrientation="landscape"    
     android:theme="@android:style/Theme.NoTitleBar.Fullscreen" >    
     <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.BROWSABLE" />    
         <category android:name="android.intent.category.DEFAULT"/>    
         <data android:scheme="launchapp" android:pathPrefix="/haha" />    
     </intent-filter>    
   </activity>   

然后通過activity獲得data數據:

  public void onCreate(Bundle savedInstanceState) {             
     Uri uridata = this.getIntent().getData();             
     String mydata = uridata.getQueryParameter("data");            
  }  

編寫html頁面

整個頁面也許是某個app的詳細介紹,這里只寫出關鍵的js代碼:

<activity  
     android:name="com.robert.MainActivity"    
     android:configChanges="orientation|keyboardHidden|navigation|screenSize"    
     android:screenOrientation="landscape"    
     android:theme="@android:style/Theme.NoTitleBar.Fullscreen" >    
     <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.BROWSABLE" />    
         <category android:name="android.intent.category.DEFAULT"/>    
         <data android:scheme="launchapp" android:pathPrefix="/haha" />    
     </intent-filter>    
</activity>   

下面代碼可以達到這樣一個目的,先請求 launchapp:// ,如果系統能處理,或者說已經安裝了myapp表示的應用,那么就可以打開,另外,如果不能打開,直接刷新一下當前頁面,等于是重置location。

function openApp() {    
       
           if (/android/i.test(navigator.userAgent)) {    
                var isrefresh = getUrlParam('refresh'); // 獲得refresh參數    
                if(isrefresh == 1) {    
                    return    
                }    
                window.location.href = 'launchapp://haha?data=mydata';    
                window.setTimeout(function () {    
                        window.location.href += '&refresh=1' // 附加一個特殊參數,用來標識這次刷新不要再調用myapp:// 了    
                }, 500);    
            }    
       
   }  

整體代碼

代碼功能: 判斷手機/平板是否安裝app 如果安裝 則調用app的scheme,傳入url當作參數,來做后續操作 如果沒有安裝 則跳轉到app store/google play 下載app

(function () {
    var openUrl = window.location.search;
    try {
        openUrl = openUrl.substring(1, openUrl.length);
    } catch (e) {}
    var isiOS = navigator.userAgent.match('iPad') || navigator.userAgent.match('iPhone') || navigator.userAgent.match(
        'iPod'),
        isAndroid = navigator.userAgent
            .match('Android'),
        isDesktop = !isiOS && !isAndroid;
    if (isiOS) {
        setTimeout(function () {
            window.location = "itms-apps://itunes.apple.com/app/[name]/[id]?mt=8";
        }, 25);
        window.location = "[scheme]://[host]?url=" + openUrl;
    } else if (isAndroid) {
        window.location = "intent://[host]/" + "url=" + openUrl + "#Intent;scheme=[scheme];package=[package_name];end";
    } else {
        window.location.href = openUrl;
    }
})();
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容