uniapp WeChat applet: scan code
QR code for testing
1. uni.scanCode one code at a time
Create a demo project
- HBuilderX creates a new project and uses the default template directly
- Add a [Scan code] button and bind the click event.
- Use to
uni.scanCodecall up the code scanning interface of the client, and the corresponding result will be returned after the code scanning is successful.
| interface | demo |
|---|---|
 |
scanCode mode scan code of camera |
<template>
<view class="content">
<image class="logo" src="/static/logo.png"></image>
<view class="text-area">
<text class="title">{
{title}}</text>
</view>
<view>
<button @click="scanCodeHandler">开始扫码</button>
</view>
</view>
</template>
<script>
export default {
data() {
return {
title: '调用 uni.scanCode 实现扫码'
}
},
onLoad() {
},
methods: {
// 扫码按钮点击回调
scanCodeHandler(){
let that = this;
// 调起条码扫描
uni.scanCode({
onlyFromCamera: true, // 是否只能从相机扫码，不允许从相册选择图片
scanType: ['qrCode'], // 扫码类型 qrCode二维码
autoZoom: false, // 是否启用自动放大，默认启用
success: function (res) {
console.log(`扫码结果：${
JSON.stringify(res,null,2)}`);
that.parseQRCode(res);
},
fail: function (err) {
console.log(`错误：${
err}`);
},
complete: function (data) {
console.log('擦屁股！');
}
});
},
// 解析二维码，处理业务
parseQRCode(data){
uni.vibrateShort(); // 震动提示
uni.showToast({
title: data.result}) // 弹出提示
}
}
}
</script>
<style>
/* 样式部分没动 */
</style>
Demonstration of scanning results
Scan code result:
{
"charSet": "utf-8",
"scanType": "QR_CODE",
"errMsg": "scanCode:ok",
"result": "大家好，我是笨笨，笨笨的笨，笨笨的笨，谢谢！",
"codeVersion": 8,
"rawData": "5aSn5a625aW977yM5oiR5piv56yo56yo77yM56yo56yo55qE56yo77yM56yo56yo55qE56yo77yM6LCi6LCi77yB"
}
2. The mode of the camera = "scanCode" continuous scanning code
Create demos
- HBuilderX creates a new project and uses the default template directly
- Add a camera component and adjust it as follows.
2.1.mode="scanCode"Set the camera mode to扫码.
2.2.@scancode="scancodeEventHandle"Scan code successful callbackscancodeEventHandlemethod.
2.3. For other parameters, please refer to the documentation without repeating details. - Add another view to implement a green mark point through the style.
3.1.:styleRealize dynamic modification of the marker position through .
3.2. Median value of scan code responsetarget.scanAreaMeaning:[ left，top，width，height ]unitpx.
Note : The official said that the unit isrpx, I have been transferred for two days, but I still can't get it right.
| interface | demo |
|---|---|
 |
uni.scanCode scan code |
<template>
<view>
<camera device-position="back" flash="off" mode="scanCode" @scancode="scancodeEventHandle" @error="error" >
<view class="mark" v-show="isShowMark" :style="{ left: obj.l + 'px', top: obj.t +'px' }" ></view>
</camera>
</view>
</template>
<script>
export default {
data() {
return {
lockSet: {
},
obj: {
l: 0, t: 0 },
isShowMark: false
}
},
onLoad(option){
this.obj = {
"l": 0,"t": 0}
},
methods: {
scancodeEventHandle(res){
let rawData = res.target.rawData;
if(Object.hasOwn(this.lockSet, rawData) === false){
this.lockSet[rawData] = true;
console.log(`扫码响应结果：${
JSON.stringify(res)}`);
this.isShowMark = false; // 开始前先隐藏上一次显示的标记点
let result = res.target.result
// 震动提示
uni.vibrateShort({
success: () => uni.showToast({
title: result}) // 弹出提示
});
// 标记位置
this.markQrCode(res.target);
// 同一个码间隔几秒才会再次处理
setTimeout(that => delete that.lockSet[rawData], 3000, this);
}
},
markQrCode(target){
// [左上角x坐标，左上角y坐标，width，height] 单位px
let [left, top, width, height] = target.scanArea;
let markWH = uni.upx2px(64) / 2; // mark是边长64rpx的方形，要转成 px
// 算出显示标记的位置
this.obj = {
"l": left + width/2 - markWH, "t": top + height/2 - markWH };
// 显示标记点
this.isShowMark = true;
// 无任何外力情况下，5秒后也会消失
setTimeout(that => that.isShowMark = false, 5000, this);
},
error(err){
console.log(`报错：${
JSON.stringify(err)}`);
debugger;
}
}
}
</script>
<style>
camera {
margin: 50rpx auto;
width: 500rpx;
height: 500rpx;
}
.mark{
position: absolute;
width: 64rpx;
height: 64rpx;
background-color: #00ff00;
border: 5px solid #f8ffeb;
border-radius: 50%;
}
</style>
Scan code response result
{
"type": "scancode",
"target": {
"dataset": {
"eventOpts": [["scancode",[["scancodeEventHandle",["$event"]]]],["error",[["error",["$event"]]]]]
},
"id": "",
"offsetTop": 26,
"offsetLeft": 66,
"type": "qrcode",
"result": "大家好，我是笨笨，笨笨的笨，笨笨的笨，谢谢！",
"rawData": "5aSn5a625aW977yM5oiR5piv56yo56yo77yM56yo56yo55qE56yo77yM56yo56yo55qE56yo77yM6LCi6LCi77yB",
"charSet": "utf-8",
"scanArea": [68.094444,105.23687,84.844955,81.93183]
},
"currentTarget": {
"dataset": {
"eventOpts": [["scancode",[["scancodeEventHandle",["$event"]]]],["error",[["error",["$event"]]]]]
},
"id": "",
"offsetTop": 26,
"offsetLeft": 66
},
"timeStamp": 97727,
"detail": {
"type": "qrcode",
"result": "大家好，我是笨笨，笨笨的笨，笨笨的笨，谢谢！",
"rawData": "5aSn5a625aW977yM5oiR5piv56yo56yo77yM56yo56yo55qE56yo77yM56yo56yo55qE56yo77yM6LCi6LCi77yB",
"charSet": "utf-8",
"scanArea": [68.094444,105.23687,84.844955,81.93183]
},
"mp": '都是上面内容的重复，略...'
}