项目场景:
配合后端管理系统的工单二维码,在手机上快速的查找工单
非h5的扫码功能
可以直接使用uniapp的API uni.scanCode(OBJECT)
// 允许从相机和相册扫码
uni.scanCode({
success: function (res) {
console.log('条码类型:' + res.scanType);
console.log('条码内容:' + res.result);
}
});
h5的扫码功能
用的是vue-qrcode-reader
文档地址
vue2
因为最新版本不支持vue2,只支持vue3
注意只在h5的时候进行引用注册和使用
npm install --save vue-qrcode-reader@2.3.18
<!-- #ifdef H5 -->
<view class="reader-box" v-if="showCode" >
<QrcodeStream @detect="onDetect">
<view class="reader"></view>
</QrcodeStream>
</view>
<!-- #endif -->
// #ifdef H5
import {QrcodeStream} from 'vue-qrcode-reader';
// #endif
components: {
// #ifdef H5
QrcodeStream
// #endif
},
methods: {
onDetect(detectedCodes){
//回调返回一个Promise
detectedCodes.then(res=>{
//res.content就是获取的内容
if (res.content) {
})
}
}
<style>
.reader-box {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 100;
background-color: rgba(0, 0, 0, 0.5);
}
.reader {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 100%;
}
</style>