WeChat applet calls the camera to scan and recognize QR codes and barcodes

Today, there is a small program about express delivery. The express tracking number is generally relatively long, and manual entry will be very troublesome.

Then I looked for it. In fact, the WeChat applet API comes with a function of scanning code recognition.

wx.scanCode(Object object)

Bring up the scan code interface of the client to scan the code.

Sample code:

// 允许从相机和相册扫码
wx.scanCode({
  success(res) {
    console.log(res)
  }
})

// 只允许从相机扫码
wx.scanCode({
  onlyFromCamera: true,
  success(res) {
    console.log(res)
  }
})

WXSS will not post

WXML part (application):

<view class='form-list'>
  <text>运单号码</text>
  <input type='text' value='{
   
   {scanCodeMsg}}'></input>
  <image class='scan' bindtap='scanCode' src='/images/scanCode.png' mode='widthFix'></image>
</view>

Bind an event to the image of the scan button, click to call the camera to scan the code, and the value will be assigned to the value of the input box after the scan is successful. The effect is as follows:

JS part (application):

data: {
  scanCodeMsg: "",
},
scanCode: function() {
  var that = this;
  wx.scanCode({ //扫描API
    success(res) { //扫描成功
      console.log(res) //输出回调信息
      that.setData({
        scanCodeMsg: res.result
      });
      wx.showToast({
        title: '成功',
        duration: 1000
      })
    }
  })
},

Parameters Object object

object.success callback function

parameter

Object res

Reprinted from: https://www.w3h5.com/post/255.html