本文章基于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 = appIdthis.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; //当前小程序appIdlet key = this.data.session_key;const pc = new RdWXBizDataCrypt(appId, key);const data = pc.decryptData(phone, iv);},

四、监听用户扫码

同时Vue项目这边有一个比较耗性能的操作——监听一秒向服务器请求一次当前用户操作状态（判断用户是否点击了登录,小程序点击登录，成功之后PC端也就正常登录了。）

提示：有的代码不方便放出来，有不懂的可以评论提问。

微信扫码登陆PC端（Vue）（小程序）相关推荐

【vue+pc端】实现微信扫码登录pc端，后端通过微信开发平台，前端生成二维码（仅供参考）
这两周的需求是通过微信扫码登录pc端,刚定下需求原型图还没出来前,后端特意发了微信开发平台的链接给我,关于如何生成二维码的文档,以及扫码跳转后如何传code给他. 请戳这里准备工作|微信开放文档我最 ...
点微同城系统整站源码带pc端与小程序端+49款插件
介绍: 点微同城系统整站源码带pc端与小程序端+49款插件下载百度网盘请输入提取码百度网盘为您提供文件的网络备份.同步和分享服务.空间大.速度快.安全稳固,支持教育网加速,支持手机端.注册使用 ...
【vue+ant-design-vue+a-list】微信扫码登录pc端，后台页面增加微信绑定和微信解绑功能
兜兜转转,修修改改,又是缝缝补补了几天,终于完成此功能大致思路:点击绑定微信,出现微信扫码页面,扫码后跳出弹窗,发送验证码验证后可绑定点击解绑,confirm弹窗确认是否解绑,点击解绑,发送验证码 ...
php微信扫码支付pc端,PC端（电脑端）微信扫码支付和支付宝在线支付（ThinkPHP3）...
操作步骤: 1.修改配置文件 Application/common/conf/config.php $arr = array( 'DB_TYPE' => 'mysql', 'DB_HOST' = ...
java实现PC网站实现微信扫码登陆
近期,开发一个项目要求PC网站可以进行扫码登陆. 1.前期工作需要先在微信开放平台进行注册(https://open.weixin.qq.com/),并认证一个网站应用. 点击查看按钮,我们需要记录 ...
微信扫码登陆功能（保姆级）
微信官网文档 https://developers.weixin.qq.com/doc/oplatform/Website_App/WeChat_Login/Wechat_Login.html 一.申 ...
账号与微信绑定，微信扫码登陆
今天完成了pc端微信相关功能的开发,主要是账号与微信绑定,微信扫码登陆. 流程,用户登陆后,在个人中心里有一个和微信绑定界面,用户使用微信扫描后,当前账号和微信账号绑定,可以用来微信扫描登陆. 在登陆 ...
第六天黑马十次方用户注册、用户登陆掌握js-cookie、微信扫码登陆、nuxt嵌套路由
学习目标: ** 完成用户注册功能完成用户登陆功能,掌握js-cookie的使用完成微信扫码登陆的功能完成用户中心嵌套布局,掌握nuxt嵌套路由的使用 ** 1 用户注册 1.1 页面构建创建 ...
微信扫码登陆/微信公交号登录PHP 自适应 UnionID统一用户
<?php namespace Topxia\Component\OAuthClient; /** * 微信扫码登陆 * Enter description here ... * @aut ...

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

一、向后端请求token

二、绘制二维码

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

四、监听用户扫码

微信扫码登陆PC端（Vue）（小程序）相关推荐

最新文章

热门文章