html5微信掃碼功能代碼示例
<!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>如果您的問題還未解決可以聯系站長付費協助。
有問題可以加入技術QQ群一起交流學習
本站vip會員 請加入無憂模板網 VIP群（50604020） PS:加入時備注用戶名或昵稱
普通注冊會員或訪客 請加入無憂模板網 技術交流群（50604130）
客服微信號：15898888535
聲明：本站所有文章資源內容，如無特殊說明或標注，均為采集網絡資源。如若內容侵犯了原著者的合法權益，可聯系站長刪除。
