应该不少人遇到过这种需求,扫描二维码打开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. 多节点ssh免密匙登录

    1,在所有节点上,使用yourname用户名执行: ssh-keygen -t dsa -P '' -f /home/yourname/.ssh/id_dsa 2,在node1的/home/yourn ...

  2. mybatis-java1234一

    一,简单增删改代码实现 package com.mybatis.mapper; import java.util.List; import com.mybatis.model.Student; pub ...

  3. C/C++之指针加减法

    C和C++中可对指针进行加减,但对其进行乘除则基本无实际意义.一般来说,对指针进行减法的前提是减数和被减数均指向同一数组.加法同理.需要注意的是,两个指针的减法,结果是两个地址之间索引变量的数目,而不 ...

  4. 关于在linux中使用图形界面的网络管理工具

    有好几种自动设置的工具可以选择(既然说是自动设置的工具,那就说明有手动设置的工具,例如 使用 ip, iw, iwconfig 这些命令设置网络),例如:Connman, netctl, Networ ...

  5. Remove-Azureaccount (Can't get Azure credentials to stick in Powershel)

    https://social.technet.microsoft.com/forums/azure/en-US/260df055-7c4e-4ce2-8f8d-190ad20a4b76/cant-ge ...

  6. mybatis,sql 批量更新

    <update id="update81OrderStatus" parameterType="java.util.Map">    update ...

  7. 查找树ADT

    通过二叉查找树实现排序的例程 /** * 无论排序的对象是什么,都要实现Comparable接口 * * @param <T> */ public class BinaryNode< ...

  8. CentOS7 Nginx负载均衡

    五台服务器 192.168.155.129 nginx反向代理服务器 192.168.155.130 apache+PHP服务器,PHP要使用mysql函数库,配置的时候就要指定mysql安装路径,所 ...

  9. java中递归的方法的实例

    package com.demo.recursion; // 所谓递归,是指程序调用自身,当然,递归不会无休止地调用下去,它必然有一个出口,当满足条件时程序也就结束了,不然的话,那就是死循环了.// ...

  10. 脚本调用脚本时.与bash的差别

    在做项目时,发现脚本调用脚本时,会意外退出任务. 下面的脚本是父脚本: #!/bin/bash . ./data/child.sh echo 123sds echo "45gfdg" ...