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 相关文章推荐
jQuery学习笔记之DOM对象和jQuery对象
Dec 22 Javascript
dojo学习第二天 ajax异步请求之绑定列表
Aug 29 Javascript
Package.js  现代化的JavaScript项目make工具
May 23 Javascript
js 实现的可折叠留言板(附源码下载)
Jul 01 Javascript
Jquery实现弹性滑块滑动选择数值插件
Aug 08 Javascript
JS延时器提示框的应用实例代码解析
Apr 27 Javascript
jquery实现垂直和水平菜单导航栏
Aug 27 Javascript
jquery select2的使用心得(推荐)
Dec 04 Javascript
关于webpack2和模块打包的新手指南(小结)
Aug 07 Javascript
jQuery实现的简单动态添加、删除表格功能示例
Sep 21 jQuery
vue实现form表单与table表格的数据关联功能示例
Jan 29 Javascript
jQuery中each和js中forEach的区别分析
Feb 27 jQuery
基于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扩展编写点滴 技巧收集
2010/03/09 PHP
Apache实现Web Server负载均衡详解(不考虑Session版)
2013/07/05 PHP
php中hashtable实现示例分享
2014/02/13 PHP
php的ajax简单实例
2014/02/27 PHP
PHP实现在对象之外访问其私有属性private及保护属性protected的方法
2017/11/20 PHP
php微信公众号开发之快递查询
2018/10/20 PHP
深入理解javascript中的立即执行函数(function(){…})()
2014/06/12 Javascript
JS中的form.submit()不能提交表单的错误原因
2014/10/08 Javascript
jQuery实现为图片添加镜头放大效果的方法
2015/06/25 Javascript
C++中的string类的用法小结
2015/08/07 Javascript
jquery实现初次打开有动画效果的网页TAB切换代码
2015/09/06 Javascript
基于javascript实现全国省市二级联动下拉选择菜单
2016/01/28 Javascript
mvc 、bootstrap 结合分布式图简单实现分页
2016/10/10 Javascript
深入理解jQuery.data() 的实现方式
2016/11/30 Javascript
Bootstrap导航简单实现代码
2017/03/06 Javascript
微信小程序-form表单提交代码实例
2019/04/29 Javascript
通过循环优化 JavaScript 程序
2019/06/24 Javascript
JavaScript 几种循环方式以及模块化的总结
2020/09/03 Javascript
Nuxt的动态路由和参数校验操作
2020/11/09 Javascript
python开发之文件操作用法实例
2015/11/13 Python
python hbase读取数据发送kafka的方法
2018/12/27 Python
详解Python数据分析--Pandas知识点
2019/03/23 Python
python自带tkinter库实现棋盘覆盖图形界面
2019/07/17 Python
python数据化运营的重要意义
2019/11/25 Python
pytorch实现mnist分类的示例讲解
2020/01/10 Python
如何用Python提取10000份log中的产品信息
2021/01/14 Python
戴森台湾线上商城:Dyson Taiwan
2018/05/21 全球购物
瑞士最大的图书贸易公司:Orell Füssli
2019/12/28 全球购物
临床医师专业个人自我评价范文
2013/11/07 职场文书
计算机相关的自我评价
2014/01/15 职场文书
战友聚会邀请函
2014/01/18 职场文书
班风学风建设方案
2014/05/06 职场文书
责任心演讲稿
2014/05/14 职场文书
2015教师节通讯稿
2015/07/20 职场文书
JavaScript数组reduce()方法的语法与实例解析
2021/07/07 Javascript
微信小程序实现轮播图指示器
2022/06/25 Javascript