微信小程序自定义扫码功能界面的实现代码
网络编程 2021-07-04 14:06www.168986.cn编程入门
这篇文章主要介绍了微信小程序自定义扫码功能界面的实现代码,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
小程序的一个扫码页面,扫码界面一直开着,同时可以处理其他功能,如下:
由于直接调用微信的scanCode,无法自定义界面,所以只能使用原生组件camera,完成这个功能,关于扫描框的四个角的图片,就自己画一下吧,中间的移动横线,使用了小程序的动画功能,在原生camera组件上,覆盖需要用到cover-view和cover-image,同时加入了提示音
/**scan.wxss**/ .scan-view { width: 100%; height: 100%; display: flex; flex-direction: column; background-color: #B9BEC4; position: fixed; align-items: center; justify-content: space-around; } .scan-border { width: 94%; height: 94%; border: 6rpx solid #08FDFE; border-radius: 10rpx; display: flex; flex-direction: column; align-items: center; } .scan-camera { width: 500rpx; height: 500rpx; border-radius: 6rpx; margin: 30rpx; } .cover-corner { width: 80rpx; height: 80rpx; position: absolute; } .cover-left- { left: 0; : 0; } .cover-right- { right: 0; : 0; } .cover-left-bottom { left: 0; bottom: 0; } .cover-right-bottom { right: 0; bottom: 0; } .scan-animation { position: absolute; : -10rpx; left: 10rpx; width: 480rpx; height: 8rpx; background-color: #08FDFE; border-radius: 50%; }
<!--scan.wxml--> <view class="scan-view"> <view class='scan-border'> <camera class='scan-camera' mode="scanCode" binderror="cameraError" bindscancode='scancode' frame-size='large'> <cover-image class='cover-corner cover-left-' src='/images/left-.png'></cover-image> <cover-image class='cover-corner cover-right-' src='/images/right-.png'></cover-image> <cover-image class='cover-corner cover-left-bottom' src='/images/left-bottom.png'></cover-image> <cover-image class='cover-corner cover-right-bottom' src='/images/right-bottom.png'></cover-image> <cover-view class='scan-animation' animation="{{animation}}"></cover-view> </camera> <!-- 这里可以处理其他内容 --> </view> </view>
// scan.js // 移动动画 let animation = wx.createAnimation({}); // 提示音 let innerAudioContext = wx.createInnerAudioContext() innerAudioContext.src = '/images/beep.mp3' Page({ data: { }, onLoad: function () { }, onShow(){ this.donghua() }, donghua(){ var that = this; // 控制向上还是向下移动 let m = true setInterval(function () { if (m) { animation.translateY(250).step({ duration: 3000 }) m = !m; } else { animation.translateY(-10).step({ duration: 3000 }) m = !m; } that.setData({ animation: animation.export() }) }.bind(this), 3000) }, scancode(e){ // 提示音 innerAudioContext.play() // 校验扫描结果,并处理 let res = e.detail.result } })
总结
到此这篇关于微信小程序自定义扫码功能界面的实现代码的文章就介绍到这了,更多相关微信小程序自定义扫码内容请搜索狼蚁SEO以前的文章或继续浏览狼蚁网站SEO优化的相关文章希望大家以后多多支持狼蚁SEO!
上一篇:JS异步宏队列与微队列原理区别详解
下一篇:JS字符串和数组如何实现相互转化
编程语言
- 机械手焊接机器人编程 机械手焊接设备编程
- vb数据库编程实例,vb做数据库
- tiobe世界编程语言排行榜,全球编程语言排行
- 成都java编程培训 成都it编程培训中心
- 编程基础培训,编程基础知识培训
- flash游戏编程基础教程,flash游戏开发教程
- 不会英语能学编程吗 不会英语可以学程序员吗
- 爱心代码编程C语言 爱心代码编程c语言公式
- c语言编程学习入门 c语言编程快速入门
- 西门子plc编程培训 西门子plc编程培训班
- 哪里可以学编程 台州哪里可以学编程
- 少儿编程哪个好 少儿编程哪个品牌好
- 编程是什么意思,图形编程是什么意思
- c语言编程软件下载,c语言编程软件在哪下载
- java编程软件下载,java编程下载手机版
- ug编程培训学校,ug编程培训教程