uniapp 微信小程序：扫码_uniapp 小程序扫码

测试用二维码

1. uni.scanCode 一次一码

创建Demo项目

1. HBuilderX 创建一个新项目，直接用默认模板
2. 添加一个【扫码】按钮，绑上点击事件。
3. 使用uni.scanCode 调起客户端扫码界面，扫码成功后返回对应的结果。

<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

扫码结果演示

扫码结果：

{
  "charSet": "utf-8",
  "scanType": "QR_CODE",
  "errMsg": "scanCode:ok",
  "result": "大家好，我是笨笨，笨笨的笨，笨笨的笨，谢谢！",
  "codeVersion": 8,
  "rawData": "5aSn5a625aW977yM5oiR5piv56yo56yo77yM56yo56yo55qE56yo77yM56yo56yo55qE56yo77yM6LCi6LCi77yB"
}
1
2
3
4
5
6
7
8

2. camera 之 mode=“scanCode” 连续扫码

创建 Demo

1. HBuilderX 创建一个新项目，直接用默认模板
2. 添加一个 camera 组件，如下调整。
   2.1. mode="scanCode" 将摄像机模式设为扫码。
   2.2. @scancode="scancodeEventHandle" 扫码成功回调scancodeEventHandle 方法。
   2.3. 其它参数不赘述看文档即可。
3. 再添加一个 view 通过样式实现一个绿色标记点。
   3.1. 通过 :style 实现动态 修改标记点位置 。
   3.2. 扫码响应中target.scanArea 值含义：[ left，top，width，height ]单位px。
   注意：官方有说单位是 rpx，我调了两天，一直对不上。

<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75

扫码响应结果

{
  "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": '都是上面内容的重复，略...'
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

参考资料

• uniapp
  uniapp：uni.scanCode(OBJECT)
  uniapp：camera

• 微信原生
  wx.scanCode(Object object)
  微信小程序-媒体组件：camera