這篇文章給大家分享的是有關(guān)JS拉起或下載app的示例分析的內(nèi)容。小編覺得挺實(shí)用的,因此分享給大家做個(gè)參考,一起跟隨小編過來看看吧。
目前創(chuàng)新互聯(lián)公司已為上千家的企業(yè)提供了網(wǎng)站建設(shè)、域名、虛擬空間、網(wǎng)站托管運(yùn)營(yíng)、企業(yè)網(wǎng)站設(shè)計(jì)、洛南網(wǎng)站維護(hù)等服務(wù),公司將堅(jiān)持客戶導(dǎo)向、應(yīng)用為本的策略,正道將秉承"和諧、參與、激情"的文化,與客戶和合作伙伴齊心協(xié)力一起成長(zhǎng),共同發(fā)展。
產(chǎn)品提了個(gè)需求,通過手機(jī)網(wǎng)頁判斷是否安裝了自己公司app,如果安裝了則拉起app,沒有安裝則跳轉(zhuǎn)到下載頁。
經(jīng)過各種查閱資料嘗試總結(jié)了一個(gè)還算可以的辦法。
拉起app的原理就是js和原生統(tǒng)一好一個(gè)地址,例如(qiyimobile://self/qiyi.madeindexpage)。然后瀏覽器發(fā)起請(qǐng)求,如果app安裝了則會(huì)攔截這個(gè)請(qǐng)求并且打開。
下面是安卓代碼配置。其實(shí)scheme和host要和js這邊統(tǒng)一
<span ><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:scheme="qiyimobile" android:host="self/qiyi.madeindexpage" android:pathPrefix="/**"> </data> </intent-filter></span>
js這邊稍微麻煩一些。如果只拉起app比較簡(jiǎn)單,直接通過a連接或者window.location.href=“**”即可。不過這里有個(gè)問題,就是有些手機(jī)在未安裝app的時(shí)候會(huì)識(shí)別我們之前定的那個(gè)協(xié)議嘗試打開這個(gè)網(wǎng)頁,當(dāng)然會(huì)報(bào)找不到網(wǎng)頁。這里用iframe的方式兼容性稍好。
var ifr = document.createElement('iframe'); ifr.src = 'qiyimobile://self/qiyi.madeindexpage'; document.body.appendChild(ifr);
當(dāng)手機(jī)未安裝app時(shí)應(yīng)該跳轉(zhuǎn)到下載頁,很多人說延時(shí)一下直接跳轉(zhuǎn)就行,如下
window.location.href=“打開地址” setTimeout(function() { window.location.href=“下載地址” }, 500);
當(dāng)然這樣也是有問題的,因?yàn)橛械氖謾C(jī)拉起app也不會(huì)自動(dòng)清除定時(shí)器,即無論是否安裝app,頁面都會(huì)在500ms后跳轉(zhuǎn)到下載頁。所以判斷是否需要跳轉(zhuǎn)到下載頁是最麻煩的事。最終嘗試如下是比較好的解決方法。
設(shè)置一個(gè)初始時(shí)間,打開拉起app地址后有個(gè)結(jié)束時(shí)間,計(jì)算兩者之差,當(dāng)差大于一定時(shí)間是說明安裝了app,當(dāng)差很小時(shí)說明沒有打開app,需要跳轉(zhuǎn)到下載頁。
最終代碼如下
downloadapp.addEventListener('click', function() { var start = new Date();//記錄初始時(shí)間 var t = 500; var ifr = document.createElement('iframe'); ifr.src = 'qiyimobile://self/qiyi.madeindexpage';//打開app document.body.appendChild(ifr); ifr.onload = function() { }; ifr.style.display='none'; setTimeout(function() { document.body.removeChild(ifr); var end = new Date();//記錄結(jié)束時(shí)間 console.log(end - start) if (end - start <= (t + 30)) {//兩者之差小于30ms時(shí)跳轉(zhuǎn)到下載頁 window.location.href = "https://www.baidu.com" } }, t); })
感謝各位的閱讀!關(guān)于“JS拉起或下載app的示例分析”這篇文章就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,讓大家可以學(xué)到更多知識(shí),如果覺得文章不錯(cuò),可以把它分享出去讓更多的人看到吧!
網(wǎng)頁名稱:JS拉起或下載app的示例分析
路徑分享:http://www.rwnh.cn/article30/gopcso.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供電子商務(wù)、移動(dòng)網(wǎng)站建設(shè)、云服務(wù)器、虛擬主機(jī)、定制開發(fā)、域名注冊(cè)
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)