小程序扫码登陆的原理及操作步骤

小程序通过扫码登录可以比较快的速度进入小程序，所以很多小程序都自己开了二维码，方便用户扫码登录。但是小程序扫描代码登录的原理是什么？具体怎么操作？让我们互相了解一下。

小程序扫码登录的一般原理是微信手机端口从二维码中获取相应的信息，并将该信息发送到网页上的小程序服务器，服务器验证后响应相关操作。

1.只要在网页上打开微信小程序，就会生成包含小程序uid的小程序二维码，刷新后这个二维码会发生变化，从而保证小程序只能绑定一个账号和密码，确定小程序登录用户的唯*性。您可以通过手机上uc浏览器提供的扫码功能查看二维码中的信息，但地址不会自动打开。我刷新了三次，扫描结果如下，其中比较后一串数字是uid:

1)https://login.weixin.qq.com/l/48e24d66bdbc4f

2)https://login.weixin.qq.com/l/0787fb4fa7ad4c

3)https://login.weixin.qq.com/l/92781a4a7f1c47

通过查看网页的源代码，在加载小程序页面时，已经预先加载了很多登录后需要的相关资源，所以在确认登录用户后显示用户信息非常快。

2.除了返回唯*的uid，当实际打开这个页面时，浏览器会创建一个与服务器的长连接来请求uid的扫描记录。如果没有，则在某个时间(当前大约27秒)之后将接收到状态代码408(请求超时)，指示下一个请求应该继续；如果接收到状态码201(服务器成功创建新资源)，则意味着客户端扫描了二维码。

请求超时：返回408

扫描代码成功：返回201

长轮询代码结构：

javascript，javascript

function _ poll(_ a uid){

//.

$.品牌ax({

type: 'get '，' url: 'https://login '_ sbase host '/cgi-bin/mmwebwx-bin/log in？uuid=' _ asuuid ' tip=' show _ tip，datatype: '脚本'，cache: false，timeout: _n品牌axtimeout，success:函数(数据、textstatus、jqxhr) {

switch (_aowin.code) {

案例200:

//.

打破；

案例201:

//.

打破；

案例408:

//.

打破；

案例400:

案例500:

//.

打破；

}

},

error:函数(jqxhr，textstatus，error through){

//.

}

});

}

3.当用户使用登录的微信扫描二维码时，uid会与手机微信生成的令牌绑定，并上传到服务器。此时浏览器通过长轮询查询uid扫描记录，立即得到201响应码，然后通知服务器，客户端也进入新页面(即需要你确认的按钮)。客户端确认后，获取服务器授予的令牌，进行后续的信息交互过程。

结论

一般来说，微信扫码登录的核心流程应该是：浏览器获取一个唯*的临时uid，通过长连接等待客户端用这个uid扫描二维码，从长连接获取客户端上报给服务器的账号信息进行显示。客户端确认后，从服务器获取信用授予令牌，进行后续的信息交互过程。在超时、网络断开和在其他设备上登录之后，先前获得的令牌要么丢失，要么无效，这形成了对授*过程的有效安全保护。

下面是题目的开头。如何在小程序顶部设置转盘？标题到此结束

小程序开发中比较常见的问题是小程序顶部轮播的设置和使用，那么小程序顶部轮播如何使用呢？看了下面小系列找到的资料，你就明白了。

转盘图只不过是两个元素，小程序跳转到外链和图片地址

1.设置数据

我在pages/test/test.js中添加了以下数据。

[javascript]查看普通副本//test.js

//获取应用程序实例

var app=getapp

页面({

数据： {

imgurls: [

{

link:'/pages/index/index '，url : ' http://img 02 . tooopen.com/images/2021 09 28/tooopen _ sy _ 143912755726 . jpg '

},{

link : '/页面/日志/日志'，url : ' http://img 06 . tooopen.com/images/2021 08 18/tooopen _ sy _ 175866434296 . jpg '

},{

link:'/pages/test/test '，url : ' http://img 06 . tooopen.com/images/2021 08 18/tooopen _ sy _ 175833047715 . jpg '

}

],

指示：为真，autoplay: true，interval: 5000，工期： 1000，userinfo: {}

},

onload:函数{

console . log(' on load test ')；

}

})

imgurls是在我们的旋转木马中使用的图片地址和跳转链接

指标是否有重点

自动播放是自动播放的吗

自动播放间隔

持续时间滑动动画时间

有关更多样式编辑，请参见文档https://mp.weixin.qq.com/debug/wxadoc/dev/component/wiper.html。t=1475052054228

2.部署到页面

找到文件pages/test/test.wxml

[html]查看普通副本

autoplay=' { { autoplay } } ' interval=' { { interval } } ' duration=' { { duration } } '；

注意：swiper不要在外面贴标签，例如，如果添加了标签，可能会导致转盘图无法显示出来

3.添加小程序页面样式

创建文件页面/test/test.wxss。

[css]查看普通副本。幻灯片-图像{

宽度：；

}

有了以上的款式，旋转木马的宽度可以达到然后更漂亮，当然要根据自己的喜好！

看到效果

关于小程序顶部转盘的设置和小程序顶部转盘的使用，上面说的很详细。怎么，你懂吗？更多相关信息，请关注源社网小节目频道。