微信小程序自定义扫描代码界面的实现代码

更新时间：2020年7月2日10:19:59作者：乘坐小型蚱hopper

本文主要介绍微信小程序定制扫描代码功能接口的实现代码。本文通过示例代码详细介绍了您，该示例代码对您的学习或工作具有一定的参考价值，需要的朋友可以参考

扫描代码页面为小程序，扫描代码界面始终处于打开状态，并且可以同时处理其他功能，如下所示：

由于直接调用微信的scanCode，因此无法自定义界面，因此只能使用本机分量摄像头来完成此功能。关于扫描框四个角的图片，只需自己绘制，中间画一条水平移动线，使用小程序的动画功能，在本机相机组件上，需要进行盖视图和盖图像处理覆盖，并添加了提示音。

/**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.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   } })

摘要

这是关于微信小程序定制扫描功能接口的实现代码的本文结尾。有关微信小程序自定义扫描内容的更多信息，请搜索Script Home的上一篇文章或继续浏览。以下相关文章希望您将来会更多支持Scripthome！