用微信扫码uni.scanCode 经过官网查询不支持h5
经过网上查询可以引入QuaggaJS库来实现识别条码
实现h5识别二维码我是参考无名咸鱼的博客
QuaggaJS官网
用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);
}
}
}
}
);
}
})
},
}
}
效果图: