专栏首页前端资源微信小程序调用摄像头扫描识别二维码和条形码

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

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

然后就找了一下,其实微信小程序 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://www.w3h5.com/post/255.html

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Vue CLI脚手架安装全过程及遇到的问题解决

    今天使用 Vue 官方的一个脚手架工具 Vue CLI 创建了一个项目,顺便把安装过程和遇到的问题整理了一下。效果如下图:

    德顺
  • a标签中防止跳转的href="javascript:;"、"void(0);"等都是什么意思

    javascript: 是表示在触发默认动作时,执行一段JavaScript代码,而 javascript:; 表示什么都不执行,这样点击时就没有任何反应。这是...

    德顺
  • 微软证实,部分用户的Outlook账户被黑客入侵了数月之久

    微软发现,在2019年1月1日至3月28日期间,其网络邮件服务支持代理的证书被泄露,可以未经授权直接访问一些账户。微软表示,黑客可能查看了这些账户的邮件地址、文...

    德顺
  • 【Git 第63课】python 2到3的新手坑

    昨天挖了个坑,论坛上已经有不少解答了,还有c语言的版本。今天先不填坑,让题目再飞一会儿,没做的同学可以周末试着写写玩儿。 周三的时候去参加“编程一小时”活动,过...

    Crossin先生
  • 『小白入门』从注册到上线系列

    本期带来小白入门系列,整理的微信小程序从注册到上线系列教程,供大家参考学习。 从注册到上线 从注册到上线系列《一》个人注册及个人限制说明 从注册到上线系列《二》...

    极乐君
  • Python3 基础学习笔记 C06

    函数 input() 让程序暂停运行,等待用户输入一些文本。获取用户输入后,Python将其储存在一个变量当中,以方便你使用;函数 input() 返回为 s...

    TRHX
  • Android开发框架之KJFrameForAndroid

    KJFrameForAndroid 又叫KJLibrary,是一个android的orm 和 ioc 框架。同时封装了android中的Bitmap与Http...

    非著名程序员
  • 给Python把把脉(Python知识网络)

    今天小白的公司有版本要发布,故未能按时推送新的文章。昨天的Python环境搭建一文中,大家有没有遇到什么问题?有没有真正地动手实操?遇到问题有没有反馈呢? 在正...

    1846122963
  • datepicker 日期连续选择(需要改源码)

    deepcc
  • 都是因为数学不好,美国人不敢吃中餐,中国人不敢过双十一

    事情发生在美国费城,一个名叫希恩·伍德尔(Sean Woodall)的妹子出门觅食,晃荡的时候看到一家名叫Danny's wok的鸡翅店。

    华章科技

扫码关注云+社区

领取腾讯云代金券