JS实现点击网页判断是否安装app并打开否则跳转app store

作者:代码拾荒时间:2026-10-30 16:56:12浏览:305

本文介绍如何通过JavaScript在网页点击时判断用户是否已安装指定APP。若已安装则直接唤起,未安装则跳转至应用商店。涵盖iOS meta标签配置、iframe唤起技巧及Android Schema协议处理,并针对微信、QQ浏览器等场景提供注意事项。

APP推广中的用户体验问题

在APP推广场景中,常见做法是在页面顶部展示大尺寸Banner图片或二维码,并直接链接至App Store。为了优化用户体验,我们需要模拟用户从首次访问到多次访问的操作流程。

1、用户第一次访问宣传页面

a、点击Banner,进入到APP Store中对应的APP下载页

b、APP下载页中提示:安装;用户点击安装

c、安装完成后,APP下载页中提示:打开;用户继续点击打开

d、用户正常使用APP

2、用户第二次访问宣传页面

a、点击Banner,进入到APP Store中对应的APP下载页

b、APP下载页中提示:打开;用户直接点击打开

c、用户正常使用APP

3、用户第三次、第四次、...、第N次访问,操作步骤同2

可以看出,无论是点击Banner还是扫描二维码,对于已安装APP的用户而言,重复引导至App Store下载页的体验非常糟糕。

更优的交互方式是:点击Banner(或扫描二维码)后,程序先判断当前系统是否已安装该App。如果未安装,则自动跳转至App Store下载页;如果已安装,则直接打开App。

iOS平台实现方案

在iOS平台上,要在网页中展示APP的大Banner,只需在<head>标签内添加一个<meta>标签,格式如下:


<meta name='apple-itunes-app' content='app-id=你的APP-ID'>

例如,若要添加百度贴吧Native APP的大Banner,可使用以下代码:


<meta name='apple-itunes-app' content='app-id=477927812'>

Android平台实现方案

关于点击链接后能否直接打开App,可通过以下代码实现。前提条件是必须知晓App对应的打开协议,例如贴吧App的协议为:com.baidu.tieba:// ,微信的协议为:weixin:// ,其他App依此类推。


<!-- a标签的链接,设置为对应的下载链接;点击打开的动作,在click事件中注册 --> 
<a href="https://itunes.apple.com/cn/app/id477927812" id="openApp">贴吧客户端</a> 
<script type="text/javascript"> 
document.getElementById('openApp').onclick = function(e){ 
// 通过iframe的方式试图打开APP,如果能正常打开,会直接切换到APP,并自动阻止a标签的默认行为 
// 否则打开a标签的href链接 
var ifr = document.createElement('iframe'); 
ifr.src = 'com.baidu.tieba://'; 
ifr.style.display = 'none'; 
document.body.appendChild(ifr); 
window.setTimeout(function(){ 
document.body.removeChild(ifr); 
},3000) 
}; 
</script>

如果设计为扫描二维码的形式,可以使用以下代码:


<!-- a标签的链接,设置为对应的下载链接;点击打开的动作,在click事件中注册 --> 
<a href="https://itunes.apple.com/cn/app/id477927812" id="openApp" style="display: none">贴吧客户端</a> 
<script type="text/javascript"> 
document.getElementById('openApp').onclick = function(e){ 
// 通过iframe的方式试图打开APP,如果能正常打开,会直接切换到APP,并自动阻止a标签的默认行为 
// 否则打开a标签的href链接 
var ifr = document.createElement('iframe'); 
ifr.src = 'com.baidu.tieba://'; 
ifr.style.display = 'none'; 
document.body.appendChild(ifr); 
window.setTimeout(function(){ 
document.body.removeChild(ifr); 
},3000) 
}; 
document.getElementById('openApp').click();

具体使用哪种方式,取决于实际的应用场景。

实际项目中的技术实现与注意事项

在浏览网页时,你可能会看到页面底部漂浮着“打开APP”或“下载APP”的提示框。如果手机已安装该APP,网页会提示“打开APP”;若未安装,则提示“下载APP”。从技术角度如何实现这一功能?下面我将分享相关技术。去年公司承接国际动漫节项目时,客户提出了类似需求:点击网页中的企业链接时,若已安装APP则直接打开;若未安装,则跳转至APP页面。

下面我将分享该功能的源码。


if(navigator.userAgent.match(/android/i)) {
// 通过iframe的方式试图打开APP,如果能正常打开,会直接切换到APP,并自动阻止a标签的默认行为
// 否则打开a标签的href链接
var isInstalled;
//下面是安卓端APP接口调用的地址,自己根据情况去修改
var ifrSrc = 'cartooncomicsshowtwo://platformapi/startApp? type=0&id=${com.id}&phone_num=${com.phone_num}';
var ifr = document.createElement('iframe');
ifr.src = ifrSrc;
ifr.style.display = 'none';
ifr.onload = function() {
// alert('Is installed.');
isInstalled = true;
alert(isInstalled);
document.getElementById('openApp0').click();};
ifr.onerror = function() {
// alert('May be not installed.');
isInstalled = false;
alert(isInstalled);
}
document.body.appendChild(ifr);
setTimeout(function() {
document.body.removeChild(ifr);
},1000);
}
//ios判断
if(navigator.userAgent.match(/(iPhone|iPod|iPad);?/i))
if(navigator.userAgent.match(/(iPhone|iPod|iPad);?/i)) {
//Animation://com.yz.animation
var isInstalled;
//var gz = '{"comName":"${com.short_name}","comID":"${com.id}","comPhoneNum":"${com.phone_num}","type":"0"}';
//var jsongz =JSON.parse(gz);
//下面是IOS调用的地址,自己根据情况去修改
var ifrSrc = 'Animation://?comName=${com.short_name}&comID=${com.id}&comPhoneNum=${com.phone_num}&type=0';var ifr = document.createElement('iframe');
ifr.src = ifrSrc;
ifr.style.display = 'none';
ifr.onload = function() {
// alert('Is installed.');
isInstalled = true;
alert(isInstalled);
document.getElementById('openApp1').click();};
ifr.onerror = function() {
// alert('May be not installed.');
isInstalled = false;
alert(isInstalled);
}
document.body.appendChild(ifr);
setTimeout(function() {
document.body.removeChild(ifr);
},1000);
}
}

在开发过程中,需要注意以下两个问题:

1、接口地址必须准确无误,可通过查询schema协议来调用。

2、在Android平台开发时,如果使用微信扫一扫或QQ浏览器扫码功能,

使用上述协议时,可能会遇到问题,即必须将APK上架至腾讯应用市场。

以上所述是小编给大家介绍的JS实现点击网页判断是否安装app并打开否则跳转app store,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对本站网站的支持!

作者最新文章