微信小程序：自定义扫码功能

我们今天主要是介绍小程序自定义扫码的应用，相关业务处理可以根据自己需求来填补

WXML： 

  
    
  
  
    请将摄像头对准VIN号
    
      
        
      
      轻触照亮
      
        扫一扫
      
      
        取消
      
    
  

WXSS:

page {
  font-family: PingFang SC-Regular, PingFang SC;
  font-size: 24rpx;
  background-color: #F8F7FB;
}

.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.direction-column {
  flex-direction: column;
}

.margin-top-20 {
  margin-top: 20rpx;
}

.margin-top-40{
  margin-top: 40rpx;
}

.scan-box {
  position: fixed;
  top: 0;
  width: 100%;
  height: 100vh;
  background-color: #000000;
   z-index: 999999;
}

.scan-box .camera {
  position: relative;
  width: 100vw;
  height: 10vw;
  margin: 20vh auto 0;
}

.scan-box .camera-img{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 99999;
}

.scan-box .scan-tip {
  padding: 20rpx 0 0 0;
  font-size: 32rpx;
  text-align: center;
  color: #fff;
}

.scan-box .flashlight-btn{
  background: transparent !important;
  width: 100rpx;
  height: 80rpx;
  padding: 0 !important;
}

.scan-box .flashlight-btn>image{
  width: 100%;
  height: 100%;
}

JS:

const app = getApp()
Page({

  /**
   * 页面的初始数据
   */
  data: {
    windowHeight: app.globalData.windowHeight + 400,
    showCanScan: false,
    flashBtn: 'off',
    checked: true
  },

  numberRecognition: function () {
    this.takePhoto();
  },
  uploadAndRecognition(paths) {
    Toast.loading({
      duration: 0,
      message: '识别中...',
      forbidClick: true,
    });
    let _this = this;

    //  图片上传处理接口

  },
  //拍照
  takePhoto: function () {
    var that = this;
    //创建拍照上下文对象
    const ctx = wx.createCameraContext()
    ctx.takePhoto({
      quality: 'high',
      //拍照成功
      success: (res) => {
        that.uploadAndRecognition(res.tempImagePath);
      },
      fail: err => {
        console.log(err)
      }
    })
  },
  changeflashBtn: function () {
    let _this = this;
    _this.setData({
      flashBtn: _this.data.flashBtn == 'off' ? 'on' : 'off'
    })
  },
  hideScanWindow: function () {
    let _this = this;
    _this.setData({ showCanScan: false })
  }
})