uniapp扫码和生成二维码 qrcodejs 实现详解

1.扫码

官网：uniapp官网-扫码

在HBuilderX中建议使用真机进行调试（真机调试步骤请看第3点），运行成功后方可扫码，在这里进行了限制。需要注意的只有一点，res.scanType 打印出来一定要是"QR_CODE" 字段，就表示是正常的二维码类型，如果打印出来是 “UPC_E” 那么说明此二维码有问题。排除二维码出错的情况下有两种可能性，其一是二维码太模糊，其二是生成二维码时数据太多，二维码过于杂乱。如果是前者的话，建议你调高清晰度，或者打印机打印时调高深度（打印机可选项），后者的话，建议你在生成二维码的时候删除一些无关紧要的属性。以下代码复制即用

<i class="iconfont icon-saoma" @click="openScan"></i>

openScan () {// #ifndef MP-WEIXIN || APP-PLUSuni.showToast({icon: 'none',title: '扫码只支持App和小程序'});return;// #endif// 允许从相机和相册扫码uni.scanCode({success: res => {console.log('条码类型：' + res.scanType);console.log('条码内容：' + res.result);if (res.result.substr(0, 1) != '{') {console.log('坑点：解析二维码后第一个位置包含一个特殊字符，大部分编译器和调试工具识别不了这个特殊字符');res.result = res.result.substring(1);}// 解析JSONtry {this.scanJson = JSON.parse(res.result);console.log(this.scanJson,123456);// type=1 代表扫码关联设备if (this.scanJson.type == 1) {this.modal = {show: true,showConfirmButton: true,content: '【设备编号:' + this.scanJson.devId + ', 产品名称:' + this.scanJson.productName + '】确定添加吗？'};return;}uni.showToast({ icon: 'none', title: '解析二维码后，找不到对应处理类型' });} catch (error) {uni.showToast({ icon: 'none', title: '解析二维码错误，格式不正确' });}}});}

2.生成二维码qrcodejs2

(1)下载

npm i qrcodejs --save

(2)使用

<divid="qrcode"ref="tags"class="qrcode"style="margin-left:50%;transform: translateX(-50%);"
></div>

import QRCode from "qrcodejs2"

components: { QRCode },

// 二维码qrcode (row) {var box = document.getElementById("qrcode");box.innerHTML = "";// 上面两行代码是根据我的业务需求，每次生成页面二维码会依次叠加let str = this.formatKey(row.productKey)console.log(str, 'str');// data 中是生成二维码后扫描二维码出来的内容const data = {type: 1,devId: row.devId,productName: str,productKey: row.productKey,}// 生成二维码实例，text 是内容，width 和 height 是二维码大小const container = this.$refs.tagsthis.qrcodeM = new QRCode(container, {text: JSON.stringify(data),width: 160,height: 160})}

3.真机调试

（1）使用数据线连接手机和电脑，连接手机时手机弹框选择“传输文件”，打开手机开发者模式，在开发者选项中一定要打开“USB安装”和“USB调试”，便于后期安装基座

（2）在HBuilderX中选择“运行”——>“运行到手机或模拟器”，选择基座的时候根据手机系统选择Android 或 ios ，如果你是苹果手机，建议下载 “爱思助手” ，不过自从今年9月份，苹果就不支持调试了，建议使用安卓手机，安卓手机可忽略下载插件这一步，直接点击运行即可，如果没有打开开发者模式，电脑是检测不到手机的。