跳过微信屏蔽APP扫描以及识别不同系统的手机

最新推荐文章于 2021-01-03 23:35:52 发布

lixunjing

最新推荐文章于 2021-01-03 23:35:52 发布

阅读量1.8k

点赞数

分类专栏：微信文章标签：微信二维码 js

本文链接：https://blog.csdn.net/lixunjing/article/details/42522629

版权

微信专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1、产生问题的原因
        因为腾讯为了保护自家的利益，只有把APP发布到他们的应用宝上，用他们提供的连接才能用微信进行APP扫描，否则的话用微信扫描APP的二维码一律都屏蔽掉。
   2、需要解决的问题
       首先识别不同终端扫描，是android手机扫描还是IOS手机扫描，还是iPad扫描，如果是：
           2.1 android手机扫描，则进行判断是用微信扫描还是用其它扫描软件扫描，如果是微信扫描则跳出保护层提示用浏览器打开进行下载安装，否则的直接进行
               下载安装
           2.2 IOS手机扫描，则自动跳到appstore里让用户进行下载
    3、识别不同终端手机的代码以及对扫描软件判断：
   <!--JSP代码---!>

 <%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport"
    content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta charset="utf-8">
<title>手机APP下载页面</title>
<style type="text/css">
* {
    margin: 0;
    padding: 0;
}

a {
    text-decoration: none;
}

img {
    max-width: 100%;
    height: auto;
}

.weixin-tip {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    filter: alpha(opacity = 80);
    height: 100%;
    width: 100%;
    z-index: 100;
}

.weixin-tip p {
    text-align: center;
    margin-top: 10%;
    padding: 0 5%;
}
</style>
<script type="text/javascript">
    // 获取终端的相关信息
    var Terminal = {
        // 辨别移动终端类型
        platform : function() {
            var u = navigator.userAgent, app = navigator.appVersion;
            return {
                // android终端或者uc浏览器
                android : u.indexOf('Android') > -1 || u.indexOf('Linux') > -1,
                // 是否为iPhone或者QQHD浏览器
                iPhone : u.indexOf('iPhone') > -1,
                // 是否iPad
                iPad : u.indexOf('iPad') > -1
            };
        }(),
        // 辨别移动终端的语言：zh-cn、en-us、ko-kr、ja-jp...
        language : (navigator.browserLanguage || navigator.language)
                .toLowerCase()
    }

    // 根据不同的终端，跳转到不同的地址
    var theUrl = 'http://www.baidufe.com';
    if (Terminal.platform.android) {
        //theUrl = '你的Android APP对应下载地址：apk文件地址';
        var ua = window.navigator.userAgent.toLowerCase();
        if(ua.match(/MicroMessenger/i) == 'micromessenger'){
          //"发现微信扫描则跳出保护层让其打开浏览器"
            theUrl='http://10.10.3.241:8080/TongJiWeiXin/twocodeie.jsp';
        }else{
          //其它扫描，则不做拦截，让其进行下载
            theUrl="http://218.242.153.98/EyeDisease/EyeDisease.apk";
        }
        
    
    } else if (Terminal.platform.iPhone) {
        //theUrl = '你的iPhone APP对应下载地址：APP Store地址';
        theUrl="http://dynamic.12306.cn/otn/appDownload/download";
    } else if (Terminal.platform.iPad) {
        // 还可以通过language，区分开多国语言版
        switch (Terminal.language) {
        case 'en-us':
            theUrl = '你的iPad APP（英文版）对应下载地址：APP Store地址';
            break;
        case 'ko-kr':
            theUrl = '你的iPad APP（韩语版）对应下载地址：APP Store地址';
            break;
        case 'ja-jp':
            theUrl = '你的iPad APP（日文版）对应下载地址：APP Store地址';
            break;
        default:
            theUrl = '你的iPad APP（中文版-默认）对应下载地址：APP Store地址';
        }
    }
    location.href = theUrl;
</script>
</head>
<body>
 
</body>
</html>

<!--JSP代码---!>

4、微信扫描跳出保护层让其用浏览器打开代码、
<!--jsp--!>

  <!DOCTYPE html>
<html lang="zh_CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
 <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<title>点击下载应用</title>
<style type="text/css">
* {
    margin: 0;
    padding: 0;
}

a {
    text-decoration: none;
}

img {
    max-width: 100%;
    height: auto;
}

.weixin-tip {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    filter: alpha(opacity = 80);
    height: 100%;
    width: 100%;
    z-index: 100;
}

.weixin-tip p {
    text-align: center;
    margin-top: 10%;
    padding: 0 5%;
}
</style>
</head>
<body>
    <div class="weixin-tip">
        <p>
            <img src="img/live_weixin.png" alt="微信打开" />
        </p>
    </div>
    <script type="text/javascript">
        $(window).on("load", function() {
            var winHeight = $(window).height();
            function is_weixin() {
                var ua = navigator.userAgent.toLowerCase();
                if (ua.match(/MicroMessenger/i) == "micromessenger") {
                    return true;
                } else {
                    return false;
                }
            }
            var isWeixin = is_weixin();
            if (isWeixin) {
                $(".weixin-tip").css("height", winHeight);
                $(".weixin-tip").show();
            }
        })
    </script>
    <a href="http://218.242.153.98/EyeDisease/EyeDisease.apk" style="font-size: 35px;">APP下载</a>
</body>
</html>

<!--jsp--!>

下面是live_weixin.png图片，下载下来，放入项目中，此文引用了蔡宝鉴博客的部分内容，在此感谢