uni-app实现扫码功能
自己实现uni-app的扫码功能
·
调用uni-app的扫码
// 允许从相机和相册扫码
uni.scanCode({
success: function (res) {
console.log('条码类型:' + res.scanType);
console.log('条码内容:' + res.result);
}
});
// 只允许通过相机扫码
uni.scanCode({
onlyFromCamera: true,
success: function (res) {
console.log('条码类型:' + res.scanType);
console.log('条码内容:' + res.result);
}
});
// 调起条码扫描
uni.scanCode({
scanType: ['barCode'],
success: function (res) {
console.log('条码类型:' + res.scanType);
console.log('条码内容:' + res.result);
}
});
实现
简易实现了扫码功能
scanCode(option) {
let isFlash = false;
// 创建一个空的webview
const webview = plus.webview.open(
'',
'webview', {
top: '0px',
width: '100%',
height: '100%',
backButtonAutoControl: "close",
titleNView: {
backgroundColor: 'rgba(0, 0, 0, 0.5)',
autoBackButton: true,
titleColor: '#ffffff',
titleText: "扫码"
}
})
// 创建barcode
const barcode = plus.barcode.create(
'barcode',
[plus.barcode.QR], // 只扫二维码
{
top: 'auto',
left: 'auto',
width: '100%',
height: '100%',
position: 'static',
scanbarColor: '#f1c01f',
frameColor: '#c0ff01'
}
)
// 创建按钮“闪光灯”
const bFlash = new plus.nativeObj.View('nbutton', {
bottom: '20px',
left: option.onlyFromCamera ? '30%' : '5%',
width: '40%',
height: '44px'
}, [{
tag: 'rect',
id: 'rect',
rectStyles: {
radius: '8px',
color: 'rgba(0,0,0,0.5)'
}
}, {
tag: 'font',
id: 'text',
text: '闪光灯',
textStyles: {
color: '#FFFFFF'
}
}]);
// 创建按钮“相册”
const bAlbum = (!option.onlyFromCamera) && new plus.nativeObj.View('nbutton', {
bottom: '20px',
left: '55%',
width: '40%',
height: '44px'
}, [{
tag: 'rect',
id: 'rect',
rectStyles: {
radius: '8px',
color: 'rgba(0,0,0,0.5)'
}
}, {
tag: 'font',
id: 'text',
text: '相册',
textStyles: {
color: '#FFFFFF'
}
}]);
// 控制闪光灯按钮样式
bFlash.addEventListener('touchend', (e) => {
isFlash = !isFlash;
isFlash && bFlash.drawText("闪光灯", null, {color: "#00ccff"}, 'text')
!isFlash && bFlash.drawText("闪光灯", null, {color: "#ffffff"}, 'text')
barcode?.setFlash(isFlash);
}, false);
// 相册选取图片进行扫码识别
!option.onlyFromCamera && bAlbum.addEventListener('touchend', (e) => {
plus.gallery.pick(
(path) => {
plus.barcode.scan(path, barcode.onmarked, barcode.onerror);
},
barcode.onerror
);
}, false);
// 监听webview关闭,将相关控件都进行关闭
webview.addEventListener("close", () => {
barcode?.close();
bFlashm?.close();
bAlbum?.close();
});
// 扫码的成功回调:关闭webview,并执行success方法
barcode.onmarked = async (type, code, file, charset) => {
webview.close();
await option.success(code);
};
barcode.onerror = async (error) => {
webview.close();
await option.fail(error);
};
// 将相关控件添加至webview中
plus.webview.getWebviewById('webview').append(barcode)
plus.webview.getWebviewById('webview').append(bFlash)
!option.onlyFromCamera && plus.webview.getWebviewById('webview').append(bAlbum)
// start
barcode.start({
vibrate: true
})
}
调用
this.scanCode({
onlyFromCamera: true,
success: async (res) => {
// do somthinig
},
fail(e) {
uni.showToast({
icon: "none",
title: "扫码失败"
})
}
})
更多推荐
已为社区贡献8条内容
所有评论(0)