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 接口调用失败的回调函数 -