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


Posted in Javascript onNovember 18, 2016

常常有这样的场景,咱们开发出来的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的用户来说,这个体验都是非常糟糕的。

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

在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'>

而对于点击链接后,能否直接打开,可以通过下面的代码来实现。前提条件:你得知道你的APP对应的打开协议,如贴吧APP,协议为:com.baidu.tieba:// ,微信的:weixin:// ,and so on。。。

<!-- 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、在做用安卓的时候 如果用微信扫一扫或者QQ浏览器扫码功能的时候

使用上面的协议会存在问题的就是必须用APK上架到腾讯应用市场上去

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

Javascript 相关文章推荐
JavaScript 基础知识 被自己遗忘的
Oct 15 Javascript
javascript 系统文件夹文件操作及参数介绍
Jan 08 Javascript
UpdatePanel和Jquery冲突的解决方法
Apr 01 Javascript
JavaScript检测弹出窗口是否已经关闭的方法
Mar 24 Javascript
Avalon中文长字符截取、关键字符隐藏、自定义过滤器
May 18 Javascript
微信小程序 HTTPS报错整理常见问题及解决方案
Dec 14 Javascript
JS设计模式之策略模式概念与用法分析
Feb 05 Javascript
vue项目设置scrollTop不起作用(总结)
Dec 21 Javascript
JS实现点击按钮随机生成可拖动的不同颜色块示例
Jan 30 Javascript
Vue起步(无cli)的啊教程详解
Apr 11 Javascript
微信小程序中使用echarts的实现方法
Apr 24 Javascript
JS利用prototype给类添加方法操作详解
Jun 21 Javascript
基于jQuery的checkbox全选问题分析
Nov 18 #Javascript
JavaScript动态数量的文件上传控件
Nov 18 #Javascript
JS识别浏览器类型(电脑浏览器和手机浏览器)
Nov 18 #Javascript
Node.js 实现简单小说爬虫实例
Nov 18 #Javascript
基于jQuery的select下拉框选择触发事件实例分析
Nov 18 #Javascript
jQuery实现隔行变色的方法分析(对比原生JS)
Nov 18 #Javascript
jQuery和JavaScript节点插入元素的方法对比
Nov 18 #Javascript
You might like
php curl选项列表(超详细)
2013/07/01 PHP
PHP+Mysql分布式事务与解决方案深入理解
2021/02/27 PHP
dtree 网页树状菜单及传递对象集合到js内,动态生成节点
2012/04/14 Javascript
如何使用jQUery获取选中radio对应的值(一句代码)
2013/06/03 Javascript
jQuery当鼠标悬停时放大图片的效果实例
2013/07/03 Javascript
js身份证判断方法支持15位和18位
2014/03/18 Javascript
浅谈jquery上下滑动的注意事项
2016/10/13 Javascript
js document.getElementsByClassName的使用介绍与自定义函数
2016/11/25 Javascript
jQuery实现单击按钮遮罩弹出对话框效果(2)
2017/02/20 Javascript
原生js二级联动效果
2017/06/20 Javascript
JavaScript如何对图片进行黑白化
2018/04/10 Javascript
详解Vue SPA项目优化小记
2018/07/03 Javascript
总结javascript三元运算符知识点
2018/09/28 Javascript
vue-cli设置publicPath小记
2020/04/14 Javascript
Python Web框架Flask下网站开发入门实例
2015/02/08 Python
Django利用cookie保存用户登录信息的简单实现方法
2019/05/27 Python
详解Python是如何实现issubclass的
2019/07/24 Python
Python CVXOPT模块安装及使用解析
2019/08/01 Python
Django之使用内置函数和celery发邮件的方法示例
2019/09/16 Python
如何将PySpark导入Python的放实现(2种)
2020/04/26 Python
Python脚本实现监听服务器的思路代码详解
2020/05/28 Python
python求numpy中array按列非零元素的平均值案例
2020/06/08 Python
在django中实现choices字段获取对应字段值
2020/07/12 Python
移动端Web页面的CSS3 flex布局快速上手指南
2016/05/31 HTML / CSS
基于HTML5实现类似微信手机摇一摇功能(计算摇动次数)
2017/07/24 HTML / CSS
北美个性化礼品商店:Things Remembered
2018/06/12 全球购物
潘多拉意大利官方网上商城:网上选购PANDORA珠宝
2018/10/07 全球购物
SQL Server数据库笔试题和答案
2016/02/04 面试题
期末考试动员演讲稿
2014/01/10 职场文书
2015年电厂工作总结范文
2015/05/13 职场文书
tensorflow学习笔记之tfrecord文件的生成与读取
2021/03/31 Python
python 统计代码耗时的几种方法分享
2021/04/02 Python
pytorch中的model.eval()和BN层的使用
2021/05/22 Python
python numpy中multiply与*及matul 的区别说明
2021/05/26 Python
一篇文章学会Vue中间件管道
2021/06/20 Vue.js
Go gorilla/sessions库安装使用
2022/08/14 Golang