应该不少人遇到过这种需求，扫描二维码打开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. 200行代码搞定炸金花游戏（PHP版）

    <?php/* * 游戏名称:炸金花(又名三张牌.扎金花) * 开发时间:2009.1.14 * 编 程:多菜鸟 * 来 源:http://blog.csdn.net/kingerq/archi ...

  2. web网站的url设计

    通常再web网站设计url时是按功能模块设计url,然后再control层一个功能模块对应一个control层类,每个control类中的方法映射相应的url请求. 如果遇见另一个功能模块需要实现同样 ...

  3. Super Jumping! Jumping! Jumping!

    Nowadays, a kind of chess game called “Super Jumping! Jumping! Jumping!” is very popular in HDU. May ...

  4. gTest详解

    1. 安装使用 1.1 安装 在https://code.google.com/p/googletest/ 下载源码 进入msvc, 注意编译方式, 如果是dll, 选择 gtest-md 编译生成l ...

  5. win10安装oracle 11g 报错 要求的结果: 5.0,5.1,5.2,6.0 6.1 之一 实际结果: 6.2

    Windows10下安装Oracle11G.10G,都会提示如下信息 正在检查操作系统要求... 要求的结果: 5.0,5.1,5.2,6.0 之一 实际结果: 6.1 检查完成.此次检查的总体结果为 ...

  6. SSAS中事实表中的数据如果因为一对多或多对多关系复制了多份，在维度上聚合的时候还是只算一份

    SSAS事实表中的数据,有时候会因为一对多或多对多关系发生复制变成多份,如下图所示: 图1 我们可以从上面图片中看到,在这个例子中,有三个事实表Fact_People_Money(此表用字段Money ...

  7. CodeSmith 介绍

    代码生成器作用 中国有句古语叫做“工欲善其事,必先利其器”,用通俗的话来说就是“磨刀不误砍柴功”,古人的这些话告诉我们:要把事情做好,事先应该准备合适的工具.工具不仅仅包括器具, 还包括思想.理论.经 ...

  8. vim基本命令之剪切复制粘贴替换

    首先是剪切(删除): 剪切其实也就顺带删除了所选择的内容,所以既可以当剪切命令用,也可以当删除命令使用. 1 首先,可以在命令模式下输入v进入自由选取模式,选择需要剪切的文字后,按下d就可以进行剪切了 ...

  9. 转:django 接收页面form的post数组

    <input type="text" name="input[]"> <input type="text" name=&q ...

  10. logstash输出到influxdb

    用了这个logstash扩展 https://github.com/PeterPaulH/logstash-influxdb/blob/master/src/influxdb.rb 把这个文件放到 l ...