微信小程序实现条形码,二维码生成和微信小程序扫码

您所在的位置:网站首页 条形码怎样生成 微信小程序实现条形码,二维码生成和微信小程序扫码

微信小程序实现条形码,二维码生成和微信小程序扫码

2024-07-03 12:35| 来源: 网络整理| 查看: 265

一:条形码,二维码生成

在微信小程序中生成条形码和二维码需要使用到wxbarcode的npm包,wxbarcode的npm包地址:wxbarcode - npm

1:安装wxbarcode

npm i wxbarcode -S --production

在微信小程序项目中使用npm包参考:https://huaweichenai.blog.csdn.net/article/details/99317237

2:条形码和二维码生成

(1)引入wxbarcode包

在你需要生成条形码和二维码页面的js中引入exbarcode包

import wxbarcode from 'wxbarcode'

或:

const wxbarcode = require('wxbarcode')

(2)条形码生成

在wxbarcode包中生成条形码使用到了barcode函数,barcode的函数原型为:

barcode(id, code, width, height)

参数说明:

id: wxml文件中的 Canvas ID

code: 用于生成条形码的字符串

width: 生成的条形码宽度,单位 rpx

height: 生成的条形码高度,单位 rpx

条形码生成实例:

wxml:

js:

onLoad: function (options) {     wxbarcode.barcode('barcode', '1234567890123456789', 680, 200); },

根据如上可实现条形码生成:

image.png

(3)二维码生成

在wxbarcode包中生成二维码使用到了qrcode函数,qrcode的函数原型为:

qrcode(id, code, width, height)

参数说明:

id: wxml文件中的 Canvas ID

code: 用于生成二维码的字符串

width: 生成的二维码宽度,单位 rpx

height: 生成的二维码高度,单位 rpx

二维码生成实例:

wxml:

js:

onLoad: function (options) {     wxbarcode.qrcode('qrcode', '1234567890123456789', 300, 300); },

根据如上可实现二维码生成:

image.png

二:微信小程序扫码

微信小程序扫码使用到了微信自带的API:wx.scanCode(Object object)

wx.scanCode的参数:

onlyFromCamera:是否只能从相机扫码,不允许从相册选择图片,默认为false

scanType:扫码类型,默认为['barCode', 'qrCode'],参数可以为数组也可以为字符串,可选参数:barCode(一维码),qrCode(二维码),datamatrix(Data Matrix 码),pdf417(PDF417 条码 )

success:接口调用成功的回调函数,回调成功参数:result(所扫码的内容),scanType(所扫码的类型),charSet(所扫码的字符集),path(当所扫的码为当前小程序二维码时,会返回此字段,内容为二维码携带的 path),rawData(原始数据,base64编码)

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

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

实例:

// 允许从相机和相册扫码 wx.scanCode({ success(res) { //扫码成功执行 console.log(res) }, fail(res) { //扫码失败执行 console.log(res) }, complete(res) { //扫码结束执行 console.log(res) } })

如果你只允许拍照扫码的话你可以增加如下参数:

onlyFromCamera: true,

根据如上就可以实现微信小程序扫码



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3