uni.scanCode不支持h5扫码（用拍照或者获取相册识别二维码和条码）

用微信扫码uni.scanCode 经过官网查询不支持h5

经过网上查询可以引入QuaggaJS库来实现识别条码

实现h5识别二维码我是参考无名咸鱼的博客

QuaggaJS官网

QuaggaJS 官网地址

quaggaJS GitHub 地址

用npm 安装

• 先安装

npm install quagga
1

如有需要看详情去官网查看

• 引入

	import Quagga from 'quagga'; //引用QuaggaJS库
	const Quaggas = require('quagga');
1
2

• 示例
  qrCod.js 的代码 (文章过长只能分成2篇文章)

<u-form-item label="商品编码" prop="goodsBarcode" borderBottom ref="item1">
	<u--input v-model="form.goodsBarcode" inputAlign="right" border="none" placeholder="请输入">u--input>
	<u-icon slot="right" name="scan" size="24" @click="scanCode">u-icon>
u-form-item>
1
2
3
4

import Quagga from 'quagga'; //引用QuaggaJS库
	const Quaggas = require('quagga');
	let qrcode = require('@/utils/qrCode.js') //引用二维码（源码） 
export default {
	data() {
	return {
	  form:{}
	 }
   },
	methods: {
		scanCode() {
				const _this = this
				// #ifdef APP-PLUS || MP-WEIXIN 
				uni.scanCode({
					// scanType: ['barCode'],
					success: function(res) {
						console.log(res, '=234234234');
						_this.form.goodsBarcode = res.result
						_this.$refs.uForm.validateField('goodsBarcode')
					}
				})
				// #endif

				// #ifdef H5
				this.scanCodeH5()
				// #endif
			},
			//h5识别条码和二维码
				scanCodeH5() {
				console.log('h5');
				const _this = this
				uni.chooseImage({
					count: 1,
					success: res => {
						var filePath = res.tempFilePaths[0];
						Quaggas.decodeSingle({
								//解码方式，与条形码的编码方式有关
								decoder: {
									readers: [
										'code_128_reader',
										'ean_reader',
										'ean_8_reader',
										'code_39_reader',
										'code_39_vin_reader',
										'codabar_reader',
										'upc_reader',
										'upc_e_reader',
										'i2of5_reader'
									] // List of active readers
								},
								numOfWorkers: 0, //节点不支持开箱即用的 Web Workers ，配置 属性必须显式设置为 。numOfWorkers:0
								locate: true, // try to locate the barcode in the image
								src: filePath
							},
							function(result) {
								console.log('识别结果', result);
								if (result.codeResult) { //识别条码
									_this.form.goodsBarcode = result.codeResult.code || ''
									_this.$refs.uForm.validateField('goodsBarcode')
								} else {//识别二维码
									qrcode.decode(filePath)
									qrcode.callback = (codeRes) => {
										console.log(codeRes);
										if (codeRes == "error decoding QR Code") {
											uni.showToast({
												title: "未发现二维码/条码，请重新上传！",
												duration: 2000,
												icon: 'none'
											})
										} else {
											// that.scanWord = img
											console.log('二维码',codeRes);
										}

									}
							
								}
							}
						);
					}
				})
			},
		}
	}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84

效果图：