小程序条形码、二维码生成

小程序条形码、二维码生成

JavaScript 微信小程序

访问GitHub主页

共2Star

详细介绍

weapp-qbcode

在小程序中快速生成条形码、二维码

Usage

先在 wxml 文件中，创建绘制的 canvas，并定义好 width, height, canvasId 。

<canvas style="width: 686rpx;height: 160rpx;" canvas-id="canvasBarId"/>
<canvas style="width: 686rpx;height: 686rpx;" canvas-id="canvasQrId"/>

使用小程序开发者工具->构建 npm，或引入js文件，使用Barcode绘制条形码、使用Qrcode绘制二维码

import { Qrcode, Barcode } from '../../miniprogram_npm/wxapp-qbcode/index';

Barcode({
  width: 200,
  height: 200,
  canvasId: 'canvasBarId',
  text: '3444556c55',
})

Qrcode({
  width: 200,
  height: 200,
  canvasId: 'canvasQrId',
  text: 'https://github.com/github-seayon',
  image: {
    imageResource: '../../images/icon.png,
    destWidth: 100,
    destHeight: 100
  }
})

Demo

条形码示例

avatar

二维码示例

avatar

Api

Barcode([options])

options

Type:Object

参数 说明 示例
width 必须，二维码宽度，与canvas的width保持一致 375
height 必须，二维码高度，与canvas的height保持一致 160
canvasId 必须 canvas-id 'canvasBarId'
text 必须 条形码内容 '4445t55ddd'
usingIn 非必须，若在组件中使用，需要传入 this
x 非必须，二维码绘制的 x 轴起始位置，默认值0 100
y 非必须，二维码绘制的 y 轴起始位置，默认值0 100
fontColor 非必须，条形码颜色，默认值#000000 '#000000'
backColor 非必须，背景色，默认值#FFFFFF '#FFFFFF'
callback 非必须，绘制完成后的回调函数，v0.8.0+版本支持。安卓手机兼容性问题，可通过自行设置计时器来解决，更多可以参考 issue #18 function (e) { console.log('e', e) }

Qrcode([options])

options

Type:Object

参数 说明 示例
width 必须，二维码宽度，与canvas的width保持一致 375
height 必须，二维码高度，与canvas的height保持一致 160
canvasId 必须 canvas-id 'canvasQrId'
text 必须 条形码内容 '4445t55ddd'
typeNumber 非必须，二维码的计算模式，默认值-1 8
correctLevel 非必须，二维码纠错级别，默认值为高级，取值：{ L: 1, M: 0, Q: 3, H: 2 } 1
usingIn 非必须，若在组件中使用，需要传入 this
x 非必须，二维码绘制的 x 轴起始位置，默认值0 100
y 非必须，二维码绘制的 y 轴起始位置，默认值0 100
fontColor 非必须，条形码颜色，默认值#000000 '#000000'
backColor 非必须，背景色，默认值#FFFFFF '#FFFFFF'
image 非必须，在 canvas 上绘制图片，层级高于二维码 { imageResource: '', dx: 0, dy: 0, destWidth: 100, destHeight: 100 }
callback 非必须，绘制完成后的回调函数，v0.8.0+版本支持。安卓手机兼容性问题，可通过自行设置计时器来解决，更多可以参考 issue #18 function (e) { console.log('e', e) }
推荐源码