二维码-下载APP和识别码中信息功能合一

最新推荐文章于 2021-07-21 14:24:09 发布

武当山道士

最新推荐文章于 2021-07-21 14:24:09 发布

阅读量2.4k

点赞数 2

分类专栏： H5+Css3 二维码文章标签：二维码多功能二维码二维码一码多用二维码下载识别合一

本文链接：https://blog.csdn.net/abs1004/article/details/77840615

版权

H5+Css3 同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

二维码

1 篇文章 0 订阅

订阅专栏

场景：用指定app扫码，则识别码中信息，用别的app或者浏览器扫码，则先跳转到下载app的界面

需求：一个二维码，实现功能
1、如果没安装指定app，扫描二维码后，跳转至app下载页面
|—1.1、如果用微信扫描，提示在浏览器中打开
|—1.2、非微信中打开
|——1.2.1、安卓手机，直接跳转到apk下载地址，自动下载app
|——1.2.2、苹果手机，跳转到appstore下载地址

2、如果用指定app扫码，则显示该二维码所对应物品的详细信息

示范：http://www.test.com/qr_identify.html?data=1504252956900FXKL4IC4 
原理：url+物品识别码 拼接成新字符串，以新字符串生成二维码，扫描此二维码。
如果不用指定app扫描（比如微信等）则选择url字符段跳转；
如果用指定app扫描，将新字符串的后21位（即：?data= 后面的21位字符串）截取后，传给后台做识别（或者将整个新字符串都传给后台，让后台自己截取后21位字符来识别）。

网站根目录结构如下：
这里写图片描述

qr_identify.html （在网站根目录下）代码如下：

<!DOCTYPE HTML>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>APP 下载跳转页面</title>
    <script src="res/js/jquery-1.11.1.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
    window.onload = function(){
        /**
         * 应用场景：多码合一，下载二维码及物品识别码合成一个多功能二维码，
         * 二维码内字符串 示范：http://www.test.com/qr_identify.html?data=1504252956900FXKL4IC4
         * 用上述形式的字符串生成二维码
         * 如果用微信，支付宝等扫描软件扫描，跳转到下载该app的地址
         * 如果用自己开发的app扫描二维码，则把整个字符串提交到php后台
         * 后台识别出其中的物品识别码，即 data= 后面的字符串 1504252956900FXKL4IC4
         * author: 武当山道士
        */


        // 获取终端的相关信息
        var Terminal = {
            // 辨别移动终端类型
            platform : function(){
                var u = window.navigator.userAgent;

                return {
                    //微信内置浏览器
                    weixin: u.toLowerCase().match(/MicroMessenger/i) == "micromessenger",
                    // android终端或者uc浏览器
                    android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1,
                    // 是否为iPhone或者QQHD浏览器
                    iPhone: u.indexOf('iPhone') > -1 ,
                    // 是否iPad
                    iPad: u.indexOf('iPad') > -1,
                    //Windows Phone
                    winPhone: u.indexOf('Windows Phone') > -1,

                };
            }(),
            // 辨别移动终端的语言：zh-cn、en-us、ko-kr、ja-jp...
            language : (navigator.browserLanguage || navigator.language).toLowerCase()
        }

        //url默认设置为官网首页
        var theUrl = 'http://www.test.com';

        // 根据不同的终端，跳转到不同的地址
        var t = Terminal.platform;
        if(t.weixin){//微信内置浏览器

            var winHeight = $(window).height();
            $(".weixin-tutor").css("height", winHeight);
            $(".weixin-tutor").show();
            return ;
        }else if(t.android){//安卓版下载地址
            theUrl = 'http://www.test.com/appinstall/cyts.apk';
        }else if(t.iPhone||t.iPad){//appstore下载地址，这里没有上线，就放了一个等待页面
            theUrl = 'http://www.test.com/appinstall/ios.html';
        }else if(t.winPhone){//windows phone版下载地址
            theUrl = 'http://www.test.com/appinstall/wait.html';
        }else{//如果是pc端打开，弹出警告
            alert("请用手机浏览器访问。");
        }
        //跳转到对应的url
        location.href = theUrl;

    }

    </script>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        a {
            text-decoration: none;
        }

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

        .weixin-tutor {
            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-tutor p {
            text-align: center;
            margin-top: 0px;
            padding: 0 0 0 5%;
        }
        img {width:100%;height:auto;}
    </style>

</head>
<body>
    <div class="weixin-tutor">
        <p>
            <img src="appinstall/weixin.png" alt="微信打开" />
        </p>
    </div>
</body>
</html>

appinstall/ios.html代码：

<!DOCTYPE HTML>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>苹果版 app 下载地址</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        body{background: url(bg.jpg) no-repeat;}
        .container {
            display: block;
            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;
            text-align: center;

        }
        h1 {font-size:4rem;color:#fff;margin:20rem auto;}
    </style>
</head>
<body>
    <div class="container">
        <h1>ios版即将上线<br />敬请期待...</h1>
    </div>

</body>
</html>

appinstall/wait.html代码：

<!DOCTYPE HTML>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>其他版本 app 等待地址</title>

</head>
<body style="max-width: 800px;">
    <div style="width:100%;text-align: center;margin-top: 20px;">
        <h1>该版本的APP即将上线，敬请期待...</h1>
    </div>

</body>
</html>

appinstall/weixin.png(透明背景的图，有白色的字):
这里写图片描述

appinstall/bg.jpg: 随便找张图当做背景就可以了

总结：以上功能实现了自动跳转，至于物品唯一码，就交给后台处理了，例如：

//获取二维码解析出来字符串，并截取其后21位物品识别码
    $str = I('codestr');//$str='http://www.test.com/qr_identify.html?data=1504252956900FXKL4IC4'
    $tid = substr($str,-21,21);//$tid='1504252956900FXKL4IC4'
    // ...用$tid做其他的处理

武当山道士

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
二维码-下载APP和识别码中信息功能合一

场景：app实现一物一码的防伪功能需求：一个二维码，实现功能 1、如果没安装指定app，扫描二维码后，跳转至app下载页面 |—1.1、如果用微信扫描，提示在浏览器中打开 |—1.2、非微信中打开 |——1.2.1、安卓手机，直接跳转到apk下载地址，自动下载app |——1.2.2、苹果手机，跳转到a
复制链接

扫一扫