移動端H5喚起APP的寫法實例（IOS、android）

更新時間：2021年07月15日 09:51:20 作者：孤山漸青

最近在做掃碼之后的h5頁面喚醒App的功能,所以記錄一下,這篇文章主要給大家介紹了關(guān)于移動端H5喚起APP的相關(guān)資料,需要的朋友可以參考下

IOS

1.url scheme

這個方案基本上就是針對微信、qq內(nèi)置瀏覽器，qq瀏覽器等之外的其余瀏覽器，從native那邊要一個scheme ，然后放在a標(biāo)簽里或者location.href跳一下就行了

用一個iframe去做的一個跳頁，有的話喚起scheme沒有的話，會觸發(fā)定時器跳到下載地址。但是這個方式在ios里面，在沒有app的時候會遇到兩次提示，

 var openApp = function (src) {
        // 通過iframe的方式試圖打開APP，如果能正常打開，會直接切換到APP，并自動阻止a標(biāo)簽的默認(rèn)行為
        // 否則打開a標(biāo)簽的href鏈接
        const ifr = document.createElement('iframe');
        ifr.src = src;
        ifr.style.display = 'none';
        document.body.appendChild(ifr);
        var poenTime = +new Date()
        window.setTimeout(() => {
          document.body.removeChild(ifr);
          if ((+new Date()-openTime>2500)){
            window.location = 'APP Store下載的地址 '
          }
        }, 600);
      };

2.Universal Link（ios）

這是iOS9推出的一項功能，如果你的應(yīng)用支持Universal Links(通用鏈接)，那么就能夠方便的通過傳統(tǒng)的HTTP鏈接來啟動APP(如果iOS設(shè)備上已經(jīng)安裝了你的app，不需要額外做任何判斷等)，或者打開網(wǎng)頁(iOS設(shè)備上沒有安裝你的app)?；蛟S可以更簡單點(diǎn)來說明，在iOS9之前，對于從各種從瀏覽器，Safari、UIWebView或者 WKWebView中喚醒APP的需求，我們通常只能使用scheme。

window.location.href ="APP給的Universal Link"

總結(jié)

兼容寫法

if (isGreaterThan9){
   window.location.href ="APP給的Universal Link" ;
   return;
}
openApp(src)

android

方法類似

 if (openApp('url scheme url')) {
            openApp('url scheme url');
          } else {
            setTimeout(() => {
              window.location.href = 'APP 市場下載地址';// 一般是google, 各個應(yīng)用商店不一樣
            }, 600);
          }
      }

總結(jié)

到此這篇關(guān)于移動端H5喚起APP的文章就介紹到這了,更多相關(guān)移動端H5喚起APP內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

window.open打開窗口被攔截的快速解決方法
下面小編就為大家?guī)硪黄獁indow.open打開窗口被攔截的快速解決方法。覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-08-08
javascript在IE下trim函數(shù)無法使用的解決方法
這篇文章主要介紹了javascript在IE下trim函數(shù)無法使用的解決方法,分別敘述了javascript以及jQuery下的解決方案,對于WEB前端javascript設(shè)計人員進(jìn)行瀏覽器兼容性調(diào)試有不錯的借鑒價值,需要的朋友可以參考下
2014-09-09
利用JavaScript實現(xiàn)放鞭炮動畫效果
談及過年，最先讓人想到的就是，噼里啪啦的鞭炮聲。本文將利用JavaScript實現(xiàn)一個簡單的放鞭炮動畫效果，感興趣的小伙伴可以了解一下
2023-01-01
基于layui輪播圖滿屏是高度自適應(yīng)的解決方法
今天小編就為大家分享一篇基于layui輪播圖滿屏是高度自適應(yīng)的解決方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2019-09-09
一些手寫JavaScript常用的函數(shù)匯總
這篇文章主要給大家介紹了一些手寫的JavaScript常用的函數(shù)，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用JavaScript具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧
2019-04-04
js實現(xiàn)圖片無縫滾動
這篇文章主要介紹了Javascript圖片無縫滾動的相關(guān)內(nèi)容,感興趣的小伙伴們可以參考一下
2015-12-12
js有序數(shù)組的連接問題
昨天碰到一道關(guān)于如何解決有序數(shù)組的連接問題，這是一個很常見的問題。但是這里要考慮到代碼的效率問題，因為要連接的數(shù)組都是有序的，這是一個非常重要的前提條件
2013-10-10
Bootstrap table的使用方法
這篇文章主要為大家詳細(xì)解析了JS組件Bootstrap Table使用方法，具有一定的實用性和參考價值，感興趣的小伙伴們可以參考一下
2016-11-11
不用AI也能實現(xiàn)的文字自動播報(SpeechSynthesis文本實例合成)
SpeechSynthesis是HTML5的一個新特性，基于SpeechSynthesis可以實現(xiàn)在客戶瀏覽器端進(jìn)行動態(tài)文本的語音合成播放，這篇文章主要介紹了不用AI也能實現(xiàn)的文字自動播報(SpeechSynthesis文本實例合成),需要的朋友可以參考下
2023-03-03
JavaScript創(chuàng)建對象的寫法
JavaScript 有Date、Array、String等這樣的內(nèi)置對象，功能強(qiáng)大使用簡單，人見人愛，但在處理一些復(fù)雜的邏輯的時候，內(nèi)置對象就很無力了，往往需要開發(fā)者自定義對象
2013-08-08