uniapp中应用H5自定义二维码扫码界面
uniapp中应用H5自定义二维码扫码界面最终效果pages配置组件代码最终效果pages配置{"path": "components/barcode/scan-page","style": {"navigationBarTitleText": "扫一扫"}}组件代码<template><view><!-- 扫码页面 --><!-- #ifndef APP
·
最终效果
pages配置
{
"path": "components/barcode/scan-page",
"style": {
"navigationBarTitleText": "扫一扫"
}
}
组件代码
<template>
<view>
<!-- 扫码页面 -->
<!-- #ifndef APP-PLUS -->
<view class="wrap">
<view class="u-tips-color">
请在app中打开
</view>
</view>
<!-- #endif -->
</view>
</template>
<script>
export default {
data() {
return {
barcode: null,
flash: false,
tip: '将二维码放入框中,即可自动扫描',
}
},
onShow() {
// 页面展示时,重新启动扫描检测
if (this.barcode) {
this.barcode.start()
}
},
onLoad(params) {
const {
tip
} = params
if (tip) {
this.tip = tip
}
// #ifdef APP-PLUS
plus.navigator.setFullscreen(true); //全屏
let currentWebview = this.$scope.$getAppWebview();
this.createBarcode(currentWebview)
this.createTipInfoView(currentWebview)
this.createFlashBarView(currentWebview)
// #endif
},
mounted() {
},
methods: {
/**
* 创建二维码
* @param {Object} currentWebview
*/
createBarcode(currentWebview) {
if (!this.barcode) {
this.barcode = plus.barcode.create('barcode', [plus.barcode.QR], {
top: `0px`,
left: '0px',
height: `100%`,
width: '100%',
position: 'absolute',
background: '#FFCC00',
frameColor: '#FFCC33',
scanbarColor: '#FFCC33',
});
this.barcode.onmarked = this.onmarked;
this.barcode.setFlash(this.flash);
//此处未演示扫码成功回调的地址设置,实际请参考HTML5Plus API自行处理
//注意扫码区域需为正方形,否则影响扫码识别率
currentWebview.append(this.barcode);
}
this.barcode.start()
},
/**
* 创建提示信息
* @param {Object} currentWebview
*/
createTipInfoView(currentWebview) {
const content = new plus.nativeObj.View('content', {
top: '0px',
left: '0px',
height: '100%',
width: '100%'
},
[{
tag: 'font',
id: 'scanTips',
text: this.tip,
textStyles: {
size: '14px',
color: '#ffffff',
whiteSpace: 'normal'
},
position: {
top: '90px',
left: '10%',
width: '80%',
height: 'wrap_content'
}
}]);
currentWebview.append(content);
},
// 创建 开关灯按钮
createFlashBarView(currentWebview) {
const openImg = this.crtFlashImg('static/yellow-scanBar.png')
const closeImg = this.crtFlashImg('static/scanBar.png')
const scanBarVew = new plus.nativeObj.View('scanBarVew', {
top: '65%',
left: '40%',
height: '10%',
width: '20%',
},
closeImg);
scanBarVew.interceptTouchEvent(true);
currentWebview.append(scanBarVew);
scanBarVew.addEventListener("click", (e) => { //点亮手电筒
this.flash = !this.flash;
if (this.flash) {
scanBarVew.draw(openImg);
} else {
scanBarVew.draw(closeImg)
}
if (this.barcode) {
this.barcode.setFlash(this.flash);
}
}, false)
},
crtFlashImg(imgsrc) {
return [{
tag: 'img',
id: 'scanBar',
src: imgsrc,
position: {
width: '28%',
left: '36%',
height: '30%'
}
}, {
tag: 'font',
id: 'font',
text: '轻触照亮',
textStyles: {
size: '10px',
color: '#ffffff'
},
position: {
width: '80%',
left: '10%'
}
}]
},
// 扫码成功回调
onmarked(type, result) {
console.log('条码类型:' + type);
console.log('条码内容:' + result);
// 业务代码
// 核对扫描结果
// 判断是否是正确的格式
// 不正确则跳转到 错误页面
}
}
}
</script>
<style scoped>
.wrap {
height: calc(100vh);
/* #ifdef H5 */
height: calc(100vh - var(--window-top));
/* #endif */
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
</style>
参考资料
h5 barcode
更多推荐
已为社区贡献1条内容
所有评论(0)