应该不少人遇到过这种需求，扫描二维码打开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. LoadRunner连接Genymotion

  2. 旅游行业的手机App Top5

    旅游类app分为很多种类,有我们大众认知的典型旅游app像携程旅行,途牛旅游:也有短程的提供代步功能的app,比如滴滴出行,快的打车:还包括我们的火车票,机票的预订app.所以旅游类app是一个很宽阔 ...

  3. C++之路进阶——HDU1880（魔咒词典）

    ---恢复内容开始--- New~ 欢迎参加2016多校联合训练的同学们~ 魔咒词典 Time Limit: 8000/5000 MS (Java/Others)    Memory Limit: 3 ...

  4. C# ComBox 垂直滚动条

    用到Combox控件两个属性: 1 MaxDorpDownItems 显示条数 2 IntegralHeight 设置 为false 例如:显示最多20条,超过20条显示垂直滚动条 this.comb ...

  5. PMP考试

    今天是第二次PMP模拟考试,得了146分,比上次高25分,这次题目相对简单些,看来昨晚的复习没有白费,还是有效果的. 有些题目影响还是比较深刻,老外的项目管理思想是先规划好一切再执行(管理),比如信息 ...

  6. 配置ADFS Outlook Client.

     error:The authentication endpoint Username was not found on the configured Secure Token Service!1.  ...

  7. CSS 文字垂直居中

    原始 demo html <div class ="box"> <div class="text"> 我是单行测试文字 </div ...

  8. swift跳转到Appstore

    //进入appstore中指定的应用 let str = NSString(format: "itms-apps://ax.itunes.apple.com/WebObjects/MZSto ...

  9. 使用httpclient发送http请求

    先来个httpclient的maven依赖 <dependency> <groupId>org.apache.httpcomponents</groupId> &l ...

  10. linux内核的makefile.txt讲解

    linux内核的linux-3.6.5\Documentation\kbuild\makefiles.txt Linux Kernel Makefiles This document describe ...