小程式的一個掃碼頁面，掃碼介面一直開著，同時可以處理其他功能，如下：

由於直接呼叫微信的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
 }
})

總結

到此這篇關於微信小程式自定義掃碼功能介面的實現程式碼的文章就介紹到這了,更多相關微信小程式自定義掃碼內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！