通过扫描二维码打开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修改input的type属性问题探讨
Oct 12 Javascript
jquery无法设置checkbox选中即没有变成选中状态
Mar 27 Javascript
AngularJS实现表单验证
Jan 28 Javascript
JS实现生成会变大变小的圆环实例
Aug 05 Javascript
AngularJS中的$watch(),$digest()和$apply()区分
Apr 04 Javascript
使用PHP+JavaScript将HTML页面转换为图片的实例分享
Apr 18 Javascript
jQuery弹出窗口打开链接的实现代码
Dec 24 Javascript
Vue 中的compile操作方法
Feb 26 Javascript
jQuery中复合选择器简单用法示例
Mar 31 jQuery
layui prompt 设置允许空白提交的方法
Sep 24 Javascript
VSCode 配置uni-app的方法
Jul 11 Javascript
JS call()及apply()方法使用实例汇总
Jul 11 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
在同一窗体中使用PHP来处理多个提交任务
2008/05/08 PHP
让CodeIgniter数据库缓存自动过期的处理的方法
2014/06/12 PHP
在Mac OS上自行编译安装Apache服务器和PHP解释器
2015/12/24 PHP
php封装的验证码工具类完整实例
2016/10/19 PHP
thinkPHP多语言切换设置方法详解
2016/11/11 PHP
PHP将数据导出Excel表中的实例(投机型)
2017/07/31 PHP
PHP实现字符串翻转功能的方法【递归与循环算法】
2017/11/03 PHP
JavaScript的类型转换(字符转数字 数字转字符)
2010/08/30 Javascript
SharePoint 客户端对象模型 (一) ECMA Script
2011/05/22 Javascript
基于jquery实现状态限定编辑的代码
2012/02/11 Javascript
网页编辑器ckeditor和ckfinder配置步骤分享
2012/05/24 Javascript
JavaScript中的匀速运动和变速(缓冲)运动详细介绍
2012/11/11 Javascript
使用Jquery实现每日签到功能
2015/04/03 Javascript
从零学习node.js之文件操作(三)
2017/02/21 Javascript
小程序清理本地缓存的方法
2018/08/17 Javascript
小程序显示弹窗时禁止下层的内容滚动实现方法
2019/03/20 Javascript
Django模板继承 extend标签实例代码详解
2019/05/16 Javascript
微信小程序地图绘制线段并且测量(实例代码)
2020/01/02 Javascript
javascript设计模式 ? 命令模式原理与用法实例分析
2020/04/20 Javascript
jQuery实现图片切换效果
2020/10/19 jQuery
vue开发chrome插件,实现获取界面数据和保存到数据库功能
2020/12/01 Vue.js
WebStorm无法正确识别Vue3组合式API的解决方案
2021/02/18 Vue.js
编程语言Python的发展史
2014/09/26 Python
python有证书的加密解密实现方法
2014/11/19 Python
Python中实现三目运算的方法
2015/06/21 Python
python实现可以断点续传和并发的ftp程序
2016/09/13 Python
pytorch 中的重要模块化接口nn.Module的使用
2020/04/02 Python
Python3.9.1中使用match方法详解
2021/02/08 Python
Kiehl’s科颜氏西班牙官方网站:源自美国的植物护肤品牌
2020/02/22 全球购物
八年级数学教学反思
2014/01/31 职场文书
硕士生找工作求职信
2014/07/05 职场文书
校园主题婚礼活动策划方案
2014/09/15 职场文书
开展批评与自我批评发言材料
2014/10/17 职场文书
2014年惩防体系建设工作总结
2014/12/01 职场文书
2016春季运动会前导词
2015/11/25 职场文书
win11自动弹出虚拟键盘怎么关闭? Win11关闭虚拟键盘的技巧
2023/01/09 数码科技