实现微信小程序扫码，在PC端登陆并且自动跳转页面

最新推荐文章于 2026-05-15 06:55:32 发布

原创

最新推荐文章于 2026-05-15 06:55:32 发布 · 7.2k 阅读

标签

#微信小程序 #扫码登陆 #websocket

本文介绍了如何实现微信小程序扫码后在PC端登录并自动跳转相应页面。通过WebSocket连接，当微信小程序扫描二维码并验证身份后，服务器将验证结果实时发送给PC端，从而实现页面的自动跳转。文中详细阐述了实现过程，包括PC端生成二维码、建立WebSocket连接，微信小程序扫码获取标识并请求后台，以及后台的身份验证和信息传递。

通过微信小程序扫码，在PC端登陆跳转相应页面

最近在做一个零食店，移动端采用微信小程序进行实现。当然，既然是零食店，那么肯定会有后台管理的，当时的想法是如何才能通过微信小程序里进行扫码去登陆PC端的管理平台呢？话不多说，接下来就说说我是怎么做到！

首先，大致上讲一下我的实现思路，整体通过WebSocket来实现自动跳转。在PC登陆页，展示二维码，建立WebSocket连接，当微信小程序扫码后，在后台进行身份验证，并且将验证结果实时发送给在PC登陆页建立的websocket连接，然后进行相应信息的提示以及页面的跳转。
扫码登陆流程

生成PC端页面二维码这个二维码中放的什么信息呢，当时是能够唯一标识客户端的UUID啦，不然你扫码之后，应该给哪个客户端发送状态信息呢
进入PC端管理页时，获取唯一标识，建立websocket连接，并且以该唯一标识作为key存放在map集合当中。

pc端代码

 var websocket = null;
    var url="ws://localhost:8080/snacks/socketLogin/[[${socketKey}]]";
    if('WebSocket' in window)
        websocket = new WebSocket(url);
    else
        layer.msg("该浏览器暂不支持！请更换浏览器",{icon:2,time:1000})
    websocket.onopen = function () {
        
    }
    websocket.onclose = function () {
        layer.msg("连接失效，请刷新

最低0.47元/天解锁文章