效果

点击登录后，显示二维码→打开“探古”（本项目）微信小程序，扫描二维码确认登录→web端登录成功

主要流程

因为本人主要负责web前端的开发，所以本文仅介绍web前端的实现方法

代码

生成随机值

我这里使用的是crypto.getRandomValues()方法，该方法可以获取符合密码学要求的安全的随机值，具体可参考：mdn web docs Crypto.getRandomValues()

二维码的生成使用的是qrcode.react包的QRCode组件，其value属性存储生成的随机值

    // 获得随机的qr值function getQRvalue() {const array = new Uint32Array(1);// Crypto.getRandomValues() 方法让你可以获取符合密码学要求的安全的随机值window.crypto.getRandomValues(array);let random = array[0].toString();setQrvalue(random)console.log(random)return random;}

实现带倒计时的轮询

这一部分需要非常注意setInterval的闭包属性！

1. 实现二维码展示的倒计时

        // qrCountdown为展现在页面上的剩余时间let t = qrCountdown;let qrTimer = setInterval(() => {console.log("in qrtimer:", t)t--;setQrCountdown(t)// 到时间if (t < 0) {// qrTimer是二维码倒计时计时器clearInterval(qrTimer)// timerInter是定义在全局的轮询计时器clearInterval(timerInter)setLoginModalVisible(false)// 重置展现在页面上的剩余时间setQrCountdown(60)}}, 1000)// 设置qrTimer为一个状态setQrTimer(qrTimer);

注意这里setInterval第一个参数方法内部不能直接使用qrCountdown去作为上一个值来减！因为它会产生一个闭包，记住qrCountdown的值，所以实际上每次调用，qrCountdown都是原来的值，不会因为setQrCountdown而发生变化，会造成错误

2. 实现轮询计时器

2.1 参数列表

function getLoginInfo(rand, stop, qrTimer) {}

传入参数：

二维码带的rand值
是否不重复倒计时
主要是判断是否是第一次调用该方法，如果是第一次调用，则设置计时器；否则跳过。
二维码倒计时器
为什么需要把这个传入呢？因为在进行setInterval时，内部会产生一个闭包，在内部设置清除计时器清除的是一开始进入getLoginInfo方法时的计时器，即初始计时器编号（我设置的是0），而不是后面经过setInterval赋值以后的计时器编号。因为它内部产生了一个闭包，即使外部的计时器编号已经发生了改变，但是它内部依然不会变！
所以我这里在二维码计时器已经定义好了以后，即上一部分实现二维码展示的倒计时的代码后面，调用该方法，将已定义好的二维码倒计时计时器qrTime传入该方法中

2.2 具体实现

    let timerInter;function getLoginInfo(rand, stop, qrTimer) {console.log("polling")console.log("getLoginInfo timerInter:", timerInter)axios({method: 'post',url: '/api/user/getLoginInfo',// 传入二维码的randdata: qs.stringify({rand})}).then((res) => {// 如果轮询成功if (res.data.success) {console.log(res.data.data)// 设置用户参数setUserInfo(res.data.data)// 清除当前的轮询计时器clearInterval(timerInter)// 清除二维码倒计时计时器clearInterval(qrTimer)setHasLogined(true)setLoginModalVisible(false)setQrCountdown(60)Modal.success({content: "登录成功！"})} else {// 轮询未获得console.log(res.data.message)// stop表示是否是第一次轮询// !stop为true表示是第一次调用该函数，则设置计时器if (!stop) {// 每隔4秒调用一次该方法// 并将第二个参数改为true，表示后面不需要再设置计时器// 并将二维码倒计时计时器传入timerInter = setInterval(() => getLoginInfo(rand, true, qrTimer), 4000)// 记录轮询计时器的编号，方便在外部对该计时器进行清除setTimer(timerInter)}}}).catch((error) => console.log(error))}

这里设置了一个轮询计时器编号的状态time，并通过setTimer（）把当前计时器的编号记录下来了。因此，如果用户点击主动关闭二维码框，也就是调用Modal的onCancel（）方法（这个方法在闭包外面），也可以去清除轮询计时器，中止轮询。

山东大学项目实训（四）—— 微信小程序扫描web端二维码实现web端登录相关推荐

山东大学项目实训——解决微信小程序无法获得用户信息问题
微信小程序--wx.getUserProfile(Object object) 一.关于用户信息接口的调整二.调整说明三.wx.getUserInfo方法(现在返回匿名用户数据,需自行解密) 四. ...
微信小程序业务-字符串生成二维码（weapp-qrcode）
微信小程序业务-字符串生成二维码(weapp-qrcode) 前言邂逅weapp-qrcode 基本使用详细参数小程序组件中使用 image属性详解想使用网络图片? 参考地址前言在小程序项 ...
微信小程序使用canvas绘制二维码实现跳转小程序
开始接到这个需求的时候,我查阅文档获取小程序码 | 微信开放文档发现两种途径需要后端在服务器上调用接口拿到二维码,因为调用的 https://api.weixin.qq.com这个域名是不允许上白 ...
微信小程序使用weapp-qrcode生成二维码
<canvas style="width:108rpx;height:108rpx; canvas-id='qrcode'></canvas> // weapp-qr ...
微信小程序长按识别二维码，小程序相关问题总结
微信小程序长按识别二维码,小程序相关问题总结开发小程序中,长按识别二维码,小程序码跳转,已知问题整理: 小程序中,不支持长按识别二维码,和小程序码. 可利用小程序图片预览功能识别小程序码并进行跳 ...
小程序扫描普通链接二维码跳转小程序指定界面方法
微信官方文档扫普通链接二维码打开小程序 | 微信开放文档看了官方文档之后,还是存在很多困惑,微信小程序是托管到微信服务器上的,要想扫描普通链接跳转指定界面,首先要知道微信把小程序放的服务器的访问路径 ...
微信小程序订单生成支付二维码接口 code
手机的小程序订单是直接拉起支付界面的,有些朋友需要生成支付二维码这边就需要去调用微信的支付二维码接口了需要的参数是 session_id, timeStamp, nonceStr, package ...
uni-app微信小程序生成自定义参数二维码，跳转小程序指定页面，获取参数；uni-app微信小程序获取二维码自定义参数；微信小程序生成动态参数二维码；uni-app微信小程序获取动态参数二维码；
一.场景需求: 在小程序个人名片页面A页面,生成用户的个人名片二维码(该二维码携带用户的唯一标识id):微信扫一扫或长按图片识别这个二维码,可以跳转到小程序的B页面,并且在B页面拿到二维码上的唯一标识 ...
山东大学项目实训——简易微信小游戏（一）
一.项目背景微信小程序接触真实用户快,对用户反馈快速体现,是一个非常好的实践平台.同时就行业背景来看,人们对于无需安装打开即玩的休闲类小游戏的需求依然存在. 二.工作内容开发绳套奶牛.大鱼吃小鱼. ...
『小程序开发』关于微信小程序扫普通链接二维码打开小程序的具体配置流程...
前言: 对于扫普通链接二维码打开小程序的功能详解,官方api已经可以说是接近手把手的教学,咱们这里不做累述,直接上图走起...官方接入指南功能介绍扫二维码登录小程序...^_^ 限制 1.对于普通 ...

山东大学项目实训（四）—— 微信小程序扫描web端二维码实现web端登录

效果