微信小程序实现连续扫码功能(uniapp)
注:本文使用的是 uniapp 语法。
微信小程序提供了扫码API:wx.scanCode,但它只能扫一次码,想要实现连续扫码,需要借用 camera 组件。camera 组件不仅能拍照,还具有扫码功能,只要将它的 mode 属性设置为 scanCode,就会在扫码识别成功时触发 bindscancode 事件(在 uniapp 中是 scancode 事件)。
<camera mode="scanCode" device-position="back" flash="off" @scancode="takeCode"></camera>
在 takeCode 函数里对扫码结果进行处理:
takeCode: (e) => {
if(scanFunctionIsUseable) {
this.scanFunctionIsuseable = false;
// 对扫码结果进行处理
console.log(e.detail.result);
// 扫码间隔两秒
setTimeout(() => {
this.scanFunctionIsUseable = true;
}, 2000)
}
}
需要注意的是,摄像头对着码时,会重复扫描多次,这显然不是我们想要的。为了避免这种情况,可以增加一个 scanFunctionIsUseable 标志位,在扫码成功时令它为 false,隔两秒令它为 true,这样就可以隔两秒再去处理扫码结果。
参考:https://blog.csdn.net/du771278794/article/details/86219165
微信小程序实现连续扫码功能(uniapp)的更多相关文章
- 微信小程序一键生成源码 在线制作定制功能强大的微信小程序
微信小程序发展到现在,短短的一年不到的时间(很快就要迎来微信小程序周年庆),在快迎来周年庆之际,百牛信息技术bainiu.ltd特记录一下这个发展的历程,用于将来见证小程序发展的辉煌时刻,我们还能知道 ...
- 从微信小程序开发者工具源码看实现原理(一)- - 小程序架构设计
使用微信小程序开发已经很长时间了,对小程序开发已经相当熟练了:但是作为一名对技术有追求的前端开发,仅仅熟练掌握小程序的开发感觉还是不够的,我们应该更进一步的去理解其背后实现的原理以及对应的考量,这可能 ...
- 记录使用微信小程序的NFC和蓝牙功能读取15693芯片的开发历程
开发目标: (1) 对于Android手机,直接通过微信小程序调用手机的NFC功能,对15693协议的芯片进行读写操作: (2)对于苹果手机(及没有NFC模块的手机),通过微信小程序的蓝牙功能连接到蓝 ...
- 基于微信小程序的用户列表点赞功能
代码地址如下:http://www.demodashi.com/demo/13997.html 一.前言 (1).适合人群 1.微信小程序开发者 2.前端工程师 3.想入门学习小程序开发的人员 4.想 ...
- 从微信小程序开发者工具源码看实现原理(四)- - 自适应布局
从前面从微信小程序开发者工具源码看实现原理(一)- - 小程序架构设计可以知道,小程序大部分是通过web技术进行渲染的,也就是最终通过浏览器的dom tree + cssom来生成渲染树:既然最终是通 ...
- 微信小程序开发抖音去水印功能
之前找了很多抖音去水印的工具全是广告,所以索性自己写了一个,提供给大家免费试用以下是微信小程序的二维码 使用教程: 1.打开微信搜索小程序:沸点软件技术服务 2.打开沸点软件技术服务小程序 3.去抖音 ...
- Mockplus微信小程序上线!扫一扫轻松查看原型!
Mockplus团队发布了Mockplus微信小程序. 从现在起,你无需下载Mockplus移动端,用微信扫一扫二维码,即可在微信中打开并查看原型.Mockplus微信小程序,无需安装.卸载,不占用手 ...
- 又是新动作!微信小程序专属二维码出炉
又到了晚上,微信又给我们带来了惊喜,并这次不是新的能力,而是把大家再熟悉不过的二维码换了新的造型. 正式揭晓:微信特制的小程序码.扫一扫新二维码 只要你的微信升级到了 6.5.7 版本,就可以扫码或者 ...
- 微信小程序之换肤的功能
pc或者移动端实现换肤功能还是比较简单的,大致就是需要换肤的css,还有正常的css:把当前皮肤类型存入本地:然后通过js读取并判断当前应该加载哪套css. 由于微信小程序没有操作wxss的api,所 ...
随机推荐
- 8.2 Go 锁
8.2 Go 锁 案例(坑):多个goroutine操作同一个map. go提供了一种叫map的数据结构,可以翻译成映射,对应于其他语言的字典.哈希表.借助map,可以定义一个键和值,然后可以从map ...
- 《机器学习_07_03_svm_核函数与非线性支持向量机》
一.简介 前两节分别实现了硬间隔支持向量机与软间隔支持向量机,它们本质上都是线性分类器,只是软间隔对"异常点"更加宽容,它们对形如如下的螺旋数据都没法进行良好分类,因为没法找到一个 ...
- XXX_ProductCRUD的项目结构与配置文件
MVC_ProductCRUD Hibernate_ProductCRUD 项目结构 ...
- 初识Mysql 外键
1.创建学生表(主表) CREATE TABLE `stu` ( `stunum` int(10) NOT NULL AUTO_INCREMENT, `name` varchar(255) NOT N ...
- MySQL的CHAR 和 VARCHAR的区别
CHAR 和 VARCHAR 类型,CHAR 列的长度固定, VARCHAR 列中的值为可变长字符串.在检索的时候,CHAR 列删除了尾部的空格,而 VARCHAR 则保留这些空格s
- SpringMVC入门总结
一.SpringMVC的好处? 1,基于注解,stuts2虽然也有注解但是比较慢,没人用更多的时候是用xml的形式 2,能与spring其它技术整合比如说webflow等, 3,获取request及s ...
- Java工作流引擎的测试容器-功能-使用方法-注意事项
工作流引擎的测试容器-功能-使用方法-注意事项 关键字 Ccbpm, ccflow,jflow,工作流引擎,工作流引擎测试容器,表单引擎 功能说明 工作流的测试容器是为了解决手工模拟人工登录模式下测试 ...
- vue中使用剪切板插件 clipboard.js
vue中使用剪切板需要借助一个插件,clipboard,使用方法还是很简单的,先下载,然后引入: npm i clipboard -S //引入 import Clipboard from 'clip ...
- MySQL所有的安装部署方式
目录 一.前言 二.关于MySQL的安装 三.部署规划 3.1 服务器规划 3.2 数据库目录规划 四.准备工具 五.通用二进制包安装MySQL 5.1 上传MySQL通用二进制安装包到node7的/ ...
- 基于 kubeadm 搭建高可用的kubernetes 1.18.2 (k8s)集群 三 集群可用性测试
1. 创建nginx ds # 写入配置 $ cat > nginx-ds.yml <<EOF apiVersion: v1 kind: Service metadata: name ...