生成二维码，扫描二维码，二维码预览三件套。uQRCode、uni.scanCode、uni.previewImage

生成二维码，扫描二维码，二维码预览三件套。uQRCode、uni.scanCode、uni.previewImage

一、生成二维码
使用插件：uQRCode（在uniapp插件市场下载引入）
将uqrcode.js保存在公用工具的文件夹内容，本项目中在common
使用时在相应的页面引入js文件

import uQRCode from "@/common/uqrcode.js";

渲染二维码标签

<canvas
  canvas-id="qrcode"
  @click="getCodeIndex"
  style="width: 60px; height: 60px"
/>

生成二维码代码

//渲染二维码
    make() {
      let codeUrl = `${this.formInfo.id},2`;
      uQRCode.make({
        canvasId: "qrcode",// 放置在哪个标签中，将ID设置为相同
        componentInstance: this,
        text: codeUrl, // codeUrl为存放要传输的数据的变量
        size: 60,// 大小左右都为60px ！注意要和容器大小一致
        margin: 0,// 不改变大小添加白色边框
        backgroundColor: "#ffffff",
        foregroundColor: "#000000",
        fileType: "jpg",
        correctLevel: uQRCode.defaults.correctLevel,
        success: (res) => {
          console.log(res, "res"); // res为生成的二维码地址，浏览器上是bese64格式，手机上好像直接就是地址。
        },
      });
    },

！注意生成二维码执行时间，可以根据生命周期来执行也可以根据数据请求执行，毕竟二位码是为了传输数据，先请求到数据再渲染数据

// 获取页面数据
      lookCretificate(value.id).then((e) => {
        this.formInfo = e.data;
        this.urls = this.formInfo.photoPaths.map((e) => {
          return (e = "http://58.244.120.194/" + e);
        });
        this.make();// 渲染二维码
        this.previewMake();// 渲染预览二维码
        console.log(e);
      });

二、uniapp原生扫描插件
在生成二维码之后需要用扫描工具来获取信息。uniapp有原生的调用方法

uni.scanCode。
uni.scanCode({
        success: (res) => { // res为扫描获取到的信息
          let result = res.result.split(",");
          uni.navigateTo({
            url: this.gotoCodeUrl[result[1]] + result[0],
          });
        },
      });

扫描获取到信息后执行相应的事件完成操作即可

三、二维码预览
用户可能希望点击二维码能够向预览图片一样预览二维码，方便保存文件、扫描等。
思路是渲染一个更大的图片隐藏起来，点击的时候根据uni的预览API（uni.previewImage）调用并渲染出来。
引入二维码插件

import uQRCode from "@/common/uqrcode.js";

渲染用的标签，！注意用来渲染的标签隐藏方法，v-if,v-show,display都不好使，我是用的方式是长宽1px

<view class="preview-qrcode">
<canvas
  canvas-id="previewQrcode"
  style="width: 500px; height: 500px"
/></view>
//css
.preview-qrcode {
  width: 1rpx;
  height: 1rpx;
  overflow: hidden;
}

渲染预览二维码，更大，！注意最好是带margin这样有白边的二维码更容易识别，

previewMake() {
      let codeUrl = `${this.formInfo.id},0`;
      uQRCode.make({
        canvasId: "previewQrcode",
        componentInstance: this,
        text: codeUrl,
        size: 500,
        margin: 20,
        backgroundColor: "#ffffff",
        foregroundColor: "#000000",
        fileType: "jpg",
        correctLevel: uQRCode.defaults.correctLevel,
        success: (res) => {
          console.log(res, "res");
          this.previewCode.push(res);//获取渲染完成的地址
        },
      });
    },

预览事件,uni原生预览图片API uni.previewImage

// 二维码预览
    getCodeIndex() {
      uni.previewImage({
        urls: this.previewCode,//可以是一个数组
        current: 0,// 数组的下标
        indicator: "default", 
      });
    },

结束