barcode.md 5.6 KB
Newer Older
W
wanganxp 已提交
1 2 3 4
#### Barcode

app端nvue专用的扫码组件。

W
wanganxp 已提交
5 6 7
- 此组件用于app端nvue页面实现内嵌到界面上的扫码。其他场景、其他平台,请使用全屏扫码API:[uni.scanCode](https://uniapp.dcloud.io/api/system/barcode) 
- App下纯nvue项目(manifest中renderer为native),暂不支持uni.scanCode API,此时只能使用barcode组件来替代。
- 此组件自HBuilderX 2.1.5+起支持。
Elen_yyl's avatar
Elen_yyl 已提交
8

Elen_yyl's avatar
Elen_yyl 已提交
9
**属性说明**
Elen_yyl's avatar
Elen_yyl 已提交
10 11 12 13
设置Barcode扫码控件的属性,如扫码框、扫码条的颜色等。

属性|类型 |默认值|必填|说明
:--|:--|:--|:--|:--|
Elen_yyl's avatar
Elen_yyl 已提交
14
autostart|boolean|false|否|是否自动开始扫码
Elen_yyl's avatar
Elen_yyl 已提交
15 16 17 18 19
background|string| |否|条码识别控件背景颜色,颜色值支持(参考CSS颜色规范):颜色名称(参考CSS Color Names)/十六进制值/rgb值,默认值为黑色。
frameColor |string| |否|扫码框颜色,颜色值支持(参考CSS颜色规范):颜色名称(参考CSS Color Names)/十六进制值/rgb值/rgba值,默认值为红色。
scanbarColor|string||否|扫码条颜色,颜色值支持(参考CSS颜色规范):颜色名称(参考CSS Color Names)/十六进制值/rgb值/rgba值,默认值为红色。
filters|Array[Number] |[0,1,2]|否|条码类型过滤器,条码类型常量数组,默认情况支持QR、EAN13、EAN8类型。 通过此参数可设置扫码识别支持的条码类型(注意:设置支持的条码类型越多,扫描识别速度可能将会降低)。

Elen_yyl's avatar
Elen_yyl 已提交
20
**码类型常量**
Elen_yyl's avatar
Elen_yyl 已提交
21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37
- QR: QR二维码,数值为0
- EAN13: EAN条形码标准版,数值为1
- EAN8: ENA条形码简版,数值为2
- AZTEC: Aztec二维码,数值为3
- DATAMATRIX: Data Matrix二维码,数值为4
- UPCA: UPC条形码标准版,数值为5
- UPCE: UPC条形码缩短版,数值为6
- CODABAR: Codabar条形码,数值为7
- CODE39: Code39条形码,数值为8
- CODE93: Code93条形码,数值为9
- CODE128: Code128条形码,数值为10
- ITF: ITF条形码,数值为11
- MAXICODE: MaxiCode二维码,数值为12
- PDF417: PDF 417二维条码,数值为13
- RSS14: RSS 14条形组合码,数值为14
- RSSEXPANDED: 扩展式RSS条形组合码,数值为15

W
wanganxp 已提交
38
##### start(object)
Elen_yyl's avatar
Elen_yyl 已提交
39 40
> 开始扫码识别

W
wanganxp 已提交
41
###### Object object
Elen_yyl's avatar
Elen_yyl 已提交
42 43 44 45 46 47 48 49
属性|说明|类型|必填|备注
:--|:--|:--|:--|:--|
conserve|是否保存扫码成功时的截图|Boolean|否|如果设置为true则在扫码成功时将图片保存,并通过onmarked回调函数的file参数返回保存文件的路径。 默认值为false,不保存截图。
filename|保存扫码成功时图片保存路径|String|否|可通过此参数设置保存截图的路径和名称,如果设置图片文件名称则必须指定文件的后缀名(必须是.png),否则认为是指定目录,文件名称则自动生成。
vibrate|扫码成功时是否需要震动提醒|Boolean|否|如果设置为true则在扫码成功时震动设备,false则不震动。 默认值为true。
sound|扫码成功时播放的提示音|String|否|可取值: "none" - 不播放提示音; "default" - 播放默认提示音(5+引擎内置)。 默认值为"default"。


W
wanganxp 已提交
50
##### cancel()
Elen_yyl's avatar
Elen_yyl 已提交
51 52 53 54 55 56
> 取消扫码识别

参数|类型 |必填|说明
:--|:--|:--|:--|
无|无| 无| 结束对摄像头获取图片数据进行条码识别操作,同时关闭摄像头的视频捕获。 结束后可调用start方法重新开始识别。

57
##### setFlash(boolean)
Elen_yyl's avatar
Elen_yyl 已提交
58 59
> 操作闪光灯

60
###### Boolean boolean
Elen_yyl's avatar
Elen_yyl 已提交
61 62 63 64 65
类型 |必填|说明|备注
:--|:--|:--|:--|
Boolean| 是| 是否开启闪光灯|可取值true或false,true表示打开闪光灯,false表示关闭闪光灯。


W
wanganxp 已提交
66
##### 事件
Elen_yyl's avatar
Elen_yyl 已提交
67

W
wanganxp 已提交
68
##### marked
Elen_yyl's avatar
Elen_yyl 已提交
69 70
> 条码识别成功事件

W
wanganxp 已提交
71
######  返回参数说明
Elen_yyl's avatar
Elen_yyl 已提交
72 73 74 75 76 77 78 79
参数|类型 |说明
:--|:--|:--|
type|string|"success" 表示成功
message|string|识别到的条码数据,扫码识别出的数据内容,字符串类型,采用UTF8编码格式。
code|Number|识别到的条码类型,与Barcode组件的条码类型常量一致。
file|string|扫码成功的截图文件路径,扫码识别到的截图,png格式文件,如果设置为不保存截图,则返回undefined。


W
wanganxp 已提交
80
##### error
Elen_yyl's avatar
Elen_yyl 已提交
81 82
> 条码识别错误事件

W
wanganxp 已提交
83
######  返回参数说明
Elen_yyl's avatar
Elen_yyl 已提交
84 85 86 87 88 89
参数|类型 |说明
:--|:--|:--|
type|string|"fail" 表示失败
code|number| 相应 code 码
message|string|失败描述

Elen_yyl's avatar
Elen_yyl 已提交
90 91 92
**示例:**
```html
<template>
W
wanganxp 已提交
93
	<view>
Elen_yyl's avatar
Elen_yyl 已提交
94 95 96 97 98
		<barcode id='1' class="barcode" autostart="true" ref="barcode" background="rgb(0,0,0)" frameColor="#1C86EE" scanbarColor="#1C86EE" :filters="fil" @marked="success1" @error="fail1"></barcode>
		<button class="btn" @click="toStart">开始扫码识别</button>
		<button class="btn" @click="tocancel">取消扫码识别</button>
		<button class="btn" @click="toFlash">开启闪光灯</button>
		<button class="btn" @click="toscan">预览</button>
W
wanganxp 已提交
99
	</view>
Elen_yyl's avatar
Elen_yyl 已提交
100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151
</template>

<script>
	export default {
		onLoad() {
			
		},
		data: {
			fil: [0, 2, 1]
		},

		methods: {
			success1(e) {
				console.log("success1:" + JSON.stringify(e));
			},
			fail1(e) {
				console.log("fail1:" + JSON.stringify(e));
			},
			toStart: function() {
				this.$refs.barcode.start({
					conserve: true,
					filename: '_doc/barcode/'
				});
			},
			tocancel:function(){
				this.$refs.barcode.cancel();
			},
			toFlash: function() {
				this.$refs.barcode.setFlash(true);
			},

			toscan: function() {
				console.log("scan:");				
				const barcodeModule = uni.requireNativePlugin('barcodeScan');
				barcodeModule.scan("/static/barcode1.png"
				,(e)=>{
					console.log("scan_error:"+JSON.stringify(e));
				});
			}
		}
	}
</script>

<style>
	.barcode {
		width: 750rpx;
		height: 700rpx;
		background-color: #808080;
	}

	.btn {
		top: 20rpx;
H
heavensoftdc 已提交
152 153 154
		width: 730rpx;
		margin-left: 10rpx;
		margin-top: 10rpx;
Elen_yyl's avatar
Elen_yyl 已提交
155
		background-color: #458B00;
H
heavensoftdc 已提交
156
		border-radius: 10rpx;
Elen_yyl's avatar
Elen_yyl 已提交
157 158 159
	}
</style>
```