uniapp框架使用vue2实现微信扫二维码跳转小程序指定页面

前言：最新有一个需求就是在后台系统中添加一个二维码，然后扫描二维码跳转到小程序的指定页面

后台系统中安装插件qrcode

> cnpm install qrcodejs2 --save 
> // 或者 
> npm install qrcodejs2 --save

引入插件

// 引入二维码插件 import QRCode from "qrcodejs2";

 <div
       style="
                  justify-content: center;
                  align-items: center;
                  display: flex;
                "
                ref="qrcode"
              ></div>
          

new QRCode(this.$refs.qrcode, {
          text: `https://xxxx/xxxx/xxxx/#/pages/index/index/id=${this.eid}&consUserType=2`, //二维码跳转
          width: 80, //二维码设置宽高
          height: 80,
        });

在微信开发者工具中配置二维码参数

开发管理->开发设置->扫普通链接二维码打开小程序

上图在配置项在前缀占用规则可以详细配置参数 下图在微信开发者工具中配置可以获取二维码传递来的数据，注意启动参数直接写q="xxxxxxxxxxxxxxxx"，因为会默认变成对象包裹，扫描二维码跳转到指定页面所以启动页面填写对应的地址。

下面链接微信小程序配置二维码规则

developers.weixin.qq.com/miniprogram…

//页面加载时接收二维码传递来的参数q链接，将其放进store中，之前登录逻辑会判断小程序是否已经登录（小程序在之前登录逻辑不展示了），当未登录会跳转到login页面进行登录
onLoad(option) {
    if (!option.q) {
        this.Id = option.id;
        this.consUserType = option.consUserType;
    } else {
        this.$store.commit("CHANGE_QR_ROUTE", option)
    }
},

//login登录逻辑
//从仓库中获取store的值
let qrCode = store.getters.qrCodeRoute
if (qrCode && qrCode.q) {
    let q = decodeURIComponent(decodeURIComponent(qrCode.q))
    const startIndex = q.indexOf("#/") + 2;
    const endIndex = q.indexOf("/id=");
    const parameter = q.substring(startIndex, endIndex);
    // 使用正则匹配id和consUserType的值
    const idRegex = /id=(\d+)/;
    const consUserTypeRegex = /consUserType=(\d+)/;
    const idMatch = q.match(idRegex);
    const consUserTypeMatch = q.match(consUserTypeRegex);
    const id = idMatch ? idMatch[1] : null;
    const consUserType = consUserTypeMatch ? consUserTypeMatch[1] : null;
    // console.log("parameter", parameter, "id", id, "consUserType", consUserType)
    //跳转到指定页面
    uni.reLaunch({
        url: `../../${parameter}?id=${id}&consUserType=${consUserType}`
    });
}