js h5頁面調起App(IOS 和android)的實現方法
阿新 • • 發佈:2018-11-28
js h5頁面調起App(IOS 和android)的實現方法
第一次寫這個:我們的app是由原聲和h5組成的,當用戶使用瀏覽器開啟我們的頁面時我們會引導使用者使:開啟App 下載App
剛開始我是使用定時器來實現的,當用戶點選了開啟App經過一定時間之後沒有反應,則我們認為她調起App失敗,跳轉到下載頁面,但是這個存在一個問題,起始已經調起App了但是使用者沒有允許開啟App過了一定時間之後下載的頁面還是會彈出來,這樣就不合理了,已經有App了還提示要下載。同時還有個問題我的手機是r11 7.1.1系統自帶瀏覽器一直調不起App(上面實現的方法是當瀏覽器載入h5頁面時就會執行),因此我把調起App和下載的地址分開了,測試了一些手機相容性還不錯,都可以調起和實現下載。用按鈕
具體程式碼如下:
//下面為使用者掃描二維碼時進行的跳轉
var userAgent = window.navigator.userAgent; if (userAgent.match(這裡用來區別使用者是在瀏覽器開啟還是App內開啟) == null) {//當用戶在瀏覽器中開啟時 document.getElementById("app_button").style.display = "block";//下載開啟按鈕顯示出來 if (userAgent.match(/MicroMessenger/) != null) {//用微信掃描時 document.getElementById("weixin").style.display = "block"; //下面根據不同的手機顯示不同的提示語 if (mui.os.ios) { document.getElementById("addroid_weixin").style.display = "none"; document.getElementById("ios_weixin").style.display = "inline"; } else if (mui.os.android) { document.getElementById("ios_weixin").style.display = "none"; document.getElementById("addroid_weixin").style.display = "inline"; } document.getElementById("app_button").style.display = "none"; } } var parameter = window.location.href; var ios_parmeter = parameter.substring(7, parameter.length); document.getElementById("open_app").addEventListener('tap', function () { if (mui.os.ios) { window.location.href = "開啟IOS的名字://" + ios_parmeter; } else if (mui.os.android) { window.location.href = "開啟App的名字://hrst.com/android?data=" + parameter; } }); document.getElementById("download_upgrade").addEventListener('tap', function () { if (mui.os.ios) { //跳轉IOS下載商城地址 window.location.href = "https://itunes.apple.com/cn/app/"; } else if (mui.os.android) { var downLoad = '@ViewBag.downLoad'; window.location.href = "android的下載地址"; } });