微信小程序自定义扫码界面

因扫码功能需支持自定义输入，调用微信 scanCode 无法自定义界面补充输入框，所以使用原生组件 camera。

一、Demo 演示

小程序自定义扫码演示

二、核心逻辑

1、调用摄像头扫码

将媒体组件 camera 应用模式设置为 scanCode，并绑定扫码识别成功方法

// wxml
<camera mode="scanCode" bindscancode='scancode' />

// js
scancode(event){
  const { result } = event.detail // 获取校验扫描结果
  wx.showToast({ title: `扫描结果：${result}`, icon: 'none' })
}

2、模拟扫码动画

为提升体验，模拟扫码动画

// wxml
<view class="scan-container">
  <view class="scan-box" />
  <view class='scan-animation' animation="{{animation}}" />
</view>

// js
const animation = wx.createAnimation({}); // 创建移动动画对象

// 扫描动画
startAnimation(){
  // 是否向下平移
  let down = true

  setInterval(() => {
    if (down) {
      animation.translateY(100).step({ duration: 3000 })
    } else {
      animation.translateY(0).step({ duration: 3000 })
  }

  down = !down
  this.setData({ animation: animation.export() })
  }, 3000)
}

三、完整代码

JS 代码

const animation = wx.createAnimation({}); // 创建移动动画对象
const innerAudioContext = wx.createInnerAudioContext() // 提示音
innerAudioContext.src = 'https://qdstorage.okii.com/retail-app/common/beep.mp3'

Page({
  
  /**
   * Lifecycle function--Called when page load
   */
  onLoad() {
    const { height, top } = wx.getMenuButtonBoundingClientRect();

    this.setData({ 
      menuButtonTop: `${top}px`,
      menuButtonHeight: `${height}px`
    })
  },

  /**
   * Lifecycle function--Called when page show
   */
  onShow() {
    this.startAnimation()
  },

  // 扫描动画
  startAnimation(){
	  // 是否向下平移
    let down = true

    setInterval(() => {
      if (down) {
        animation.translateY(100).step({ duration: 3000 })
      } else {
        animation.translateY(0).step({ duration: 3000 })
      }

      down = !down
      this.setData({ animation: animation.export() })
    }, 3000)
  },
  // 扫码
  scancode(event){
    wx.vibrateShort() // 触发手机振动
    innerAudioContext.play() // 提示音
    const { result } = event.detail // 获取校验扫描结果

    wx.showToast({ title: `扫描结果：${result}`, icon: 'none' })
  },
  changeInputType() {
    wx.showToast({ title: '请自定义实现', icon: 'none' })
  },
  // 返回上一级
  goBack() {
    wx.showToast({ title: '请自定义实现', icon: 'none' })
  },
})

wxml 代码

<view class="custom-scan">
  <!-- 扫码区域 -->
  <camera
    mode="scanCode"
    frame-size='large'
    flash="{{ cameraFlash }}"
    class="scan-view"
    bindscancode='scancode' 
  >
    <view class="navigation-container" style="{{ 'height: ' + menuButtonHeight + ';padding-top: ' + menuButtonTop }}">
      <icon class="icon-close" type="cancel" size="30" color="#fff" bindtap="goBack" />
    </view>

    <view class="header-container">
      <view class="input-button" bindtap="changeInputType">手动输入</view>
    </view>
    <view class="scan-container">
      <view class="scan-box" />
      <view class='scan-animation' animation="{{animation}}" />
    </view>
  </camera>
</view>

less 代码

.custom-scan {
  width: 100vw;
  height: 100vh;

  .scan-view {
    width: 100%;
    height: 100%;
  }

  .navigation-container {
    display: flex;
    align-items: center;

    .icon-close {
      padding-left: 22px;
    }
  }

  .header-container {
    display: flex;
    justify-content: flex-end;
    padding: 80rpx 30rpx 40rpx 30rpx;
  
    .input-button {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 130rpx;
      height: 64rpx;
      border-radius: 54rpx;
      color: #eee;
      font-size: 24rpx;
      background-color: rgba(50, 50, 50, 0.6);
    }
  }

  .scan-container {
    display: flex;
    justify-content: center;
    margin-top: 60rpx;
    width: 100%;
    height: 100%;

    .scan-box {
      position: relative;
      width: 500rpx;
      height: 220rpx;
      border-radius: 20rpx;
      background-image: url("https://qdstorage.okii.com/retail-app/common/scan-box.png");
      background-size: 100% 100%;
    }

    .scan-animation {
      position: absolute;
      margin-top: 10rpx;
      width: 530rpx;
      height: 6rpx;
      background-color: #ddd;
      border-radius: 50%;
    }
  }
}