h5頁面喚起app如果沒安裝就跳轉下載(iOS和Android)
發(fā)布時間：2020-06-03 16:38:31 作者：蓋大樓 
我要評論
我要評論這篇文章主要介紹了h5頁面喚起app如果沒安裝就跳轉下載(iOS和Android),文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
h5頁面喚起app如果沒安裝就跳轉下載(iOS和Android)
瀏覽器和app沒有通信協(xié)議，所以h5不知道用戶的手機釋放安裝了app。因此只能是h5去嘗試喚起app，若不能喚起，引導用戶去下載我們的app。
微信里屏蔽了 schema 協(xié)議,如果在微信中打開h5，則會提示用戶在瀏覽器中打開。<!doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no;" name="viewport" />
<script>
// 檢查是否安裝app
function openApp(e){
var u = window.navigator.userAgent;
var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //android終端或者uc瀏覽器
var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
if(isAndroid){
android();
}
if(isiOS){
ios();
}
}
function android(){
var _clickTime = new Date().getTime();
window.location.href = '？？？？？？？？？？？？？？？？？？'; /***打開app的協(xié)議，有安卓同事提供***/
//啟動間隔20ms運行的定時器，并檢測累計消耗時間是否超過3000ms，超過則結束
var _count = 0, intHandle;
intHandle = setInterval(function(){
_count++;
var elsTime = new Date().getTime() - _clickTime;
if (_count>=100 || elsTime > 3000 ) {
console.log(_count)
console.log(elsTime)
clearInterval(intHandle);
//檢查app是否打開
if ( document.hidden || document.webkitHidden) {
// 打開了
window.close();
} else {
// 沒打開
alert('沒打開')
// window.location.href = "？？？？？？？？？？？？？？";//下載鏈接
}
}
}, 20);
}
function ios(){
var _clickTime = +(new Date());
var ifr = document.createElement("iframe");
ifr.src = "？？？？？？？？？？？？？？"; /***打開app的協(xié)議，有ios同事提供***/
ifr.style.display = "none";
document.body.appendChild(ifr);
//啟動間隔20ms運行的定時器，并檢測累計消耗時間是否超過3000ms，超過則結束
var _count = 0, intHandle;
intHandle = setInterval(function(){
_count++;
var elsTime = +(new Date()) - _clickTime;
console.log(_count,elsTime,+(new Date()),_clickTime)
if (_count>=100 || elsTime > 3000 ) {
clearInterval(intHandle);
document.body.removeChild(ifr);
//檢查app是否打開
if ( document.hidden || document.webkitHidden) {
// 打開了
window.close();
} else {
// 沒打開
alert('沒打開')
// window.location.href = "？？？？？？？？？？？？？？？";//下載鏈接
}
}
},20);
}
var objbtn=document.getElementById('btn');
objbtn.onclick=function(){
openApp()
}
</script>
</head>
<body style="background-color: #fff;" >
<!--測試app調起-->
<div id="btn" style="font-size: 40px;background: blue;color: #fff;height: 56px;text-align: center;">btn</div>
<!--測試app調起over-->
</body>
</html>
重要的是 安裝了app打開app，但是 不能讓用戶在點擊確定的時候，跳轉到下載頁。
沒安裝app的用戶，不能等待太久，還不到app下載頁。
若通過url scheme 打開app成功，那么當前h5會進入后臺，通過計時器會有明顯延遲。利用時間來判斷。
由于安卓手機,頁面進入后臺，定時器setTimeout仍會不斷運行，所以這里使用setInterval,較小間隔時間重復多次。來根據累計時間判斷。
document.hidden對大于4.4webview支持很好，為頁面可見性api。
ios
window.location.href='rtjr://app.rongtuojinrong.com?flag=23&pid={$pid}';
js無法調起 這種協(xié)議的url
<a href="rtjr://app.rongtuojinrong.com?flag=23&pid={$pid}" ></a>
只能用 a標簽，或者 iframe
到此這篇關于h5頁面喚起app如果沒安裝就跳轉下載(iOS和Android)的文章就介紹到這了,更多相關h5頁面喚起app內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持腳本之家！
相關文章
本篇文章主要介紹了H5混合開發(fā)app如何升級的方法，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-10
詳解如何通過H5（瀏覽器/WebView/其他）喚起本地app
這篇文章主要介紹了詳解如何通過H5（瀏覽器/WebView/其他）喚起本地app的相關資料,小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-12-11
這篇文章主要介紹了html5喚起app的方法的相關資料，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-11-30
開發(fā)uni-app的編輯器HBuilderX可以將H5項目打包成APP，相信很多小伙伴還不知道這個功能，下面將介紹下如何將H5打包成APP，感興趣的朋友一起看看吧2023-04-03
