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

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

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

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

QuaggaJS官网

QuaggaJS 官网地址

quaggaJS GitHub 地址

用npm 安装

  • 先安装
npm install quagga

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

  • 引入
	import Quagga from 'quagga'; //引用QuaggaJS库
	const Quaggas = require('quagga');
  • 示例
    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>
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);
										}

									}
							
								}
							}
						);
					}
				})
			},
		}
	}

效果图:
uni.scanCode不支持h5扫码(用拍照或者获取相册识别二维码和条码)_第1张图片

你可能感兴趣的:(前端)