微信小程序扫码

使用wx.scanCode(Object，Object)

调起客户端扫码界面进行扫码

这个是小程序提供的相关扫码api，可以直接调用该api实现扫码

相关参数

使用例子：

直接调用api，然后参数的话可以参考微信公众号平台网站

//scan.js
  /**
     * 页面的初始数据
     */
    data: {
      scanCode:'扫码',
    },
 scanCodeEvent: function(){
      var that = this;
      wx.scanCode({
        onlyFromCamera: true,// 只允许从相机扫码,
      
        success(res){
          console.log("扫码成功："+JSON.stringify(res))
          wx.showModal({
            title: '提示',
            content: '是否添加本设备',
            success (res) {
              if (res.confirm) {
                console.log('用户点击确定')
                wx.navigateTo({
                  url: '/pages/camera/camera',
                })
              } else if (res.cancel) {
                console.log('用户点击取消')
              }
            }
          })
          // 扫码成功后  在此处理接下来的逻辑
          that.setData({
            scanCode: res.result
          })
        },
        complete(res) {
            console.log('扫码完成');
           
        }
      })
    },
 //scan.wxml
 <text bindtap="scanCodeEvent">{{scanCode}}</text>

使用camera组件实现扫码界面

因为官方提供的api不能够自定义扫码界面，所以在一些需求是不能够被满足的，所以可以使用官方提供的camera组件去实现扫码界面

相关属性

了解了这些常用的属性，就可以直接往下开始实践了

为了实现一些比较好看的扫码界面，通常可以使用camera组件去包裹和这两个组件以及透明度去实现，还可以加上动画去实现上下扫描的效果

//camera.js
// 移动动画
let animation = wx.createAnimation({});
/**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {
        this.cameraAnimation()
    },
    //动画效果
    cameraAnimation() {
        let that = this;
        // 控制向上还是向下
        let m = true;
        setInterval(function() {
            if(m) {
                animation.translateY(600).step({duration:5000})
                m = !m;
            }else {
                animation.translateY(-420).step({duration: 5000})
                m = !m;
            }
            that.setData({
                animation:animation.export()
            })
        }.bind(this),1000)
    },
     scanCodeEvent(e) {
       this.throttle((e) => {
        console.log(e.detail);
        wx.showModal({
            title: '提示',
            content: '是否添加本设备',
            success (res) {
              if (res.confirm) {
                console.log('用户点击确定')
                wx.navigateTo({
                  url: '/pages/function_center/device_connect/index',
                })
              } else if (res.cancel) {
                console.log('用户点击取消')
              }
            }
          })
       })

    },
   

为了防止连续扫码，可以使用节流函数来实现对扫码间隔的控制

 // 节流控制扫码程序的执行时间间隔
    throttle: function(action,wait = 2000) {
      let time = Date.now()
      return function () {
        if(time + wait - Date.now() < 0){
          action();
          time = Date.now();
        }
      }
    },

//camera.wxml
<view class="scan-view">
    <view class="scan-border">
       
            <camera class="scan-camera" mode="scanCode" binderror="cameraError" bindscancode='scanCodeEvent' frame-size='large'>
                <cover-view class="bg">  </cover-view>
                <cover-view class='scan-animation' animation="{{animation}}"></cover-view>
                
            </camera>
            <view>
                将二维码放入此处
            </view>
          
       
         <!-- 这里可以处理其他内容 -->
  
    </view>
</view>

//camera.wxss
/* pages/function_center/camera/index.wxss */
.scan-view {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background-color: white;
    position: fixed;
    align-items: center;
    justify-content: space-around;
  }
  .scan-border {
    width: 100%;
    height: 100%;
    border-radius: 10rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .bg {
    width: 500rpx;
    height: 400rpx;
    opacity: 1;
    border: 5rpx solid greenyellow;
    margin: auto;
    margin-top: 200rpx;
    border-radius: 10rpx;

  }
  .scan-camera {
    width: 96%;
    height: 100%;
    align-items: center;
    border-radius: 6rpx;
    border: 5rpx solid grey;
  }
  .scan-animation {
    position: absolute;
    top: 210rpx;
    left: 140rpx;
    width: 450rpx;
    height: 8rpx;
    background-color: greenyellow;
    border-radius: 50%;
  }

效果如图

这里面有个小问题，就是扫码区域不是中间的长方体，而且有时候扫得上，有时扫不上，不知道是camera组件的问题还是啥，欢迎大家在评论区下方留下解答