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}`
    });
}
相关推荐
z_mazin35 分钟前
Chrome开发者工具实战:调试三剑客
前端·javascript·chrome·网络爬虫
sen_shan2 小时前
Vue3+Vite+TypeScript+Element Plus开发-04.静态菜单设计
前端·javascript·typescript·vue3·element·element plus·vue 动态菜单
旧识君2 小时前
移动端1px终极解决方案:Sass混合宏工程化实践
开发语言·前端·javascript·前端框架·less·sass·scss
ElasticPDF-新国产PDF编辑器3 小时前
Angular use pdf.js and Elasticpdf tutorial
javascript·pdf·angular.js
吃没吃3 小时前
vue2.6-源码学习-Vue 核心入口文件分析
前端
Carlos_sam3 小时前
Openlayers:海量图形渲染之图片渲染
前端·javascript
XH2763 小时前
Android Retrofit用法详解
前端
鸭梨大大大3 小时前
Spring Web MVC入门
前端·spring·mvc
你的人类朋友3 小时前
MQTT协议是用来做什么的?此协议常用的概念有哪些?
javascript·后端·node.js
吃没吃3 小时前
vue2.6-源码学习-Vue 初始化流程分析 (src/core/instance/init.js)
前端