關於H5喚醒APP的功能實現(轉載)

2017年04月26日 18:27:54 話提及個名字好難 閱讀數 24188

 

 版權聲明：本文爲博主原創文章，未經博主容許不得轉載。 https://blog.csdn.net/sinat_29194935/article/details/70820398

      首先，我是個後端，寫java的，甚至不是搞移動端的，因此js這方面有點底子但不專業，對於出現的錯誤也請見諒，原來項目要求有個H5頁面打開APP的功能就強行要作，沒辦法就想辦法搞一下，網上的教程基本都是差很少套路，APP廠商也沒有提供啓動的接口之類的，只能從系統註冊表考慮啓動應用，因此這下面的代碼都是基於你知道這個app的scheme_url和scheme_hosts是啥的基礎上進行的。對於不知道這兩個地址的只能說：度娘找你。

      並不必定保證百分百打開，只能設置定時器去等應用啓動，若是終端反應慢一拍，6秒過了還沒啓動，代碼就認爲沒應用，會跳轉到下載頁面去下載。固然安卓稍微容易一些，IOS就比較封閉了。啥話不說,先上js代碼

//啓動app方法 function startApp(url, url2) { //url是跳轉的scheme地址,這個建議下個反編譯的軟件,去第三方apk查他們設置的scheme_url和scheme_host是什麼,我就是這樣乾的 //url2是應用下載地址,要分清ios和android的不同 //將下載地址保存到全局變量 downloadUrl = url2; if (ua.match(/ipad|iphone|ipod|ios/i)) { //外部一個定時器,專門盯着啓動app的定時器loop;就叫它killer吧 //計時6秒,以後幹掉loop. window.setTimeout(function() { $('#message').html(''); $('.result-message').eq(0).css("display", "none"); clearTimeout(loop); time = parseInt('6000') / 1000; }, 6000); //嘗試啓動應用 location.href = url; //同時開始應用啓動倒計時 countDown(); } else { //安卓的就是用iframe來測試是否安裝和啓動應用了 window.setTimeout(function() { $('#message').html(''); $('.result-message').eq(0).css("display", "none"); clearTimeout(loop); time = parseInt('6000') / 1000; }, 6000); //建立iframe並啓動應用入口 openApp(url); } } function openApp(src) { // 經過iframe的方式試圖打開APP，若是能正常打開，會直接切換到APP var ifr = document.createElement('iframe'); ifr.src = src; ifr.style.display = 'none'; document.body.appendChild(ifr); //切換到iframe時 //此時,會有個問題,如後切換到應用時間小於killer所須要殺死loop的時間,loop就會跳到下載提示,killer`就失去做用了 countDown(); window.setTimeout(function() { document.body.removeChild(ifr); }, 5000); //倒計時 } function countDown() { //每秒調用一次 loop = window.setTimeout('countDown()', 1000); if (time > 0) { $('.result-message').eq(0).css("display", "block"); $('#message').html('正在嘗試打開客戶端 ' + time + 's'); time--; if (time == 0) { /*if(ua.match(/ipad|iphone|ipod|ios/i)){ console.log(downloadUrl); location.href = downloadUrl; }*/ //若是計時到0,loop任然沒被幹掉,就說明應用沒有啓動,此時,跳到下載提示界面 //定時器的侷限性仍是很大,不能響應式反應,因此只能作到這一步了 $('#message').html(''); $('.result-message').eq(0).css("display", "none"); clearTimeout(loop); time = parseInt('6000') / 1000; var btnArray = ['否', '是']; mui.confirm('您沒有安裝該應用,是否下載安裝包?', '應用下載', btnArray, function(e) { if (e.index == 1) { location.replace(downloadUrl); } else { return; } }); } } } //url2是應用下載地址,要分清ios和android的不同 //將下載地址保存到全局變量 downloadUrl = url2; if (ua.match(/ipad|iphone|ipod|ios/i)) { //外部一個定時器,專門盯着啓動app的定時器loop;就叫它killer吧 //計時6秒,以後幹掉loop. window.setTimeout(function() { $('#message').html(''); $('.result-message').eq(0).css("display", "none"); clearTimeout(loop); time = parseInt('6000') / 1000; }, 6000); //嘗試啓動應用 location.href = url; //同時開始應用啓動倒計時 countDown(); } else { //安卓的就是用iframe來測試是否安裝和啓動應用了 window.setTimeout(function() { $('#message').html(''); $('.result-message').eq(0).css("display", "none"); clearTimeout(loop); time = parseInt('6000') / 1000; }, 6000); //建立iframe並啓動應用入口 openApp(url); } } function openApp(src) { // 經過iframe的方式試圖打開APP，若是能正常打開，會直接切換到APP var ifr = document.createElement('iframe'); ifr.src = src; ifr.style.display = 'none'; document.body.appendChild(ifr); //切換到iframe時 //此時,會有個問題,如後切換到應用時間小於killer所須要殺死loop的時間,loop就會跳到下載提示,killer`就失去做用了 countDown(); window.setTimeout(function() { document.body.removeChild(ifr); }, 5000); //倒計時 } function countDown() { //每秒調用一次 loop = window.setTimeout('countDown()', 1000); if (time > 0) { $('.result-message').eq(0).css("display", "block"); $('#message').html('正在嘗試打開客戶端 ' + time + 's'); time--; if (time == 0) { /*if(ua.match(/ipad|iphone|ipod|ios/i)){ console.log(downloadUrl); location.href = downloadUrl; }*/ //若是計時到0,loop任然沒被幹掉,就說明應用沒有啓動,此時,跳到下載提示界面 //定時器的侷限性仍是很大,不能響應式反應,因此只能作到這一步了 $('#message').html(''); $('.result-message').eq(0).css("display", "none"); clearTimeout(loop); time = parseInt('6000') / 1000; var btnArray = ['否', '是']; mui.confirm('您沒有安裝該應用,是否下載安裝包?', '應用下載', btnArray, function(e) { if (e.index == 1) { location.replace(downloadUrl); } else { return; } }); } } }