html5微信扫码功能代码示例
时间 :
2022-10-13
编辑 :超级管理员
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
<title></title>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/jquery.qrcode.min.js"></script>
<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<style>
body{/*text-align:center*/}
.container{
margin: 0 auto;
padding: 25px 0 0 0 ;
position: relative;
}
#scanBtn{
display: inline-block;
width: 60px;
height: 60px;
top: 23px;
/*margin-left: 15px;*/
position:absolute;
background-image: url(img/aaronS.png) ;
background-size:50% 50% ;
background-repeat:no-repeat ;
background-position-x:center ;
background-position-y:center ;
}
#DeliveryID
{
width:200px;
height:40px;
border-radius:10px;
padding-left: 10px;
font-size: 1rem;
vertical-align: middle;
}
.coders{
text-align:center;
}
#CodeBut
{
-webkit-appearance:none;
margin-top: 40px;
height: 60px;
width: 300px;
color:white;
border-width: 0;
background-color: rgba(234,85,4,1);
font-size: 2rem;
border-radius:10px;
}
#CodeImg{
text-align:center;
margin-top: 150px;
}
#name{
-webkit-appearance:none;
width:100px;
height:60px;
color:white;
background-color: rgba(234,85,4,1);
-webkit-background-color: rgba(234,85,4,1);
border-width: 0;
border-radius:10px;
font-size:20px;
vertical-align: middle;
}
canvas{
display: none;
}
input {
width: 80%;
border: 1px solid #ccc;
padding: 11px 15px;
border-radius: 3px;
padding-left: 5px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
-webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
-o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s
}
input:focus {
border-color: #66afe9;
outline: 0;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6)
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
appearance: none;
margin: 0;
}
</style>
<script type="text/javascript">
$(document).ready(function () {
if (location.href.indexOf("qrresult=")>-1){
var listContent = location.href.split("qrresult=")[1]; //获取扫中以后的内容
var listContents = listContent.slice(9); //由于生成的字符串前9位是没用，直截取有用的数字内容
$("#DeliveryID").val(listContents);
}
});
</script>
</head>
<body>
<div>
<div class="container">
<input id="DeliveryID" type="number" placeholder="请输入交货单号" name="" value="" />
<div id="scanBtn"></div>
<!--对，就是下面这一句，大佬提供的，且必须要a标签-->
<a id="scanBtn" href="http://xxx.com/w/api/saoyisao?redirect_uri=你使用扫一扫当前页面的服务器地址，https开头的"></a>
</div>
</body>
</html>