The WeChat applet provides the function of calling the camera to scan the code directly, but the scanning interface is only a full-screen camera, and other functions cannot be added. The camera component of the WeChat applet, that is, the system camera, can help us realize the custom scanning function. (Note: For the QR code scanning function, the WeChat client needs to be upgraded to 6.7.3.)

Implementation process

• Use the camera component, use the scan code mode, bind the scan code success and failure events, the official website API: https://developers.weixin.qq.com/miniprogram/dev/component/camera.html

<camera style="width: 100%; height: 100%;" mode="scanCode" bindscancode="scancode" binderror="scanError"></camera>

mode: application mode, valid only during initialization and cannot be changed dynamically, optional values: normal (default, camera mode) / scanCode (code scanning mode);
bindscancode: Triggered when the scan code recognition is successful, and only takes effect when mode="scanCode";
bindererror: Triggered when the user is not allowed to use the camera

• Add modules to be displayed on the page in xwml

<!-- navigation -->
<view class="nav" style="height: {{systemInfo.statusBarHeight + 44}}px;">
    <view class="nav-content">
        <image class="icon icon-back" src="../../images/back.svg" bindtap="goBack"></image>
        <view>scan serial code</view>
    </view>
</view>

<!-- The effect of scanning up and down -->
<view class="scan"></view>

<!-- Input box -->
<view class="bottom">
    <view class="bottom-tip" hidden="{{typing}}">Scan the device serial number barcode</view>
    <view class="bottom-action" hidden="{{!typing}}">
        <text bindtap="cancel">Cancel</text>
        <text class="bottom-action-submit" bindtap="submit">Sure</text>
    </view>
    <view class="bottom-inputBox">
        <van-field model:value="{{deviceSerialNo}}" center clearable placeholder="Manually enter the serial number" border="{{false}}" bind:confirm="confirm" focus="{{typing}}" bind:focus="bindfocus" bind:blur="bindblur" class="bottom-input" custom-style=" background: #F6F6F6;border-radius: 8px;" placeholder-style="color:#000;text-align: center;"></van-field>
    </view>
</view>

<!-- The blue mark of the code position when the code is scanned successfully -->
<view class="position" hidden="{{!position.length}}" style="left:{{position[0] + (position[2] / 2)}}px;top:{{position[1] + (position[3] / 2)}}px;">
    <view></view>
</view>

<!-- failure prompt -->
<view class="fail" hidden="{{!showFail}}">
    <view>
        <view class="fail-title">scan failed</view>
        <view>{{errMsg}}</view>
    </view>
</view>

• The navigation of the scan code page is based on your own needs. In this case, the navigation does not use the default navigation. You need to add "navigationStyle": "custom" to the corresponding json file. After adding, the default navigation will not be displayed, and you can customize it. The position of custom navigation is generally under the status bar. The parameters such as the height of the status bar of each model of mobile phone are different. The WeChat applet provides the API wx.getSystemInfo for obtaining system information. We make adjustments.

• For the effect of scanning up and down, just write the corresponding CSS style

scan{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 80%;
  height: 280rpx;
  background-image: radial-gradient(circle at 49% 1.8%, rgba(33,150,243,0.28) 0%, rgba(33,150,243,0.00) 102%);
}
.scan::after {
  content: '';
  width: 100%;
  border: 1rpx solid;
  border-color: rgba(33,150,243,0.28);
  position: absolute;
  animation: animate_scan 3s infinite;
}

• Scanning the code successfully triggers the event. The camera component provides the scan success event bindscancode, which can get the scan result, scan location, etc. Note that if the camera keeps scanning the code, it will be triggered continuously. After the code is successfully scanned, we will give a logo and stop processing business logic.

scancode (e) {
  console.log(e)
  // If the scan is successful, no subsequent processing will be performed
  if (this.data.hasScan) {
      return
  }
  // play scan beep
  this.playMusic()
  this.setData({
      position: e.detail.scanArea, // Scan code location
      hasScan: true
  })
  // get scan results
  let str = e.detail.result
  // Handle business logic...
}

Play audio:

playMusic () {
  const innerAudioContext = wx.createInnerAudioContext()
  innerAudioContext.autoplay = true
  innerAudioContext.src = '/images/beep.mp3' /**Local needs to use absolute addresses */
  innerAudioContext.play()
}

Replenish

The WeChat applet provides the apiwx.scanCode(Object object) for scanning codes, which can directly call the camera to scan codes and select pictures to scan codes (you need to open the camera first to scan codes). Example:

wx.scanCode({
  onlyFromCamera: false, // Whether you can only scan codes from the camera and not allow to select pictures from the album, the default is false
  success (res) {
      console.log(res)
  }
})