应该不少人遇到过这种需求，扫描二维码打开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的协议路径,安卓和苹果是不一样的。

如果是安卓机的话就简单了
<!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. h5 扫描二维码打开app和点击下载功能的实现

    window.onload = function () { jumpToapp() } var browser = { isAndroid: function () { return navigato ...

  2. 手机扫描二维码下载APP，根据操作系统不同自动下载

    Android和IOS手机扫描二维码下载APP,根据OS不同,自动处理相应下载操作.IOS自动跳转至AppStore应用下载页,Android自动下载应用的apk包. <script type= ...

  3. 生成扫描二维码下载app的二维码的方法

    进入APP store苹果应用程序商店,根据分类找到你要生成二维码的APP,然后在浏览器连接里找到ID后的一串数字就是APP的应用ID了. 安卓系统的appid 在电脑浏览器中打开应用宝官网,http ...

  4. 微信中扫描二维码自动打开手机系统默认浏览器下载APP(APK)

    很多朋友问我怎么解决微信内点击链接或扫描二维码可以直接跳出微信在外部浏览器打开网页链接,其实这并不难,只要我们实现微信跳转功能即可.下面给大家介绍这个功能 功能目的 生成微信跳转链接,实现微信内置浏览 ...

  5. 制作IOS企业版App网页扫描二维码下载安装

    有时候我们需要在XX网站的主页上去扫描二维码下载,那么ios开发中如何做到这一点呢. 我给大家解答一下,这也是在最近工作中用到的部分,在网上了解了一些. 下面给大家分解一下步骤: 1.Plist 和 ...

  6. Android开发——通过扫描二维码，打开或者下载Android应用

    Android开发——通过扫描二维码,打开或者下载Android应用   在实现这个功能的时候,被不同的浏览器折磨的胃疼,最后实现了勉强能用,也查考了一下其他人的博客 android实现通过浏览器点击 ...

  7. 微信内点击链接或扫描二维码可直接用外部浏览器打开H5链接的解决方案

    很多朋友问我怎么解决微信内点击链接或扫描二维码可以直接跳出微信在外部浏览器打开网页链接,其实这并不难,只要我们使用微信跳转浏览器接口实现跳转功能即可. 简单的处理方案 1. 用浏览器打开我们需要用到的 ...

  8. App阅读pdf和扫描二维码功能

    在之前开发的Android手机App中,需要实现阅读pdf和扫描二维码的功能,在github 上找到大牛封装好包,亲测可用. 阅读pdf: https://github.com/barteksc/An ...

  9. 使用vue做移动app时，调用摄像头扫描二维码

    现在前端技术发展飞快,前端都能做app了,那么项目中,也会遇到调用安卓手机基层的一些功能,比如调用摄像头,完成扫描二维码功能 下面我就为大家讲解一下,我在项目中调用这功能的过程. 首先我们需要一个中间 ...

随机推荐

  1. chrome浏览器调试typescript

    在chrome的开发人员工具的配置项中,有一个sourcemap的选项,用来配置javascript源码和生成代码的关系. 如果能在浏览器中直接调试typescript代码,才能让我们真正体会到typ ...

  2. UISegmentedControl 的使用

    /** 设置选择器 */ - (void)setUpSegmentCtr { UISegmentedControl *segmentCtr = [[UISegmentedControl alloc] ...

  3. C++数组实现的循环队列

    #include<iostream> #include <string> /* 功能:数组实现的循环队列,C++实现,学习参考 */ using namespace std; ...

  4. ffmpeg将图片合成视频

    本来想做个android录制屏幕的功能,但是目前只能是截图 然后把图片合成视频,这里就需要用到 ffmpeg 在做之前也是参考了其它一些比较不错的文章 比如:http://www.open-open. ...

  5. 基于Centos7+Nginx+Tomcat8的负载均衡服务器的搭建

    由于工作的需求,在使用中,需要搭建负载均衡,研究了Apache+Tomat负载均衡的方案,并且通过检索相关的文章,进行了比较发现,Apache负载负载均衡在使用的效率上,远远不如Nginx的效率高,因 ...

  6. 最新IP地址数据库Dat格式-高性能高并发版(2017年1月)

    最新IP地址数据库->Dat格式 高性能格式->qqzeng-ip.dat 国内版-20170101-Dat 版                国外版-20170101-Dat 版     ...

  7. Application Pool

  8. tcp连接listen的backlog剖析

    TCP连接中,最重要的是连接TCP连接上,两个方向之间的各个状态及各个系统调用与状态之间的关系.往往可以以两种图表示,第一种是状态转换图,第二种是连接时序图.如下: 状态图: 时序图:         ...

  9. Sublime一键预览

    //chrome{ "keys": [ "f12" ], "command": "side_bar_files_open_with ...

  10. windowsAPI遍历文件夹（速度高于递归）

    #region API 遍历文件夹及其子文件夹和子文件 #region 声明WIN32API函数以及结构 ************************************** [DllImpo ...