js 实现二维码 app 扫码下载的功能

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="viewport" content="width=device-width, initial-scale=1" />  
<title>去旅游网app下载</title>
<script type="text/javascript" src="http://cn.taketours.com/js/jquery.js"></script>


<script type="text/javascript">   
var bForcepc = fGetQuery("dv") == "pc";   
function fBrowserRedirect(){  
   
    var sUserAgent = navigator.userAgent.toLowerCase();   
    var bIsIpad = sUserAgent.match(/ipad/i) == "ipad";     
    var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";   
    var bIsMidp = sUserAgent.match(/midp/i) == "midp";   
    var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";   
    var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";   
    var bIsAndroid = sUserAgent.match(/android/i) == "android";   
    var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";   
    var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";   
    if(bIsIpad){   
        var sUrl = location.href;       
        if(!bForcepc){   
            window.location.href = "http://openbox.mobilem.360.cn/index/d/sid/2958433";   
        }   
    }   
    if(bIsIphoneOs){   
        var sUrl = location.href;       
        if(!bForcepc){   
            window.location.href = "https://itunes.apple.com/us/app/qu-lu-you-wang/id971959299?l=zh&ls=1&mt=8";   
        }   
    }
    if(bIsAndroid){
            $("#btn").attr("value", "正在后台下载");
        var sUrl = location.href;       
        if(!bForcepc){   
            window.location.href = "http://openbox.mobilem.360.cn/index/d/sid/2958433";   
        }
    }
       
    if(bIsMidp||bIsUc7||bIsUc||bIsCE||bIsWM){   
        var sUrl = location.href;       
        if(!bForcepc){   
            window.location.href = "https://itunes.apple.com/us/app/qu-lu-you-wang/id971959299?l=zh&ls=1&mt=8";   
        }   
    }   
}   
function fGetQuery(name){//获取参数值   
    var sUrl = window.location.search.substr(1);   
    var r = sUrl.match(new RegExp("(^|&)" + name + "=([^&]*)(&|$)"));   
    return (r == null ? null : unescape(r[2]));   
}   
function fShowVerBlock(){      
    if(bForcepc){   
        document.getElementById("dv_block").style.display = "block";   
    }   
    else{   
        document.getElementById("ad_block").style.display = "block";   
    }   
}   
 
</script>   

</head>
<style type="text/css">
body{ margin:0px; padding:0px; background:#E9F4FF; }
.head{ margin:0px; padding:0px; width:100%; height:40px; background:#2F5DB5;
line-height:40px; vertical-align:middle; text-align:center; font-family:'微软雅黑'; color:#FFFFFF; font-size:16px;}
.container{ margin:0px; padding:0px; width:100%; height:auto; background:#E9F4FF;}
.footer{ margin:10px 0px 0px 0px; padding:0px; }
.info{ margin:0px; padding:0px 10px 0px 10px; height:50px; line-height:50px; vertical-align:middle;font-family:'微软雅黑';
font-size:14px; }
.download{ margin:10px 0px 0px 0px; padding:0px 10px 0px 10px;  height:50px;  }
.btn_download{ width:100%; height:40px; background:#FF8F2B; border:0px; font-family:'微软雅黑';font-size:16px; color:#FFFFFF;}

</style>


<body>
<div class="head">
去旅游网
</div>
<div class="container">
<img src="bg800.png"  width="100%" />
</div>
<div class="footer">
  <div class="info">如果您还没有安装去旅游网客户端,请猛戳:</div>
  <div class="download">
       <input  type="button"  id="btn" name="btn"  class="btn_download" οnclick="fBrowserRedirect();" value="立即下载" />
  </div>
</div>

</body>



</html>

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
根据提供的引用内容,uni-app官网不支持H5扫码功能,但是可以通过引用中的manifest.json配置来实现H5扫码功能。具体步骤如下: 1.在manifest.json文件中添加如下配置: ```json "h5": { "devServer": { "https": true } } ``` 2.在需要使用扫码功能的页面中引入js文件: ```html <script src="https://cdn.bootcdn.net/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script> ``` 3.在页面中添加扫码区域: ```html <div id="qrcode"></div> ``` 4.在页面的script标签中编写生成二维码扫码的逻辑: ```javascript import QRCode from 'qrcodejs2' export default { mounted() { const qrcode = new QRCode('qrcode', { text: 'https://www.example.com', // 二维码内容 width: 256, // 二维码宽度 height: 256, // 二维码高度 colorDark: '#000000', // 二维码颜色 colorLight: '#ffffff', // 二维码背景色 correctLevel: QRCode.CorrectLevel.H // 二维码容错率 }) qrcode._htOption.colorDark = '#000000' // 二维码颜色 qrcode._htOption.colorLight = '#ffffff' // 二维码背景色 const scanner = new Instascan.Scanner({ video: document.getElementById('preview'), mirror: false }) scanner.addListener('scan', function (content) { console.log(content) }) Instascan.Camera.getCameras().then(function (cameras) { if (cameras.length > 0) { scanner.start(cameras[0]) } else { console.error('No cameras found.') } }).catch(function (e) { console.error(e) }) } } ``` 以上代码中,我们使用了qrcodejs2库来生成二维码,使用了Instascan库来实现扫码功能。需要注意的是,Instascan库需要在https环境下才能正常工作。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值