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

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

后台系统中安装插件qrcode

markdown 复制代码

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

引入插件

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

html 复制代码

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

js 复制代码

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...

js 复制代码

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

js 复制代码

//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}`
    });
}