微信小程序自定义扫码

使用相机模拟扫码功能

WXML:

<camera class='camera' mode="scanCode" bindscancode="onScancodeResult"  style="width: 100%; height: 320px;">
  <cover-view class='smwrap'>
    <cover-image src='../../images/smbox.png'></cover-image>
  </cover-view>
</camera>
<!--
cover-view :设置边框
cover-image：图片代替边框
-->

cover-view可覆盖的原生组件包括 map、video、canvas、camera、live-player、live-pusher,只支持嵌套 cover-view、cover-image，可在 cover-view 中使用 button

JS

data:{
scanFunctionIsUseAble: true,
},
onScancodeResult:function(e){
    var that = this;
    if (that.data.scanFunctionIsUseAble) {
      that.setData({
        scanFunctionIsUseAble: false,
        switchChecked: false
      })
      console.log(e.detail.result)
      that.setData({
        cusid: e.detail.result
      })
      /*dioa 函数 是调接口传数据的*/
      that.dioa(that.data.cusid, true,0)
      wx.vibrateShort()
    }
    /*1秒后接着扫码*/
    setTimeout(function () {
      that.setData({
        scanFunctionIsUseAble: true
      })
    }, 1000)
 }
 /*dioa 函数 是调接口传数据的*/
 dioa: function (cusid, markd1) {
    var that = this;
    wx.request({
      url: 'http://www......n',
      method: 'POST',
      data: {
        userid: that.data.por.userid,
        tokenid: that.data.por.tokenid,
      },
      header: {
        'content-type': 'application/x-www-form-urlencoded'// 默认值
      },
      success(res) {
        var t = res.data;
        if (t.state == 1) {
         
        }
      }
    })
  },

WXSS：

 .camera{position: relative;}
.smwrap{margin:200rpx auto 0;width: 440rpx;height: 400rpx;overflow: hidden;position: relative;}
cover-view image{width: 440rpx;height: 400rpx;}