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

来源：互联网发布：造价师网络教育编辑：程序博客网时间：2024/04/28 08:46

场景：用指定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做其他的处理

阅读全文

1 0

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

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