通过扫描二维码打开app的实现代码


Posted in Javascript onNovember 10, 2016

最近有朋友问小编这样一个问题,先给大家说下项目需求:扫描二维码打开app如果用户没有这个app则提示它跳转。

用网页直接来调用app是不打可能的,必须原生那边先做一些配置。

首先,安卓和苹果的调用方法是不同的。

所以我们需要先判断一下终端。

var u = navigator.userAgent,
app = navigator.appVersion;
var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //android终端或者uc浏览器
var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端

之后最好是分别跳转到两个不同的页面去做操作,因为苹果需要在头部配置一个app-id<meta name='apple-itunes-app' content='app-id=1115968341'>

下面是苹果的代码

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name='apple-itunes-app' content='app-id=1115968341'>
<title></title>
</head>
<body>
<a href="https://itunes.apple.com/cn/app/yi-fang-kuai-le-xue-tang/id1115968341?mt=8" 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 = 'iosefunbox://'; 
ifr.style.display = 'none'; 
document.body.appendChild(ifr); 
window.setTimeout(function(){ 
document.body.removeChild(ifr); 
},3000) 
};
</script>
</body>
</html>

这里的ifr.src就是你去打开app的协议路径,安卓和苹果是不一样的。<br><br><br>如果是安卓机的话就简单了

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
</head>
<body>
<a href="http://a.app.qq.com/o/simple.jsp?pkgname=com.edufound.mobile" id="openApp">点击打开</a>
<script type="text/javascript">
//安卓
// /**/window.location.href = "http://a.app.qq.com/o/simple.jsp?pkgname=com.edufound.mobile";
// 通过iframe的方式试图打开APP,如果能正常打开,会直接切换到APP,并自动阻止a标签的默认行为 
// 否则打开a标签的href链接 
var ifr = document.createElement('iframe'); 
ifr.src = 'efunbox://efunbox.app/efunbox/open'; 
ifr.style.display = 'none'; 
document.body.appendChild(ifr); 
window.setTimeout(function(){ 
document.body.removeChild(ifr); 
},3000);
</script>
</body>
</html>

这是我们原先的需求,后来变了,说苹果直接跳转到appstore里面就好了,不用直接打开,安卓的话需要直接打开。

这样我就直接把它们集合在一个网页就行。

我上面的a链接是直接跳转到腾讯应用宝里面。

用网页扫描访问的话是没问题的,

但是我就感觉会出事,后来拿微信扫一扫就蒙逼了。安卓只会打开a链接,跳转不进app,因为被微信拦截掉了,苹果也一样,解决的方案只能是点击右上角,提示用户在浏览器打开就没问题。这种方法是无奈之举,但后来针对苹果机找到了一个解决它的方案就是,a链接的跳转直接跳腾讯应用宝上架的链接,然后微信内部会处理帮你自动跳转到appstore里面。

最后是整合了一下的代码。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body id="body">
<script type="text/javascript">
var u = navigator.userAgent,
app = navigator.appVersion;
var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //android终端或者uc浏览器
var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
if(isIOS){
window.location.href = "http://a.app.qq.com/o/simple.jsp?pkgname=com.edufound.mobile"; 
}
if(isAndroid){
alert("请点击右上角在浏览器打开");
window.location.href = "http://a.app.qq.com/o/simple.jsp?pkgname=com.edufound.mobile";
var ifr = document.createElement('iframe'); 
ifr.src = 'efunbox://efunbox.app/efunbox/open'; 
ifr.style.display = 'none'; 
document.body.appendChild(ifr); 
window.setTimeout(function(){ 
document.body.removeChild(ifr); 
},3000);
}
</script>
</body>
</html>

补充:

扫描二维码跳转app

1、判断是否安装了app

<html> 
<head> 
<meta name="viewport" content="width=device-width" /> 
</head> 
<body> 
<h2><a id="applink1" href="mtcmtc://profile/116201417">Open scheme(mtcmtc) defined in iPhone with parameters </a></h2> 
<h2><a id="applink2" href="unknown://nowhere">open unknown with fallback to appstore</a></h2> 
<p><i>Only works on iPhone!</i></p> 
<script type="text/javascript"> 
// To avoid the "protocol not supported" alert, fail must open another app.
var appstore = "itms://itunes.apple.com/us/app/facebook/id284882215?mt=8&uo=6";
function applink(fail){
return function(){
var clickedAt = +new Date;
// During tests on 3g/3gs this timeout fires immediately if less than 500ms.
setTimeout(function(){
// To avoid failing on return to MobileSafari, ensure freshness!
if (+new Date - clickedAt < 2000){
window.location = fail;
}
}, 500); 
};
}
document.getElementById("applink1").onclick = applink(appstore);
document.getElementById("applink2").onclick = applink(appstore);
</script> 
</body> 
</html>

2、打开项目工程target里面的schemurl追加://

以上所述是小编给大家介绍的通过扫描二维码打开app的实现代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
一个简单的js渐显(fadeIn)渐隐(fadeOut)类
Jun 19 Javascript
javascript验证只能输入数字和一个小数点示例
Oct 21 Javascript
JS脚本defer的作用示例介绍
Jan 02 Javascript
js函数模拟显示桌面.scf程序示例
Apr 20 Javascript
js识别不同浏览器基于userAgent做判断
Jul 29 Javascript
jquery简单实现幻灯片的方法
Aug 03 Javascript
JavaScript观察者模式(经典)
Dec 09 Javascript
jQuery实现的粘性滚动导航栏效果实例【附源码下载】
Oct 19 jQuery
JS计算输出100元钱买100只鸡问题的解决方法
Jan 04 Javascript
详解PHP后期静态绑定分析与应用
Mar 21 Javascript
JS从非数组对象转数组的方法小结
Mar 26 Javascript
对layui中表单元素的使用详解
Aug 15 Javascript
用JS动态设置CSS样式常见方法小结(推荐)
Nov 10 #Javascript
关于json字符串与实体之间的严格验证代码
Nov 10 #Javascript
jquery日历插件e-calendar升级版
Nov 10 #Javascript
Vue.js开发环境搭建
Nov 10 #Javascript
js 获取本地文件及目录的方法(推荐)
Nov 10 #Javascript
javascript中的后退和刷新实现方法
Nov 10 #Javascript
jQuery中Nicescroll滚动条插件的用法
Nov 10 #Javascript
You might like
克隆一个新项目的快捷方式
2013/04/10 PHP
PHP错误Allowed memory size of 67108864 bytes exhausted的3种解决办法
2014/07/28 PHP
Laravel的throttle中间件失效问题解决方法
2016/10/09 PHP
golang 调用 php7详解及实例
2017/01/04 PHP
使用ThinkPHP生成缩略图及显示
2017/04/27 PHP
Yii框架ACF(accessController)简单权限控制操作示例
2019/04/26 PHP
AutoSave/自动存储功能实现
2007/03/24 Javascript
web性能优化之javascript性能调优
2012/12/28 Javascript
js综合应用实例简单的表格统计
2013/09/03 Javascript
jquery索引在使用中的一些困惑
2013/10/24 Javascript
基于jquery插件实现常见的幻灯片效果
2013/11/01 Javascript
Event altKey,ctrlKey,shiftKey属性解析
2013/12/18 Javascript
javascript弹出拖动窗口
2015/08/11 Javascript
Angularjs过滤器使用详解
2016/05/25 Javascript
js select实现省市区联动选择
2020/04/17 Javascript
jQuery源码分析之sizzle选择器详解
2017/02/13 Javascript
JSON 数据格式详解
2017/09/13 Javascript
javascript将非数值转换为数值
2018/09/13 Javascript
vue中使用axios post上传头像/图片并实时显示到页面的方法
2018/09/27 Javascript
面试题:react和vue的区别分析
2019/04/08 Javascript
微信头像地址失效踩坑记附带解决方案
2019/09/23 Javascript
Python中的模块和包概念介绍
2015/04/13 Python
简单说明Python中的装饰器的用法
2015/04/24 Python
python中列表和元组的区别
2017/12/18 Python
5个很好的Python面试题问题答案及分析
2018/01/19 Python
pycharm: 恢复(reset) 误删文件的方法
2018/10/22 Python
一个可以套路别人的python小程序实例代码
2019/04/09 Python
Python切割图片成九宫格的示例代码
2020/03/10 Python
完美解决jupyter由于无法import新包的问题
2020/05/26 Python
英国最大的独立家具零售商:Furniture Village
2016/09/06 全球购物
全球虚拟主机商:HostGator
2017/02/06 全球购物
德国最大的网上鞋店之一:Schuhe24.de
2017/06/10 全球购物
abstract class和interface有什么区别?
2012/01/03 面试题
数学教育专业求职信
2014/07/22 职场文书
《初涉尘世》读后感3篇
2020/01/10 职场文书
怎么禁用Windows 11快照布局? win11不使用快照布局的技巧
2021/11/21 数码科技