今天接到一个和扫码枪有关的任务，听起来就很有意思。
项目背景：列表页进入详情页的方式目前有两种
- 直接点击列表进入
- 搜索出具体列表项，再点击进入
- 新接入的需求（扫码枪扫码进入）这是第三种进入详情页的方式哦
要求：使用扫码枪扫描二维码或条形码，获取到流程id，通过该id拼接url，跳转到详情页
是不是有人和我一样，听到扫码枪的一瞬间是懵逼的，扫码...枪...是what？
扫码枪.png
对，就是这个玩意，是不是联想到了超市收营员....我今天就滴滴滴扫了好久，当了一天收营员呢，哈哈哈
原理：扫码枪的原理，其实google一下很多人都有讲，我大概copy这么几句吧。
- 条码扫描器其实就是一种输入设备，跟键盘一样。在控制台打印扫描过程，可以看出，扫描过程就像是在键盘上敲击相应的键，keycode和键盘是一一对应的。
- 所以监听键盘输入，就能获取到码。
- 扫码枪会把扫到的码自动填充到光标所在位置
测试用到的扫码器最后会输入回车（也就是keyCode === 13），所以我根据13判断是否输入完毕（值得注意的是：不一定所有扫描器都有回车。多数扫码器有 跳线 或 开关 设定是否加回车）
实现
- 网络上的方式
// 扫码枪用到的变量
code = ''
lastTime = ''
nextTime = ''
lastCode = ''
nextCode = ''
componentDidMount(){
window.addEventListener('keypress', this.scanWrapper, false);
}
// 不要忘记销毁事件
componentWillUnmount() {
window.removeEventListener('keypress', this.scanWrapper, false);
}
scanWrapper = (e) => {
// e.which拿到的是keyCode
this.nextCode = e.which;
this.nextTime = new Date().getTime();
if (this.lastCode != null && this.lastTime != null && this.nextTime - this.lastTime <= 30) {
this.code += String.fromCharCode(lastCode);
} else if (this.lastCode != null && this..lastTime != null && this.nextTime - this.lastTime > 100) {
this.code = '';
}
this.lastCode = this.nextCode;
this.lastTime = this.nextTime;
if (e.which === 13) {
console.log('code', this.code);
this.code = '';
}
}
- 我的实现方式
class ScanQrcode extends React.PureComponent {
componentDidMount() {
// 自动获取输入框的焦点，扫码枪扫码后才能把数字填充进来
this.inputObj.focus()
window.addEventListener('keypress', this.scanWrapper, false)
document.addEventListener('visibilitychange', this.handleVisibilityChange, false)
}
componentWillUnmount() {
window.removeEventListener('keypress', this.scanWrapper, false)
document.addEventListener('visibilitychange', this.handleVisibilityChange, false)
}
handleVisibilityChange = () => {
if (!document.hidden) {
this.inputObj.focus()
}
}
scanWrapper = (e) => {
// code = 13 表示按下了enter键，也就是扫码枪扫码结束
if (e.which === 13) {
const processId = this.inputObj.value
processId && this.gotoDetail(processId)
}
}
onChange = () => {
this.processId = this.inputObj.value
}
/**
* 跳转到详情页
*/
gotoDetail = () => {
const baseUrl = '/xxx/xxxx/xxx'
const { processId } = this.processId
openDetailPage(baseUrl + processId) // 拼接跳转链接
this.inputObj.value = ''
}
render () {
return (
<div>
<input type="text"
placeholder="使用扫描枪扫描二维码或条形码可自动打开条码对应的流程"
ref={(processId) => { this.inputObj = processId }}
onChange={this.onChange} ref={(processId) => { this.processId = processId }}
/>
</div>
)
}
}
同样是监听键盘事件，但是这里，通过focus()方法强制获取input焦点
componentDidMount() {
// 自动获取输入框的焦点，扫码枪扫码后才能把数字填充进来
this.inputObj.focus()
window.addEventListener('keypress', this.scanWrapper, false)
document.addEventListener('visibilitychange', this.handleVisibilityChange, false)
}
上面我们说过：扫码枪会把扫到的码自动填充到光标所在位置
所以，通过input框的onChange事件获取input框的值，也就获取到了条码
onChange = () => {
this.processId = this.inputObj.value
}
<div>
<input type="text"
placeholder="使用扫描枪扫描二维码或条形码可自动打开条码对应的流程"
ref={(processId) => { this.inputObj = processId }}
onChange={this.onChange} ref={(processId) => { this.processId = processId }}
/>
</div>
接着通过监听键盘事件函数，判断是否已经输入完毕（keyCode === 13），输入完毕了之后，再去跳转详情页
scanWrapper = (e) => {
// code = 13 表示按下了enter键，也就是扫码枪扫码结束
if (e.which === 13) {
const processId = this.inputObj.value
processId && this.gotoDetail(processId)
}
}
总结：
- 觉得自己的方式看起来更容易理解一些
- 但有一个弊端：如果扫码枪没有回车事件的话，该怎么判断是否输入完毕？？
网友评论