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 相关文章推荐
解析瀑布流布局:JS+绝对定位的实现
May 08 Javascript
Extjs4中tree的拖拽功能(可以两棵树之间拖拽) 简单实例
Dec 08 Javascript
需要牢记的JavaScript基础知识
Sep 25 Javascript
有趣的bootstrap走动进度条
Dec 01 Javascript
JS实现禁止高频率连续点击的方法【基于ES6语法】
Apr 25 Javascript
微信小程序实现页面跳转传值的方法
Oct 12 Javascript
详解如何在React组件“外”使用父组件的Props
Jan 12 Javascript
react项目如何使用iconfont的方法步骤
Mar 13 Javascript
JS桶排序的简单理解与实现方法示例
Nov 25 Javascript
JS深入学习之数组对象排序操作示例
May 01 Javascript
vue路由实现登录拦截
Mar 24 Vue.js
ztree+ajax实现文件树下载功能
May 18 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容易忘记的知识点分享
2013/04/30 PHP
php将日期格式转换成xx天前的格式
2015/04/16 PHP
laravel学习教程之存取器
2016/07/30 PHP
PHP 输出缓冲控制(Output Control)详解
2016/08/25 PHP
php使用file函数、fseek函数读取大文件效率对比分析
2016/11/04 PHP
windows环境下使用Composer安装ThinkPHP5
2018/05/18 PHP
输入自动提示搜索提示功能的使用说明:sugggestion.txt
2013/09/02 Javascript
禁止ajax缓存获取程序最新数据的方法
2013/11/19 Javascript
js操作table元素实现表格行列新增、删除技巧总结
2015/11/18 Javascript
js实现简单的省市县三级联动效果实例
2016/02/18 Javascript
Angular 页面跳转时传参问题
2016/08/01 Javascript
AngularJS指令与控制器之间的交互功能示例
2016/12/14 Javascript
Js实现中国公民身份证号码有效性验证实例代码
2017/05/03 Javascript
Vue 与 Vuex 的第一次接触遇到的坑
2018/08/16 Javascript
深入了解响应式React Native Echarts组件
2019/05/29 Javascript
JS/CSS实现字符串单词首字母大写功能
2019/09/03 Javascript
在Vue中使用CSS3实现内容无缝滚动的示例代码
2020/11/27 Vue.js
[01:12:35]Spirit vs Navi Supermajor小组赛 A组败者组第一轮 BO3 第二场 6.2
2018/06/03 DOTA
[02:42]DOTA2城市挑战赛收官在即 四强之争风起云涌
2018/06/05 DOTA
Python库urllib与urllib2主要区别分析
2014/07/13 Python
Python实现中文数字转换为阿拉伯数字的方法示例
2017/05/26 Python
Python实现的文本编辑器功能示例
2017/06/30 Python
python实现百万答题自动百度搜索答案
2018/01/16 Python
python+PyQT实现系统桌面时钟
2020/06/16 Python
基于django channel实现websocket的聊天室的方法示例
2019/04/11 Python
Django 自定义分页器的实现代码
2019/11/24 Python
详解python中的三种命令行模块(sys.argv,argparse,click)
2020/12/15 Python
用Python制作音乐海报
2021/01/26 Python
互动出版网:专业书籍
2017/03/21 全球购物
销售高级职员求职信
2013/10/29 职场文书
魅力教师事迹材料
2014/01/10 职场文书
车辆工程专业求职信
2014/04/28 职场文书
整顿机关作风心得体会
2014/09/10 职场文书
感谢师恩主题班会
2015/08/17 职场文书
python实现批量移动文件
2021/04/05 Python
python获取对象信息的实例详解
2021/07/07 Python