小程序的一个扫码页面,扫码界面一直开着,同时可以处理其他功能,如下:
由于直接调用微信的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-top { left: 0; top: 0; } .cover-right-top { right: 0; top: 0; } .cover-left-bottom { left: 0; bottom: 0; } .cover-right-bottom { right: 0; bottom: 0; } .scan-animation { position: absolute; top: -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-top' src='/images/left-top.png'></cover-image> <cover-image class='cover-corner cover-right-top' src='/images/right-top.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 } })
总结
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
暂无评论...
更新日志
2024年11月25日
2024年11月25日
- 凤飞飞《我们的主题曲》飞跃制作[正版原抓WAV+CUE]
- 刘嘉亮《亮情歌2》[WAV+CUE][1G]
- 红馆40·谭咏麟《歌者恋歌浓情30年演唱会》3CD[低速原抓WAV+CUE][1.8G]
- 刘纬武《睡眠宝宝竖琴童谣 吉卜力工作室 白噪音安抚》[320K/MP3][193.25MB]
- 【轻音乐】曼托凡尼乐团《精选辑》2CD.1998[FLAC+CUE整轨]
- 邝美云《心中有爱》1989年香港DMIJP版1MTO东芝首版[WAV+CUE]
- 群星《情叹-发烧女声DSD》天籁女声发烧碟[WAV+CUE]
- 刘纬武《睡眠宝宝竖琴童谣 吉卜力工作室 白噪音安抚》[FLAC/分轨][748.03MB]
- 理想混蛋《Origin Sessions》[320K/MP3][37.47MB]
- 公馆青少年《我其实一点都不酷》[320K/MP3][78.78MB]
- 群星《情叹-发烧男声DSD》最值得珍藏的完美男声[WAV+CUE]
- 群星《国韵飘香·贵妃醉酒HQCD黑胶王》2CD[WAV]
- 卫兰《DAUGHTER》【低速原抓WAV+CUE】
- 公馆青少年《我其实一点都不酷》[FLAC/分轨][398.22MB]
- ZWEI《迟暮的花 (Explicit)》[320K/MP3][57.16MB]