首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >微信小程序调用摄像头扫描识别二维码和条形码

微信小程序调用摄像头扫描识别二维码和条形码

作者头像
德顺
发布2019-11-13 10:44:00
9.5K0
发布2019-11-13 10:44:00
举报
文章被收录于专栏:前端资源前端资源

今天在整一个有关于快递的小程序,快递单号一般比较长,手动录入会很麻烦。

然后就找了一下,其实微信小程序 API 中自带一个扫码识别的功能。

wx.scanCode(Object object)

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

示例代码:

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

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

WXSS就不贴了

WXML部分(应用):

<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>

给扫描按钮的图片绑定一个事件,点击调用摄像头扫码,扫描成功将数值赋给 input 输入框的 value 值。效果如下图:

JS 部分(应用):

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
      })
    }
  })
},

参数 Object object

属性

类型

默认值

说明

onlyFromCamera

boolean

false

是否只能从相机扫码,不允许从相册选择图片

scanType

Array.<string>

'barCode', 'qrCode'

扫码类型

success

function

接口调用成功的回调函数

fail

function

接口调用失败的回调函数

complete

function

接口调用结束的回调函数(调用成功、失败都会执行)

object.scanType 的合法值

说明

barCode

一维码

qrCode

二维码

datamatrix

Data Matrix 码

pdf417

PDF417 条码

object.success 回调函数

参数

Object res

属性

类型

说明

result

string

所扫码的内容

scanType

string

所扫码的类型

charSet

string

所扫码的字符集

path

string

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

rawData

string

原始数据,base64编码

res.scanType 的合法值

说明

QR_CODE

二维码

AZTEC

一维码

CODABAR

一维码

CODE_39

一维码

CODE_93

一维码

CODE_128

一维码

DATA_MATRIX

二维码

EAN_8

一维码

EAN_13

一维码

ITF

一维码

MAXICODE

一维码

PDF_417

二维码

RSS_14

一维码

RSS_EXPANDED

一维码

UPC_A

一维码

UPC_E

一维码

UPC_EAN_EXTENSION

一维码

WX_CODE

二维码

CODE_25

一维码

声明:本文由w3h5原创,转载请注明出处:《微信小程序调用摄像头扫描识别二维码和条形码》 https://cloud.tencent.com/developer/article/1537981

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • wx.scanCode(Object object)
  • 示例代码:
  • WXML部分(应用):
  • JS 部分(应用):
  • 参数 Object object
  • object.success 回调函数
相关产品与服务
云开发 CloudBase
云开发(Tencent CloudBase,TCB)是腾讯云提供的云原生一体化开发环境和工具平台,为200万+企业和开发者提供高可用、自动弹性扩缩的后端云服务,可用于云端一体化开发多种端应用(小程序、公众号、Web 应用等),避免了应用开发过程中繁琐的服务器搭建及运维,开发者可以专注于业务逻辑的实现,开发门槛更低,效率更高。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档