创新实训——记录14

目录

内容综述

逻辑分析

代码实现

总结


内容综述

本文将会与web端同学协作,完成扫码登录。

逻辑分析

采用微信小程序的初衷,就是免于下载,同时使用手来描绘图形更加方便。此外还有一个优点,就是可以在web使用扫码登录,轻而易举地将两端的用户统一起来。

但这个逻辑的实现,却费了些周折。起初,我们决心使用微信直接扫码,里面要求使用到了appId和appSecret,我以为直接使用小程序的两个值即可。但尝试之后报错,查阅资料后得知,这是由于微信直接扫码需要的这两个值,并不是小程序的,而是这个网站自己的。要使网站有这两个值,就要备案,并在微信官方记录。这样一来,不但繁琐、困难,而且实现了之后,也无法跟小程序的用户统一起来。因为采用的是不同的appId和AppSecret,自然得到的是不同的openid。

工作一时陷入了困境,但后来,我和web端同学一块研究,发现可以改用微信小程序扫码。官方文档提供了扫码的API,可以在微信小程序内实现扫码。经过讨论,我们确定了这样的技术路线:web端展示二维码,二维码中蕴含一个随机值;微信小程序扫码,可以获取该随机值,然后使用wx.login获取登录凭证code,将随机值和code发送给后端;后端使用code、appId、appSecret获取openid,并与随机值关联起来;web端发送带有该随机值的网络请求,向后端不断轮询,直到后端将openid和token返回给web端,完成登录。

经过分析,这是可行的。微信小程序需要先登录,然后在小程序内扫码,这意味着,登录web端必须要先登录小程序端;小程序可以获取登录凭证,然后像自己登录一样发送给后端网络请求,后端获取到openid和token后交给web端即可!!!

这个逻辑真的很可以!!!不但节省了大量的工作,还利用了之前已经实现的逻辑。

代码实现

经过逻辑分析后,就可以着手实现扫码登录的逻辑了。

首先看后端的同学给出的接口:

需要的核心参数就是rand和code。 

查看微信官方文档关于扫码的API:

参数包括:

 

success回调函数的参数:

 

扫码得到的数据就在result中。利用这个result,小程序再获取code,就可以发送网络请求了。

首先在my页面中设置一个扫码按钮:

 

实现scan函数:

 

对应,这里的网络请求使用login方法实现,也是Promise格式:

 

至此,代码实现了。接下来的逻辑就是,后端收到code和rand,获取openid和token存入数据库;web端发送网络请求,通过rand得到数据即可。

与web端、后端同学合作,中间也报了许多错误,逐一修改。最终在扫码后得到如下结果:

实现成功!!! 

总结

扫码登录的功能实现,使微信小程序和web两端真正得以联合。这意味着,整体的大型架构已经完成。

猜你喜欢

转载自blog.csdn.net/weixin_45792464/article/details/125131238