做了一個簡單的二維碼通用頁面,
我也只在網上找的代碼,然後優化後,並且修改成 我項目需要用到的結構。
掃碼本來也很簡單。
在哪裏用到掃描,只需要設置跳轉頁面,就可以了,掃描到數據,可以直接返回本頁操作、分離數據。
只需要有setcard_number(res)函數 就可以獲得想要的數據。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<meta name="HandheldFriendly" content="true"/>
<meta name="MobileOptimized" content="320"/>
<title>掃描</title>
<link rel="stylesheet" type="text/css" href="../css/mui.css"/>
<style type="text/css">
#bcid {
width: 100%;
position: absolute;
top: 0px;
bottom: 44px;
text-align: center;
}
.tip {
color: #FFFFFF;
font-weight: bold;
text-shadow: 0px -1px #103E5C;
}
footer {
width: 100%;
height: 44px;
position: absolute;
bottom: 0px;
line-height: 44px;
text-align: center;
color: #FFF;
}
.fbt {
width: 50%;
height: 100%;
background-color: #FFCC33;
float: left;
}
.fbt:active {
-webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.5);
box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.5);
}
</style>
</head>
<body style="background-color: #000000;">
<div id="bcid">
<div style="height:40%"></div>
<p class="tip">...載入中...</p>
</div>
<footer>
<div class="fbt" id="close">取 消</div>
<div class="fbt" id="select" >從相冊選擇二維碼</div>
</footer>
</body>
<script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/mui.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/req.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var scan = null;//掃描對象
mui.init();
window.onload = function(){
mui.init();
mui.plusReady(function () {
//掃描
startRecognize();
});
//監聽取消
g("close").addEventListener("tap",function(e){
mui.back();
})
//監聽相冊選擇
g("select").addEventListener("tap",function(e){
scanPicture();
})
}
function startRecognize(){
try{
var filters;
//自定義的掃描控件樣式
var styles = {frameColor: "#0000FF",scanbarColor: "#0000FF"};
//掃描控件構造
scan = new plus.barcode.Barcode('bcid',filters,styles);
scan.onmarked = onmarked;
scan.onerror = onerror;
scan.start();
}catch(e){
mui.alert("出現錯誤啦:\n"+e);
}
}
function onerror(e){
miu.alert(e);
};
function onmarked( type, result ) {
var text = '';
//獲取父類對象
var ws=plus.webview.currentWebview().opener();
//調用父類函數,只要父類有 這個函數
ws.evalJS("setcard_number('"+ result +"');");
//關閉
mui.back();
};
// 從相冊中選擇二維碼圖片
function scanPicture() {
plus.gallery.pick(function(path){
plus.barcode.scan(path,onmarked,function(error){
plus.nativeUI.alert( "無法識別此圖片" );
});
});
}
</script>
</html>
如果感興趣,也可以關注我的微信公衆號,因爲剛起步,所以只有幾篇文章,之後會慢慢更新。