資訊專欄INFORMATION COLUMN
摘要：背景為了提升的曝光和的用戶新增，添加分享頁的應(yīng)用場景是必不可少的，但是各種平臺環(huán)境不一，要如何兼容和策略處理。
HTML5 call native app 背景
為了提升app的曝光和app的用戶新增，添加H5分享頁的應(yīng)用場景是必不可少的，但是各種平臺環(huán)境不一，要如何兼容和策略處理。下面會一一說明
1. 頁面調(diào)起原生app調(diào)起原生 app，然后下載APP
不同平臺的兼容和策略處理，比如微信,微博，QQ，QQ空間，瀏覽器
2. HTML5頁面調(diào)起原生APP android、ios調(diào)起的方式
拉起手雷
window.location.href= "ftnn:login";
說明：由于無法確定是否安裝了客戶端，因此通過window.location = schema的方式可能導(dǎo)致瀏覽器跳轉(zhuǎn)到錯誤頁；所以通過iframe.src或a.href載入schema是目前比較常見的方法；
代碼實現(xiàn)
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)
}
應(yīng)用寶deeplink
中間提示頁
類似于“請在瀏覽器打開”
5. 遇到的問題：不知道手機(jī)有沒有安裝app嘗試調(diào)起APP，如果不能，使用setTimeout進(jìn)行下載，所以需要進(jìn)行處理，如下圖：
$(document).on("visibilitychange webkitvisibilitychange", function() {
var tag = document.hidden || document.webkitHidden;
if (tag) {
clearTimeout(timer);
}
})
$(window).on("pagehide", function() {
clearTimeout(timer);
})
當(dāng)手機(jī)安裝了App，能調(diào)起app后就不進(jìn)行下載
沒有安裝App,過了一段時間，進(jìn)行下載
H5 page call native app
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/88259.html
摘要：經(jīng)過這些年在端瀏覽器內(nèi)核端研發(fā)經(jīng)驗的積累，年我在斗米的客戶端產(chǎn)品上首次提出了以驅(qū)動的客戶端平臺化架構(gòu)思想，并經(jīng)過兩年時間多個產(chǎn)品的探索實踐，我認(rèn)為該端的架構(gòu)思想可正式對外分享。在斗米的各客戶端中，在不需要發(fā)版的前提下，可以使用發(fā)版。 背景 隨著移動互聯(lián)網(wǎng)產(chǎn)業(yè)的興起，各式App層出不窮，技術(shù)方案多種多樣。同樣，我們也面臨了各式各樣的問題，比如產(chǎn)品如何開發(fā)能夠更快速迭代上線，如何使運(yùn)營推廣...
摘要：經(jīng)過這些年在端瀏覽器內(nèi)核端研發(fā)經(jīng)驗的積累，年我在斗米的客戶端產(chǎn)品上首次提出了以驅(qū)動的客戶端平臺化架構(gòu)思想，并經(jīng)過兩年時間多個產(chǎn)品的探索實踐，我認(rèn)為該端的架構(gòu)思想可正式對外分享。在斗米的各客戶端中，在不需要發(fā)版的前提下，可以使用發(fā)版。 背景 隨著移動互聯(lián)網(wǎng)產(chǎn)業(yè)的興起，各式App層出不窮，技術(shù)方案多種多樣。同樣，我們也面臨了各式各樣的問題，比如產(chǎn)品如何開發(fā)能夠更快速迭代上線，如何使運(yùn)營推廣...
閱讀 2809·2021-11-17 09:33
閱讀 4490·2021-09-22 15:57
閱讀 2883·2019-08-30 14:16
閱讀 3147·2019-08-29 14:07
閱讀 2428·2019-08-26 11:55
閱讀 3440·2019-08-23 17:07
閱讀 1738·2019-08-23 16:50
閱讀 2553·2019-08-23 16:08
