摘要:調起的注意事項年初,微信下全面封禁了,所以在微信下是調不起的,暫時是沒有什么辦法。所以安卓下調不起是一件十分正常的事情。表示的包名,比如,表示調起的安卓下判斷是否調起成功其實有一種方法可以判斷安卓下是否調起成功。
背景
在H5頁面或者app的webview中調起第三方app
核心調起app是操作系統(iOS、Android)的機制,在h5頁面,我們可以做的不多。
在調起之前,h5頁面無法判斷當前手機是否安裝了對應的app,我們只能去嘗試調起,并且用一些方法來處理沒有調起的情況。
調起的原理就不介紹了,網上一搜一大堆。直接上核心代碼。
if(iOS9) { window.location.href = ${universalLink}; } else { var ifr = document.createElement("iframe"); ifr.src = ${scheme}; ifr.style.display = "none"; document.body.appendChild(ifr); window.setTimeout(function () { document.body.removeChild(ifr); }, 300); } 舉個栗子: ${universalLink} = "http://myapp.com" ${scheme} = "myapp://index"
解釋一下上面的代碼,如果是iOS9及以上的iOS系統,直接跳轉到調起app的universal link。如果是安卓或者iOS9一下的iOS系統,就新建一個iframe,把這個iframe的src弄成調起app的scheme,然后把這個iframe直接塞到頁面的DOM樹上,然后『聽天由命』就行。
iOS的調起iOS是使用universalLink(下面簡稱ulink)的方式來進行調起。具體系統內部的機制就不說了,網上一堆文章,隨便搜一下就行。
universalLink其實就是一個正常的http請求的url。我們在h5頁面使用 location.href=XX進行調起的時候,如果說調起成功了,那么其實這個url是不會被訪問的,抓包也抓不到。換句話說,如果我們訪問到這個url了,說明我們的調起失敗了。
iOS如何實現【安裝了調起,沒有安裝跳下載頁】上面說了,iOS下調起失敗后,會訪問到一個url。要實現沒有安轉跳下載頁,那么就直接把ulink對應的鏈接做成下載頁就好了。根據需求,我們還可以將ulink對應的url做成任何頁面。但是,如果我們不想要跳轉到這個頁面,還是想停留在之前的頁面呢?很簡單,叫RD哥哥在通鏈那個url的服務端加一個302重定向服務就行。
舉個栗子,我們使用下面的ulink來調起App。
http://myapp.com/index?target=encodeURIComponent("http://www.baidu.com");
調起失敗后,上面那個ulink會被瀏覽器訪問到,我們在服務端加了重定向服務,我們最終會訪問到target對應的地址,即 http://www.baidu.com 。這樣,我們就實現了【調起失敗時,跳轉到自己想要的頁面】。
iOS如何實現【安裝了調起,沒有安裝時,在當前頁面繼續進行其他操作】兩種方法:
一、需要后端重定向服務,我們只需要把上面重定向的鏈接換成一個scheme就行了。這種方法適用于頁面必須要用戶點擊才能觸發的交互,比如視頻、音頻的播放等。(另:微信下可以通過監聽jsbridge ready的事件,自動播放視頻、音頻)
這個scheme需要滿足以下的要求:
可以被當前瀏覽器識別
瀏覽器識別了這個scheme,但是不會進行任何其他操作。
如果這個scheme同時滿足了上述兩個條件,那么體驗就是最好的。否則,可能就會出現瀏覽器彈框等問題。
舉幾個scheme的例子
... facetime:// (iOS11以下體驗完美,之后的版本會直接拉起facetime--) ucbrowser:// ...
二、需要后端重定向服務,我們需要把重定向鏈接換成【當前鏈接后加一個特殊參數】的鏈接。這樣在前端代碼里就可以判斷url里面的特殊參數,從而得知當前頁面是拉起app失敗時進入的。
iOS調起的注意事項2018年初,iOS微信下全面封禁了universalLink,所以在微信下是調不起app的,暫時是沒有什么辦法。這種時候,一般可以提示用戶,從瀏覽器打開。當然,也可以找微信開白名單,直接用微信的能力去拉起。
其實iOS下用scheme也是可以調起的,比如
window.location.href = scheme
但是這樣有個問題,如果說沒有安裝對應的app,在safari下會彈窗:無法識別該鏈接,并且就算安裝了該app,也會彈一個窗讓你確認是否調起 。
雖說iOS的通鏈是一個url,但是也不是直接粘貼到safari等瀏覽器下訪問就能直接調起app。因為iOS的通鏈調起必須要求有用戶操作,比如點擊等行為。可以將鏈接粘貼到iOS的備忘錄上,點擊這個鏈接就可以直接調起了。
Android的調起安卓的調起是用iframe的方式(其實現在的高版本安卓也可以直接window.location.href=scheme)。
安卓調起的最大的特點就是,安卓無法知道是否成功調起了app。安卓下的調起一般都會有自帶的兜底策略,比如下載。代碼也很簡單
var ifr = document.createElement("iframe"); ifr.src = ${scheme}; ifr.style.display = "none"; document.body.appendChild(ifr); window.setTimeout(function () { document.body.removeChild(ifr); // 這里寫兜底策略的邏輯,比如下載。 // 當然,也可以不加任何的兜底策略,調不起就算了。 window.location.href = ${下載地址} }, 300);
如果想要實現【安裝了app調起,沒有安裝app下載】的功能,那么肯定會調起和下載的邏輯同時執行,因為安卓無法知道是否成功調起app。
安卓的調起是很靈活的,你可以任意控制兜底策略的邏輯,想干嘛干嘛。只是說,兜底策略是幾乎一定會執行的,不管你調起成功還是失敗。
Android調起注意事項 各種瀏覽器的屏蔽很多瀏覽器都對scheme做了屏蔽。所以安卓下調不起app是一件十分正常的事情。
微信下調起微信太封閉了,自然屏蔽了非自家app的調起。只新建一個iframe的方式在微信下是不能調起的。微信針對webview調起app的策略也一直在修改。最新(2018年3月19日)的想要在微信的webview下調起app的方式是:
手機上必須安裝應用寶
使用下面的方式,跳轉到應用寶頁面進行調起。
window.location.href = "http://a.app.qq.com/o/simple.jsp?pkgname=${pkgname}&android_scheme= encodeURIComponent(${scheme})" ${pkgname}表示app的包名,比如 "com.myapp",${scheme}表示調起的scheme安卓下判斷是否調起成功
其實有一種方法可以判斷安卓下是否調起成功。執行調起邏輯后,設一定的延時判斷當前頁面是否可見,若不可見了,幾乎就可以確定是調起成功了。但是只對小部分瀏覽器有效(比如安卓下的chrome)。對大多數瀏覽器而言,調起成功后,會有一個彈框,需要用戶點擊確定后,才能喚起app。由于這個彈框的存在,就無法通過頁面是否可見的方法來判斷調起成功與否了。而chrome下,調起成功直接喚起app,是不會彈窗的,所以chrome下可以用延時+頁面是否可見的方式來判斷調起成功與否。
歡迎關注我的公眾號,這里只有干活,符合預期
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/95086.html
摘要:經過這些年在端瀏覽器內核端研發經驗的積累,年我在斗米的客戶端產品上首次提出了以驅動的客戶端平臺化架構思想,并經過兩年時間多個產品的探索實踐,我認為該端的架構思想可正式對外分享。在斗米的各客戶端中,在不需要發版的前提下,可以使用發版。 背景 隨著移動互聯網產業的興起,各式App層出不窮,技術方案多種多樣。同樣,我們也面臨了各式各樣的問題,比如產品如何開發能夠更快速迭代上線,如何使運營推廣...
摘要:經過這些年在端瀏覽器內核端研發經驗的積累,年我在斗米的客戶端產品上首次提出了以驅動的客戶端平臺化架構思想,并經過兩年時間多個產品的探索實踐,我認為該端的架構思想可正式對外分享。在斗米的各客戶端中,在不需要發版的前提下,可以使用發版。 背景 隨著移動互聯網產業的興起,各式App層出不窮,技術方案多種多樣。同樣,我們也面臨了各式各樣的問題,比如產品如何開發能夠更快速迭代上線,如何使運營推廣...
摘要:背景為了提升的曝光和的用戶新增,添加分享頁的應用場景是必不可少的,但是各種平臺環境不一,要如何兼容和策略處理。 HTML5 call native app 背景 為了提升app的曝光和app的用戶新增,添加H5分享頁的應用場景是必不可少的,但是各種平臺環境不一,要如何兼容和策略處理。下面會一一說明 1. 頁面調起原生app 調起原生 app,然后下載APP 不同平臺的兼容和策略處理,...
閱讀 3464·2021-11-18 10:02
閱讀 3707·2021-09-13 10:25
閱讀 1920·2021-07-26 23:38
閱讀 2568·2019-08-30 15:44
閱讀 2268·2019-08-30 13:51
閱讀 1223·2019-08-26 11:35
閱讀 2273·2019-08-26 10:29
閱讀 3444·2019-08-23 14:56