Barcode 条形码

用于展现条形码。

使用指南

在 page.json 中引入组件

  1. {
  2. "navigationBarTitleText": "Barcode",
  3. "usingComponents": {
  4. "wux-barcode": "../../dist/barcode/index"
  5. }
  6. }

示例

  1. <view class="page">
  2. <view class="page__hd">
  3. <view class="page__title">Barcode</view>
  4. <view class="page__desc">条形码</view>
  5. </view>
  6. <view class="page__bd">
  7. <view class="weui-cells__title">请输入13位条形码,即时输入即时生成</view>
  8. <view class="weui-cells weui-cells_after-title">
  9. <view class="weui-cell weui-cell_input">
  10. <view class="weui-cell__bd">
  11. <input value="{{ number }}" type="number" class="weui-input" bindinput="bindinput" />
  12. </view>
  13. </view>
  14. </view>
  15. <view class="weui-cells__tips">提示:扫描只能识别有效的条形码</view>
  16. <wux-barcode wux-class="barcode" number="{{ number }}" options="{{ options }}" width="200" height="100" />
  17. </view>
  18. </view>
  1. Page({
  2. data: {
  3. number: '9787115335524',
  4. options: {
  5. // number: true,
  6. // prefix: true,
  7. // color: 'black',
  8. // debug: false,
  9. onValid() { console.log('onValid') },
  10. onInvalid() { console.log('onInvalid') },
  11. onSuccess() { console.log('onSuccess') },
  12. onError() { console.log('onError') },
  13. }
  14. },
  15. onLoad() {},
  16. bindinput(e) {
  17. this.setData({
  18. number: e.detail.value,
  19. })
  20. },
  21. })

视频演示

Barcode

API

参数 类型 描述 默认值
canvasId string canvas 组件的唯一标识符 wux-barcode
number number 条形码的数值 -
width number canvas 组件的宽度 200
height number canvas 组件的高度 100
options object 配置项 -
options.number true 是否显示数字 true
options.prefix true 是否显示国家前缀 true
options.color string 条形码的颜色 black
options.debug true 是否开启调试 false
options.onValid function 验证条形码合法的回调函数 -
options.onInvalid function 验证条形码不合法的回调函数 -
options.onSuccess function 接口调用成功的回调函数 -
options.onError function 接口调用失败的回调函数 -