微信扫码登陆PC端（Vue）（小程序）

最新推荐文章于 2026-04-10 10:18:07 发布

原创最新推荐文章于 2026-04-10 10:18:07 发布 · 3k 阅读

13 ·

本内容遵循CC 4.0 BY-SA版权协议

本文章基于Vue项目并且已经开发一个完整上线的微信小程序，制作PC端时实现微信小程序扫码登陆PC端。

一、向后端请求token

1、后端会定时生成并更新的一个token
2、正常的接口请求从后端拿到这个token
3、npm安装插件

npm install qrcodejs2 

import QRCode from 'qrcodejs2'//当前页面

二、绘制二维码

代码如下（示例）：

		let opts = {
                errorCorrectionLevel: 'H', //容错级别
                type: 'image/png', //生成的二维码类型
                quality: 0.3, //二维码质量
                margin: 12, //二维码留白边距
                width: 160, //宽
                height: 120, //高
                text: 'http://XXXXXXXXXXXXXX?token=' + this.token, //二维码内容
                color: {
                    dark: '#333333', //前景色
                    light: '#fff' //背景色
                }
            };
            let msg = document.getElementById('QRCode');
            // 将获取到的数据（val）画到msg（canvas）上
            QRCode.toCanvas(msg, opts.text, opts, function (error) {
                console.log(error);
                console.log(opts);
                if (callback) {
                    callback();
                }
            });

提示：二维码的内容就含有token，记得给二维码也设置一个失效时间（若是超时，则提示请重新刷新二维码）

三、微信扫码跳转小程序登录

1、小程序新建了一个页面用来给用户登录，首先拿到用户的openId是登陆的关键。在我的后台服务器是利用用户的openId、手机号、个人信息来进行登录的。并通过拿到的token进行校验（后端接口请求校验）
2、引入解码js
RdWXBizDataCrypt.js

var Crypto = require('./cryptojs-master/cryptojs').Crypto;
var app = getApp();
function RdWXBizDataCrypt(appId, sessionKey) {
    this.appId = appId
    this.sessionKey = sessionKey
}
RdWXBizDataCrypt.prototype.decryptData = function(encryptedData, iv) {
    // base64 decode ：使用 CryptoJS 中 Crypto.util.base64ToBytes()进行 base64解码
    var encryptedData = Crypto.util.base64ToBytes(encryptedData)
    // console.log(sessionKey)
    var key = Crypto.util.base64ToBytes(this.sessionKey);
    var iv = Crypto.util.base64ToBytes(iv);
    // console.log(encryptedData,key,iv)
    // 对称解密使用的算法为 AES-128-CBC，数据采用PKCS#7填充
    var mode = new Crypto.mode.CBC(Crypto.pad.pkcs7);
    try {
        // 解密
        var bytes = Crypto.AES.decrypt(encryptedData, key, {
            asBpytes: true,
            iv: iv,
            mode: mode
        });
        var decryptResult = JSON.parse(bytes);

    } catch (err) {
        console.log(err)
    }
    if (decryptResult.watermark.appid !== this.appId) {
        console.log(err)
    }
    return decryptResult
}
module.exports = RdWXBizDataCrypt

-----------使用-----------index.js

// 获取用户手机号
  getPhoneNumber: function (e) {
    let phone = e.detail.encryptedData;
    let iv = e.detail.iv;
    const RdWXBizDataCrypt = require('../../../utils/RdWXBizDataCrypt');
    var appId = app.globalData.appId; //当前小程序appId
    let key = this.data.session_key;
    const pc = new RdWXBizDataCrypt(appId, key);
    const data = pc.decryptData(phone, iv);
  },