1. 程式人生 > >APIcoud 手機二維碼or條碼 生成與掃描模組

APIcoud 手機二維碼or條碼 生成與掃描模組

剛接觸APIcoud 的時候覺得很多模組真的好難,初次接觸二維碼的時候覺得,生成二維碼真的很費勁呢,其實不然,是真的很難,但是APIcoud 已經封裝好生成和掃描二維碼的模組,

我們只需要呼叫就可以愉快的使用二維碼了。

官方文件裡面的使用方法裡面,難免有些不易懂,本文教你如何愉快的開發二維碼模組。

廢話不多說!上程式碼

 

 

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
<title>端API</title>
<link rel="stylesheet" type="text/css" href="../css/api.css" />
<link rel="stylesheet" type="text/css" href="../css/style.css" />
<style>
.empty {
text-align: center;
padding: 120px 0;
}

button {
background-color: #4682B4;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
border-radius: 6px; //圓角設定
}

body {
text-align: center;
margin-top: 10%
}
</style>
</head>

<body>
<div class="empty">端API</div>
<button type="button" name="button" onclick="dan()">單擊開啟二維碼掃描器</button>
<button type="button" name="button" onclick="add()">生成引數二維碼</button>
</body>

</html>
<!DOCTYPE html>
<script type="text/javascript">
var FNScanner=null;//全域性變數
apiready = function() {
FNScanner = api.require('FNScanner'); //使用二維碼模組
api.addEventListener({name: 'resume'}, function(ret, err) {FNScanner.onResume();
// alert('應用回到前臺');
//通知當前本模組app進入回到前臺。此時模組會進行一些資源的恢復操作,防止照相機回來之後黑屏
});
api.addEventListener({ name: 'pause'}, function(ret, err) {FNScanner.onPause();
// alert('應用進入後臺');
//通知當前本模組app進入後臺。此時模組會進行一些資源的暫停儲存操作,防止照相機回來之後黑屏
});
};
function dan() {
open(); //開啟系統二維碼掃描模組
}
function open() {
FNScanner.open({
sound: 'widget://image/MP3/5383.wav',
//掃描後二維碼聲音
autorotation: true , //是否自動旋轉
// saveToAlbum:true, //是否把掃描的二維碼儲存到相簿
hintText: '請對準二維碼', //底部提示文字 預設值:'對準條形碼/二維碼,即可自動掃描'
}, function(ret, err) {
if (ret) {
if (ret.eventType == "success") {
var i = JSON.stringify(ret.content);
alert(i)
}
} else {
alert(JSON.stringify(err));
}
});
}
//生成二維碼
function add() {
FNScanner.encodeImg({
// //取值範圍
// bar_image(生成條形碼圖片)
// qr_image(生成二維碼圖片)
type: 'bar_image',
content: 12, //所要生成的二維碼/條形碼字串,當 type 為 bar_image 時,該值只能為數字字串
saveToAlbum: true, //(可選項)掃描的二維碼/條形碼圖片是否自動儲存到相簿
}, function(ret, err) {
if (ret) {
if (ret.status) {
alert("生成成功、地址為:" + JSON.stringify(ret.albumPath))
}
} else {
alert(JSON.stringify(err))
}

})
}
</script>

<html>