JS如何檢測手機上APP是否安裝的情況

我們在瀏覽網頁的時候，你會看到一個網頁下面漂浮着一個提示框“打開APP”或者“下載APP的字樣”，如果你的手機已經安裝過這個APP，那麼網頁會提示“打開APP”，如果沒有安裝，那就會提示“下載APP的字樣” 這個從技術角度是如何去實現的呢？下面我給大家分享這塊技術，去年公司給國際動漫節做項目的時候，客戶就提到這個需求，在點擊網頁企業的時候 那麼直接打開APP（如果已經安裝了） 如果沒有安裝過，直接打開APP頁面

 

下面我把這塊的源碼分享一下

01	if (navigator.userAgent.match(/android/i)) {

02	// 通過iframe的方式試圖打開APP，如果能正常打開，會直接切換到APP，並自動阻止a標籤的默認行爲

03	// 否則打開a標籤的href鏈接

04	var isInstalled;

05	//下面是安卓端APP接口調用的地址，自己根據情況去修改

06	varifrSrc = 'AppProtocolHeader://camnpr? type=0&id=${com.id}&phone_num=${com.phone_num}';

07	var ifr = document.createElement('iframe');

08	ifr.src = ifrSrc;

09	ifr.style.display = 'none';

10	ifr.onload = function() {

11	// alert('Is installed.');

12	isInstalled = true;

13	alert(isInstalled);

14	document.getElementById('openApp0').click();};

15	ifr.onerror = function() {

16	// alert('May be not installed.');

17	isInstalled = false;

18	alert(isInstalled);

19

}

20	document.body.appendChild(ifr);

21	setTimeout(function() {

22	document.body.removeChild(ifr);

23

},1000);

24

}

25

26

//ios判斷

27	if (navigator.userAgent.match(/(iPhone|iPod|iPad);?/i))

28	if (navigator.userAgent.match(/(iPhone|iPod|iPad);?/i))  {

29	//Animation://com.camnpr.animation

30	var isInstalled;

31	//var gz = '{"comName":"${com.short_name}","comID":"${com.id}","comPhoneNum":"${com.phone_num}","type":"0"}';

32	//var jsongz =JSON.parse(gz);

33

34	//下面是IOS調用的地址，自己根據情況去修改

35	varifrSrc = 'AppProtocolHeader://?comName=${com.short_name}&comID=${com.id}&comPhoneNum=${com.phone_num}&type=0';varifr = document.createElement('iframe');

36	ifr.src = ifrSrc;

37	ifr.style.display = 'none';

38	ifr.onload = function() {

39	// alert('Is installed.');

40	isInstalled = true;

41	alert(isInstalled);

42	document.getElementById('openApp1').click();};

43	ifr.onerror = function() {

44	// alert('May be not installed.');

45	isInstalled = false;

46	alert(isInstalled);

47

}

48	document.body.appendChild(ifr);

49	setTimeout(function() {

50	document.body.removeChild(ifr);

51

},1000);

52

}

53

}

大家在做的過程中需要注意兩個問題：

1、接口地址一定要寫對，大家可以查一下schema協議，通過這個協議調用的

2、在做用安卓的時候 如果用微信掃一掃或者QQ瀏覽器掃碼功能的時候

使用上面的協議會存在問題的就是必須用APK上架到騰訊應用市場上去