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

编程学习 2021-07-04 14:06www.dzhlxh.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-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
  }
})

总结

到此这篇关于微信小程序自定义扫码功能界面的实现代码的文章就介绍到这了,更多相关微信小程序自定义扫码内容请搜索狼蚁SEO以前的文章或继续浏览狼蚁网站SEO优化的相关文章希望大家以后多多支持狼蚁SEO!

Copyright © 2016-2025 www.dzhlxh.cn 金源码 版权所有 Power by

网站模板下载|网络推广|微博营销|seo优化|视频营销|网络营销|微信营销|网站建设|织梦模板|小程序模板