微信小程序中二维码扫描的简单实现,很容易的。

首先在.wxml写一个text组件,通过点击这个text来实现扫码功能。

<text bindtap="scanCodeEvent">{{scanCode}}</text>

bindtap是给text绑定的点击事件;{{scanCode}}给这个text赋值,赋值的数据在.js文件的data里初始化。

.js文件

Page({

  /**
   * 页面的初始数据
   */
  data: {
    scanCode:'扫码',
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    
  },

  /**
   * 扫码事件
   */
  scanCodeEvent: function(){
    var that = this;
    wx.scanCode({
      onlyFromCamera: true,// 只允许从相机扫码
      success(res){
        console.log("扫码成功:"+JSON.stringify(res))

        // 扫码成功后  在此处理接下来的逻辑
        that.setData({
          scanCode: res.result
        })
      }
    })
  },
})

扫码中有几个可配置的参数注意下:

onlyFromCamera:默认是false,允许从相机和相册扫码;如果设置为true,则只允许从相机扫码;

scanType:['barCode', 'qrCode']数组类型,这个字段来设置扫码类型;

success:扫码接口调用成功的回调函数;

fail:扫码接口调用失败的回调函数。

扫码成功success返回内容:

res.result:所扫码的内容;

res.scanType:所扫码的类型;

res.charSet:所扫码的字符集;

res.path:当所扫的码为当前小程序二维码时,会返回此字段,内容为二维码携带的 path;

res.rawData:原始数据,base64编码。

官方文档地址:https://developers.weixin.qq.com/miniprogram/dev/api/device/scan/wx.scanCode.html

Logo

开放原子开发者工作坊旨在鼓励更多人参与开源活动,与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动,如meetup、训练营等,主打技术交流,干货满满,真诚地邀请各位开发者共同参与!

更多推荐