雖然已經做開發好幾年了，但是一直沒有記錄東西的習慣，現在開始多少記錄點吧。
前段時間因項目需求，要在uni-app的掃碼uni.scanCode(OBJECT)，中並沒有自定的參數或者接口，所以自己用H5+搞了個掃碼界面，這裏做一下記錄，就算是一個輪子。
下面開始造輪子。
1，創建一個.vue的頁面文件。因爲我這需求是全屏的掃碼，所以在pages.json 中設置去掉原生導航欄
2,開始在頁面中繪製界面
如圖我們看到有內容，返回箭頭，標題，提示文本信息，掃碼框，打開手電動按鈕等內容，
雖然看上去是有這5部分，但是我們可以認爲是二維碼一層，文字及操作按鈕是一層，
A.二維碼層創建
// 創建二維碼窗口
createBarcode(currentWebview) {
barcode = plus.barcode.create('barcode', [plus.barcode.QR], {
top: '0',
left: '0',
width: '100%',
height: '100%',
scanbarColor: '#1DA7FF',
position: 'static',
frameColor: '#1DA7FF'
});
barcode.onmarked = this.onmarked;
barcode.setFlash(this.flash);
currentWebview.append(barcode);
barcode.start();
}
// 掃碼成功回調
onmarked(type, result) {
var text = '未知: ';
switch (type) {
case plus.barcode.QR:
text = 'QR: ';
break;
case plus.barcode.EAN13:
text = 'EAN13: ';
break;
case plus.barcode.EAN8:
text = 'EAN8: ';
break;
}
plus.navigator.setFullscreen(false);
uni.navigateBack({
delta: 1
});
this.$eventHub.$emit(this.type, {
result: result
});
barcode.close();
}
// 創建操作按鈕及tips
createView(currentWebview) {
// 創建返回原生按鈕
var backVew = new plus.nativeObj.View('backVew', {
top: '0px',
left: '0px',
height: '40px',
width: '100%'
},
[{
tag: 'img',
id: 'backBar',
src: 'static/backBar.png',
position: {
top: '2px',
left: '3px',
width: '35px',
height: '35px'
}
}]);
// 創建打開手電筒的按鈕
var scanBarVew = new plus.nativeObj.View('scanBarVew', {
top: '60%',
left: '40%',
height: '10%',
width: '20%'
},
[{
tag: 'img',
id: 'scanBar',
src: 'static/scanBar.png',
position: {
width: '28%',
left: '36%',
height: '30%'
}
},
{
tag: 'font',
id: 'font',
text: '輕觸照亮',
textStyles: {
size: '10px',
color: '#ffffff'
},
position: {
width: '80%',
left: '10%'
}
}
]);
// 創建展示類內容組件
var content = new plus.nativeObj.View('content', {
top: '0px',
left: '0px',
height: '100%',
width: '100%'
},
[{
tag: 'font',
id: 'scanTitle',
text: '掃碼',
textStyles: {
size: '18px',
color: '#ffffff'
},
position: {
top: '0px',
left: '0px',
width: '100%',
height: '40px'
}
},
{
tag: 'font',
id: 'scanTips',
text: this.name,
textStyles: {
size: '14px',
color: '#ffffff',
whiteSpace: 'normal'
},
position: {
top: '90px',
left: '10%',
width: '80%',
height: 'wrap_content'
}
}
]);
backVew.interceptTouchEvent(true);
scanBarVew.interceptTouchEvent(true);
currentWebview.append(content);
currentWebview.append(scanBarVew);
currentWebview.append(backVew);
backVew.addEventListener("click", function(e) { //返回按鈕
uni.navigateBack({
delta: 1
});
barcode.close();
plus.navigator.setFullscreen(false);
}, false);
var temp = this;
scanBarVew.addEventListener("click", function(e) { //點亮手電筒
temp.flash = !temp.flash;
if (temp.flash) {
scanBarVew.draw([{
tag: 'img',
id: 'scanBar',
src: 'static/yellow-scanBar.png',
position: {
width: '28%',
left: '36%',
height: '30%'
}
},
{
tag: 'font',
id: 'font',
text: '輕觸照亮',
textStyles: {
size: '10px',
color: '#ffffff'
},
position: {
width: '80%',
left: '10%'
}
}
]);
} else {
scanBarVew.draw([{
tag: 'img',
id: 'scanBar',
src: 'static/scanBar.png',
position: {
width: '28%',
left: '36%',
height: '30%'
}
},
{
tag: 'font',
id: 'font',
text: '輕觸照亮',
textStyles: {
size: '10px',
color: '#ffffff'
},
position: {
width: '80%',
left: '10%'
}
}
])
}
if (barcode) {
barcode.setFlash(temp.flash);
}
}, false)
}
將代碼都貼出來看着比較繁瑣，但是覺還是在這裏記錄一下，算是uni-app應用過程的學習筆記