当前位置: 首页 > article >正文

uniapp小程序监听外接扫描枪

场景:uniapp打包的app在手持设备上使用,手持设备外接扫描枪,快速扫描

关键:扫描枪一般是触发 键盘事件keydown或keyup

无输入框式

import keymap from './keymap'
export default {
	data() {
		return {
			inputString: '',
			inputCache: ''
		}
	},
	mounted() {
	// #ifdef APP-PLUS
	plus.key.addEventListener("keyup", this.keypress);
	// #endif 
	},
	beforeDestroy() {
		// #ifdef APP-PLUS
		plus.key.removeEventListener("keyup", this.keypress);
		// #endif 
	},
	deactivated() {
		// #ifdef APP-PLUS
		plus.key.removeEventListener("keyup", this.keypress);
		// #endif 
	},
	methods: {
		keypress(e) {
			if (e.keyCode === 66 || e.key === 'Enter') { 
				this.inputString = this.inputCache;
				this.onConfirm(this.inputString);
				this.inputCache = '';
			} else {
				this.inputCache +=keymap[e.keyCode] || '';
			}
		}
		onConfirm(code) {
			console.log('拿到的code', code);
			//写你的逻辑
		},
	}
}

keymap.js

export default {
	"7": "0",
	"8": "1",
	"9": "2",
	"10": "3",
	"11": "4",
	"12": "5",
	"13": "6",
	"14": "7",
	"15": "8",
	"16": "9",
	"29": "A",
	"30": "B",
	"31": "C",
	"32": "D",
	"33": "E",
	"34": "F",
	"35": "G",
	"36": "H",
	"37": "I",
	"38": "J",
	"39": "K",
	"40": "L",
	"41": "M",
	"42": "N",
	"43": "O",
	"44": "P",
	"45": "Q",
	"46": "R",
	"47": "S",
	"48": "T",
	"49": "U",
	"50": "V",
	"51": "W",
	"52": "X",
	"53": "Y",
	"54": "Z",
	"55": ",",
	"56": ".",
	"59": "",
	"69": "-",
	"70": "=",
	"81": "+"
}

http://www.kler.cn/news/354425.html

相关文章:

  • 二、PyCharm基本设置
  • 网易博客旧文----Xtreme ToolkitPro 的CommandBarsDesigner编辑生成的界面如何使用
  • RISC-V笔记——显式同步
  • 计算机基础-操作系统(1)
  • Github学生包的JetBrains认证过期/idea认证过期如何解决?
  • 基于SpringBoot+Vue+uniapp的诗词学习系统的详细设计和实现
  • 中阳金融市场中的风险管理与投资优化策略
  • redis高级数据类型之HyperLogLog
  • WPF入门_02依赖属性
  • [原创]在Delphi高效率的使用函数指针, TProc和TFunc类型.
  • 什么开放式耳机最好用?推荐开放式蓝牙耳机榜上耳机!
  • 华为CE交换机telnet登录失败故障的排查方法
  • 【专题】关系数据库标准语言SQL
  • 人工智能需要学习哪些语言?
  • NodeJS火锅店点单系统-计算机毕业设计源码86547
  • Jmeter之GET与POST 请求的参数存放位置
  • 基于SpringBoot+Vue+uniapp的海产品加工销售一体化管理系统的详细设计和实现(源码+lw+部署文档+讲解等)
  • 服务器数据恢复—服务器硬盘指示灯亮黄灯,raid崩溃的数据恢复案例
  • 机器学习-决策树详解
  • 携程线下一面,面试内容: