微信小程序中生成条形码和二维码需要使用到的npm包
发表时间:2023-09-02 20:31:41
文章来源:炫佑科技
浏览次数:166
菏泽炫佑科技 菏泽炫佑小程序开发 菏泽炫佑app制作 炫佑科技
一:条码、二维码生成
微信小程序中生成条形码和二维码需要用到的npm包,npm包的地址:
1:安装
npm i wxbarcode -S --production
微信小程序项目中使用npm包参考:
2:条码和二维码生成
(1)介绍包
在生成条形码和二维码页面所需的js中引入包
import wxbarcode from 'wxbarcode'
或者:
const wxbarcode = require('wxbarcode')
(2)条码生成
该函数用于生成包裹内的条形码,函数原型为:
barcode(id, code, width, height)
参数说明:
id:wxml文件中的ID
code:用于生成条形码的字符串
width:生成条码的宽度,单位rpx
:生成条码的高度,单位rpx
条形码生成示例:
wxml:
js:
onLoad: function (options) {
wxbarcode.barcode('barcode', '1234567890123456789', 680, 200);
},
根据上述即可实现条码生成:
(3)二维码生成
该函数用于生成包中的二维码微信小程序中生成条形码和二维码需要使用到的npm包,函数原型为:
qrcode(id, code, width, height)
参数说明:
id:wxml文件中的ID
code:用于生成二维码的字符串
width:生成二维码的宽度,单位rpx
:生成二维码的高度,单位rpx
二维码生成示例:
wxml:
js:
onLoad: function (options) {
wxbarcode.qrcode('qrcode', '1234567890123456789', 300, 300);
},
根据上面可以生成二维码:
2:扫描微信小程序
微信小程序扫码使用微信自带的API:wx.( )
wx参数:
:只能从相机扫码,不允许从相册选择图片,默认为 false
:扫码类型,默认为['',''],参数可以是数组或字符串,可选参数:(一维码)、(二维码)、(数据码)、(条码)代码)
:接口调用成功回调函数,回调成功参数:(扫码内容)、(扫码类型)、(扫码字符集)、路径(扫码为当前二维码时)小程序,会返回该字段,内容为二维码携带的路径)二维码制作小程序,(原始数据,编码)
fail:接口调用失败的回调函数
:接口调用结束的回调函数(调用成功或失败时都会执行)
例子:
// 允许从相机和相册扫码
wx.scanCode({
success(res) {
//扫码成功执行
console.log(res)
},
fail(res) {
//扫码失败执行
console.log(res)
},
complete(res) {
//扫码结束执行
console.log(res)
}
})
如果只允许拍照和扫码,可以添加以下参数:
: 真的,
根据以上即可实现微信小程序扫描