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

更新时间：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  }})

摘要

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