uniapp 微信小程序：扫码-Toy模板网

这篇具有很好参考价值的文章主要介绍了uniapp 微信小程序：扫码。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

测试用二维码

uniapp 小程序扫码,# uni-app,WeChat微信,uni-app,微信小程序,扫码,二维码,qrCode

1. uni.scanCode 一次一码

创建Demo项目

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

界面	演示
	camera 之 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>

扫码结果演示

扫码结果：

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

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

创建 Demo

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

界面	演示
	uni.scanCode 扫码

<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>

扫码响应结果

{
  "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": '都是上面内容的重复，略...'
}

参考资料

uniapp
uniapp：uni.scanCode(OBJECT)
uniapp：camera
微信原生
wx.scanCode(Object object)
微信小程序-媒体组件：camera文章来源地址https://www.toymoban.com/news/detail-714733.html

到了这里，关于uniapp 微信小程序：扫码的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！