摘要：背景為了提升的曝光和的用戶新增，添加分享頁的應用場景是必不可少的，但是各種平臺環境不一，要如何兼容和策略處理。

為了提升app的曝光和app的用戶新增，添加H5分享頁的應用場景是必不可少的，但是各種平臺環境不一，要如何兼容和策略處理。下面會一一說明

調起原生 app，然后下載APP

不同平臺的兼容和策略處理，比如微信,微博，QQ，QQ空間，瀏覽器

Schame + Android Itent

Schema ＋　Universal links（IOS9+）

拉起手雷

window.location.href= "ftnn:login";

說明：由于無法確定是否安裝了客戶端，因此通過window.location = schema的方式可能導致瀏覽器跳轉到錯誤頁；所以通過iframe.src或a.href載入schema是目前比較常見的方法；

代碼實現

export const locationCallAPP = (url, downloadUrl, ios9Type) => {
 location.href = url
 var timeout
 var t = Date.now()
 var interval = ios9Type ? 2500 : 1000
 timeout && clearTimeout(timeout)
 timeout = setTimeout(function() {
   if (Date.now() - t < interval + 1000) {
     location.href = downloadUrl
   }
 }, interval)
}

const iframeCallAPP = (url, downloadUrl, ios9Type) => {
console.log("[iframeCallAPP1]"+url)
var timeout
var t = Date.now()
var interval = ios9Type ? 2500 : 2000
timeout && clearTimeout(timeout)
timeout = setTimeout(function () {
if (Date.now() - t < interval+1000) {

  console.log("[iframeCallAPP2]"+downloadUrl)
 location.href = downloadUrl

}
}, interval)
if (ios9Type) {
location.href = url
}
var docNode = document
var iframe = docNode.createElement("iframe")
iframe.setAttribute("src", url)
// iframe.setAttribute("target", "_self");
iframe.setAttribute("style", "display:none")
docNode.body.appendChild(iframe)
setTimeout(function () {
docNode.body.removeChild(iframe)
}, 200)
}

微信

應用寶deeplink

微博

中間提示頁

類似于“請在瀏覽器打開”

嘗試調起APP，如果不能，使用setTimeout進行下載，所以需要進行處理，如下圖：
$(document).on("visibilitychange webkitvisibilitychange", function() {
            var tag = document.hidden || document.webkitHidden;
            if (tag) {
                clearTimeout(timer);
            }
        })

    $(window).on("pagehide", function() {
        clearTimeout(timer);
    })
    

當手機安裝了App，能調起app后就不進行下載
沒有安裝App,過了一段時間，進行下載

H5 page call native app