当前位置：首页 > news >正文

前端视角中的微信登录

news 2026/1/18 19:06:43

引入

本文主要讲解网站应用中微信登录的具体流程是怎么样的，以及作为前端开发人员在这整个流程中的主要任务是什么。

如果想要实现微信登录的功能，需要开发人员到微信开放平台注册相应的账号，进行注册应用（需要300￥），获取相应的id和密钥，以及进行设置授权的回调域。在此过程中涉及到了，微信用户，第三方应用，以及微信开放平台。现在以开发人员的角度来详细地介绍实现微信登录的整个流程：

流程介绍

1️⃣前端开发人员需要引入微信提供生成二维码的核心插件。这时候可以到官方提供的文档中就行查看。然后编写生成二维码的代码，这部分的代码同样在官方的文档里面有提供，这部分的代码功能主要是用户点击登录按钮之后，会向微信的服务器发一个请求，请求成功之后微信服务器会向前端页面返回一张微信登录二维码的图片。

2️⃣二维码生成之后微信服务器会进行使用长轮询会问用户是否授权了，若用户授权成功，则微信服务器就会向我们项目的后台服务器发送一个用户授权成功的唯一标识code。

3️⃣若后台收到了code，则后台会向微信的服务器发送请求带上code+appid+secret，然后微信服务器会向后台服务器返回access_token。

4️⃣后台获取到access_token之后再向微信的服务器通过snaspi_uerinfo请求地址携带获取到的token发请求，微信服务器则返回相应的用户信息。

5️⃣然后后台服务器获取到用户信息之后，会进行重定向到前端的某一个页面，通过query参数将用户信息注入给前端。前端拿到数据之后进行展示即可。整体的流程就是这样。

具体实现

以下我结合我之前做的商医通项目来进行展示在微信登录功能中作为前端开发的角色需要完成的任务。

首先在文件的静态页面中引入微信扫码登录需要的核心插件wxlogin.js。

<html lang="en"><head><meta charset="UTF-8" /><link rel="icon" type="image/svg+xml" href="/vite.svg" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>尚医通</title><script src="http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js"></script></head><body><div id="app"></div><script type="module" src="/src/main.ts"></script></body>
</html>

第二步在需要使用微信登录的地方实例一个官方文档提供给我们的js对象。

var obj = new WxLogin({self_redirect:true,id:"login_container", appid: "", scope: "", redirect_uri: "",state: "",style: "",href: ""});

在这个项目点击登录是默认弹出的页面是手机登录的页面，因此点击底下的微信小图标来进行场景的切换，从手机登录到微信登录。因此在相应的切换场景中使用上述的js对象。

因此对微信扫描登录以及低下的微信小图标封装到一个盒子里面，给这个盒子绑定相应的事件，当点击时进行场景的切换以及定义一个WxLogin对象。

const changeScene = async () => {scene.value = 1;new WxLogin({self_redirect: true,id: "login_container",//appid需要向服务器发请求之后得到appid: "",scope: "snsapi_login",//填写授权回调域路径，就是用户授权成功以后，微信服务器向公司后台推送code的地址redirect_uri: "",//statue就是后台服务器重定向的地址携带用户信息state: "",style: "black",href: "",});
}

相应的实例参数说明表格如下：

参数	是否必须	说明
self_redirect	否	true：手机点击确认登录后可以在 iframe 内跳转到 redirect_uri，false：手机点击确认登录后可以在 top window 跳转到 redirect_uri。默认为 false。
id	是	第三方页面显示二维码的容器id
appid	是	应用唯一标识，在微信开放平台提交应用审核通过后获得
scope	是	应用授权作用域，拥有多个作用域用逗号（,）分隔，网页应用目前仅填写snsapi_login即可
redirect_uri	是	重定向地址，需要进行UrlEncode
state	否	用于保持请求和回调的状态，授权请求后原样带回给第三方。该参数可用于防止csrf攻击（跨站请求伪造攻击），建议第三方带上该参数，可设置为简单的随机数加session进行校验
style	否	提供"black"、"white"可选，默认为黑色文字描述。详见文档底部FAQ
href	否	自定义样式链接，第三方可根据实际需求覆盖默认样式。详见文档底部FAQ

以上的参数 id为显示二维码的容器id，因此需要在顶部是设置一个专门存放二维码的容器，相应代码如下：

     <div class="webchat" v-show="scene == 1"><div id="login_container"></div></div>

appid，redirect_uri，以及state在这个项目中需要向后台服务器发送请求，因此找到后台服务器中对应的接口，发请求获取相应参数的数值，因为本项目是使用typescript编写的，因此需要首先编写返回的数据的类型，对其先进行定义，再编写相应的接口函数。相应代码如下：

export interface WXLogin{"redirectUri":string,"appid": string,"scope": string,"state": string
}

import request from '@/utils/request';
import type { WXLoginResponseData } from './type'
enum API {WXLOGIN_URL = '/user/weixin/getLoginParam/'
}
export const reqWxLogin = (wxRedirectUri: string) => request.get<any, WXLoginResponseData>(API.WXLOGIN_URL + `?wxRedirectUri=${wxRedirectUri}`);

接口封装好了之后在相应的组件页面上发请求，在我们点击微信登录的图标之后发请求，因此在我们上面的changScene方法中在增加如下代码：

const changeScene = async () => {let redirect_URL = encodeURIComponent(window.location.origin + '/wxlogin');let result: WXLoginResponseData = await reqWxLogin(redirect_URL);
}

此部分主要完成向后端服务器发请求，获取微信扫描登录页面的参数，发请求的同时还需要携带一个参数：redirect_URL，告诉服务器用户授权成功以后重定向项目到某个页面，我们上述代码是重定向到/wxlogin页面，后台服务器会将用户的数据注入到/wxlogin页面中。因此changScene()完整的代码如下：

const changeScene = async () => {scene.value = 1;let redirect_URL = encodeURIComponent(window.location.origin + '/wxlogin');let result: WXLoginResponseData = await reqWxLogin(redirect_URL);new WxLogin({self_redirect: true,id: "login_container",appid: result.data.appid,scope: "snsapi_login",redirect_uri: result.data.redirectUri,state: result.data.state,style: "black",href: "",});
}

因此现在点击相应的微信登录页面，会使用iframe内嵌生成的二维码到页面的容器中。

接下来我们需要创建一个页面来让后台服务器重定向时通过query参数注入相应的用户信息，我们上述的代码已经指定重定向到了welogin页面上了，因此在pages文件夹下进行创建。并在路由配置文件中进行设置（此部分的代码就不展示了）。welogin页面的代码如下：

<template><div></div>
</template><script setup lang="ts">
//获取用户信息
import {useRoute} from 'vue-router';
//获取路由对象
let $route=useRoute();
//持久化存储用户信息
localStorage.setItem('USERINFO',JSON.stringify($route.query));
//当微信登录成功时，会有短暂的该容器显示重定向的页面，会影响视觉效果，因此对其进行隐藏
let html:any=document.querySelector('html');
html.style.display='none';
</script><style scoped>
</style>

此部分主要是通过路由来获取到后台服务器重定向返回的用户信息，并将获取到的用户信息进行持久化的存储。之后需要做的就是关闭登录界面，同时仓库中也需要存一份用户的信息。那具体如何实现后面的功能呢？

在这个项目中是通过切换场景为微信扫码时，进行判断本地的存储是否有用户的信息，若有则关闭相应的登录界面并存储到对应的仓库中，并展示数据。我们使用到watch来进行监听场景的切换。相应代码如下：

watch(()=>scene.value,(val:number)=>{if(val===1){userStore.queryState();}
})

在watch（）中使用了queryState（）方法，该方法编写在用户的仓库中，具体的方法如下：

 queryState(){let timer=setInterval(()=>{if(localStorage.getItem('USERINFO')){this.visiable=false;this.userInfo=JSON.parse(localStorage.getItem('USERINFO') as string);clearInterval(timer);}},1000);}

该方法主要是查询用户是否扫描成功，每隔一秒调用一次，如果有用户的信息，则将登录页面关闭，并将用户信息存储到仓库中，若没有则会在一秒之后再次判断。最后相应的页面获取仓库中的信息进行展示。

好啦！本次的文章就到这里了，期待下一次的见面！

前端视角中的微信登录

目录引入流程介绍具体实现引入本文主要讲解网站应用中微信登录的具体流程是怎么样的，以及作为前端开发人员在这整个流程中的主要任务是什么。如果想要实现微信登录的功能，需要开发人员到微信开放平台注册相应的账号，进行注册应用&am…...

编程日记 2023/11/11 9:50:54

Python 中使用 Selenium 隐式等待

selenium 包用于使用 Python 脚本进行自动化和测试。我们可以使用它来访问网页中的各个元素并使用它们。该包中有许多方法可用于根据不同属性检索元素。加载页面时，会动态检索一些元素。与其他元素相比，这些元素的加载速度可能不同。 Python 中使用…...

编程日记 2023/11/11 9:49:53

GEE：基于 Landsat 计算的 kNDVI 应用 APP

作者：CSDN @ _养乐多_ 本文记录了在Google Earth Engine（GEE）平台中，使用 Landsat 遥感数据计算 kNDVI 的应用 APP 链接，并介绍该 APP 的使用方法和步骤。该APP可以为用户展示 NDVI 和 kNDVI 的遥感影像，进行对比分析。该 APP 在 Google Earth Engine（GEE）平台中实现。…...

编程日记 2023/11/11 9:48:52

Spring 缓存注解

Spring Cache 框架给我们提供了 Cacheable 注解用于缓存方法返回内容。但是 Cacheable 注解不能定义缓存有效期。这样的话在一些需要自定义缓存有效期的场景就不太实用。按照 Spring Cache 框架给我们提供的 RedisCacheManager 实现，只能在全局设置缓存有效期。这…...

编程日记 2023/11/11 9:47:52

微信小程序前端开发

目录前言： 1. 框架选择和项目搭建 2. 小程序页面开发 3. 数据通信和接口调用 4. 性能优化和调试技巧 5. 小程序发布和上线前言： 当谈到微信小程序前端开发时，我们指的是使用微信小程序框架进行开发的一种方式。在本文中，我…...

编程日记 2023/11/11 9:46:50

C# OpenCvSharp DNN HybridNets 同时处理车辆检测、可驾驶区域分割、车道线分割

效果项目代码 using OpenCvSharp; using OpenCvSharp.Dnn; using System; using System.Collections.Generic; using System.Drawing; using System.IO; using System.Linq; using System.Numerics; using System.Text; using System.Windows.Forms;namespace OpenCvSharp_D…...

编程日记 2023/11/11 9:45:49

无需开发，精臣云可轻松连接用户运营、广告推广等行业应用

精臣智慧标识科技有限公司简介武汉精臣智慧标识科技有限公司，是国内便携式标签打印机创新品牌和实物管理解决方案服务商。在物品标签还处在繁琐的PC打印时代，精臣公司便创造性地从智能便携角度出发，顺应移动互联时代趋势，推出了…...

编程日记 2023/11/11 9:44:48

第三阶段第一章——PySpark实战

学习了这么多python的知识，是时候来搞点真玩意儿了~~ 春风得意马蹄疾，一日看尽长安花 o(*￣︶￣*)o 1.前言介绍 （1）什么是spark Apache Spark是一个开源的分布式计算框架，用于处理大规模数据集的…...

编程日记 2023/11/11 9:43:46

Python数据容器（字符串）

字符串 1.字符串字符串也是数据容器的一种，字符串是字符的容器，一个字符串可以存放任意数量的字符。 2.字符串的下标索引从前向后，下标从0开始从后向前，下标从-1开始 # 通过下标索引获取特定位置的字符 name python print(na…...

编程日记 2023/11/11 9:42:45

Python---练习：把8名讲师随机分配到3个教室

案例：把8名讲师随机分配到3个教室列表嵌套：有3个教室[[],[],[]]，8名讲师[A,B,C,D,E,F,G,H]，将8名讲师随机分配到3个教室中。分析： 思考1：我们第一间教室、第二间教室、第三间教室，怎么表示…...

编程日记 2023/11/11 9:41:44

python+requests接口自动化测试

原来的web页面功能测试转变成接口测试，之前大多都是手工进行，利用postman和jmeter进行的接口测试，后来，组内有人讲原先web自动化的测试框架移驾成接口的自动化框架，使用的是java语言，但对于一个学java&…...

编程日记 2023/11/11 9:40:43

【T3】畅捷通T3采购管理模块反结账，提示：本年数据已经结转，不能取消结账。

【问题描述】使用畅捷通T3软件过程中， 针对以前年度进行反结账过程中，遇到采购管理模块取消12月份结账， 提示：本年数据已经结转，不能取消结账。【分析需求】按正常逻辑，需要清空新年度数据&#xff0c…...

编程日记 2023/11/11 9:39:42

线性代数（五） | 矩阵对角化特征值特征向量

文章目录 1 矩阵的特征值和特征向量究竟是什么？2 求特征值和特征向量3 特征值和特征向量的应用4 矩阵的对角化 1 矩阵的特征值和特征向量究竟是什么？ 矩阵实际上是一种变换,是一种旋转伸缩变换（方阵） 不是方阵的话还有可能是一种…...

编程日记 2023/11/11 9:38:40

读书笔记：彼得·德鲁克《认识管理》第12章服务机构的绩效管理

一、章节内容概述要提高服务机构和服务部门的绩效水平，需要的不是天才，相反，首先需要的是清晰的目标和任务，其次是把资源集中用于优先事项，再次需要明确的成果衡量标准，最后需要系统性地抛弃过时的目标和…...

编程日记 2023/11/11 9:37:39

基于FPGA的模板匹配红外目标跟踪算法设计

为什么要写这篇文章我写这篇文章的原因是一天在B站看到了一个大神发的视频是关于跟踪一个无人机的，看到作者跟网友的回复说是用的图像匹配算法，我就在网上搜索相关资料，最终找到一篇文献。文献中对该算法的评价很高，满足制导系统…...

编程日记 2023/11/11 9:36:38

ZYNQ通过AXI DMA实现PL发送连续大量数据到PS DDR

硬件：ZYNQ7100 软件：Vivado 2017.4、Xilinx SDK 2017.4 ZYNQ PL 和 PS 的通信方式有 AXI GPIO、BRAM、DDR等。对于数据量较少、地址不连续、长度规则的情况，BROM 比较适用。而对于传输速度要求高、数据量大、地址连续的情况，比…...

编程日记 2023/11/11 9:35:37

用于强化学习的置换不变神经网络

一、介绍如果强化学习代理提供的输入在训练中未明确定义，则通常表现不佳。一种新方法使 RL 代理能够正常运行，即使受到损坏、不完整或混乱的输入的影响也是如此。 “大脑能够使用来自皮肤的信息，就好像它来自眼睛一样。我们不是用眼睛看&…...

编程日记 2023/11/11 9:33:34

【华为OD题库-008】座位调整-Java

题目疫情期间课堂的座位进行了特殊的调整，不能出现两个同学紧挨着，必须隔至少一个空位。给你一个整数数组desk表示当前座位的占座情况，由若干0和1组成，其中0表示没有占位，1表示占位。在不改变原有座位秩序情况下&…...

编程日记 2023/11/11 9:32:33

4 Paimon数据湖之Hive Catalog的使用

更多Paimon数据湖内容请关注：https://edu.51cto.com/course/35051.html Paimon提供了两种类型的Catalog：Filesystem Catalog和Hive Catalog。 Filesystem Catalog：会把元数据信息存储到文件系统里面。Hive Catalog：则会把元数据…...

编程日记 2023/11/11 9:31:32

Verilog刷题[hdlbits] ：Bcdadd100

题目：Bcdadd100 You are provided with a BCD one-digit adder named bcd_fadd that adds two BCD digits and carry-in, and produces a sum and carry-out. 为您提供了一个名为bcd_fadd的BCD一位数加法器，它将两个BCD数字相加并带入，并生…...

编程日记 2023/11/11 9:30:31

前端倒计时误差!

提示：记录工作中遇到的需求及解决办法文章目录前言一、误差从何而来？二、五大解决方案1. 动态校准法（基础版）2. Web Worker 计时3. 服务器时间同步4. Performance API 高精度计时5. 页面可见性API优化三、生产环境最佳实践四、终极解决方案架构前言前几天听说公司某个项…...

编程新知 2025/9/8 23:14:43

Java如何权衡是使用无序的数组还是有序的数组

在 Java 中，选择有序数组还是无序数组取决于具体场景的性能需求与操作特点。以下是关键权衡因素及决策指南： ⚖️ 核心权衡维度维度有序数组无序数组查询性能二分查找 O(log n) ✅线性扫描 O(n) ❌插入/删除需移位维护顺序 O(n) ❌直接操作尾部 O(1) ✅内存开销与无序数组相…...

编程新知 2025/8/3 11:17:37

YSYX学习记录（八）

C语言，练习0： 先创建一个文件夹，我用的是物理机： 安装build-essential 练习1： 我注释掉了 #include <stdio.h> 出现下面错误在你的文本编辑器中打开ex1文件，随机修改或删除一部分，之后…...

编程新知 2026/1/15 5:23:34

dedecms 织梦自定义表单留言增加ajax验证码功能

增加ajax功能模块，用户不点击提交按钮，只要输入框失去焦点，就会提前提示验证码是否正确。一，模板上增加验证码 <input name"vdcode"id"vdcode" placeholder"请输入验证码" type"text&quo…...

编程新知 2026/1/15 6:35:49

如何将联系人从 iPhone 转移到 Android

从 iPhone 换到 Android 手机时，你可能需要保留重要的数据，例如通讯录。好在，将通讯录从 iPhone 转移到 Android 手机非常简单，你可以从本文中学习 6 种可靠的方法，确保随时保持连接，不错过任何信息。第 1…...

编程新知 2026/1/15 8:53:18

【学习笔记】深入理解Java虚拟机学习笔记——第4章虚拟机性能监控，故障处理工具

第2章虚拟机性能监控，故障处理工具 4.1 概述略 4.2 基础故障处理工具 4.2.1 jps:虚拟机进程状况工具命令：jps [options] [hostid] 功能：本地虚拟机进程显示进程ID（与ps相同），可同时显示主类&#x…...

编程新知 2026/1/15 1:34:10

selenium学习实战【Python爬虫】

selenium学习实战【Python爬虫】文章目录 selenium学习实战【Python爬虫】一、声明二、学习目标三、安装依赖3.1 安装selenium库3.2 安装浏览器驱动3.2.1 查看Edge版本3.2.2 驱动安装四、代码讲解4.1 配置浏览器4.2 加载更多4.3 寻找内容4.4 完整代码五、报告文件爬取5.1 提…...

编程新知 2026/1/17 15:30:03

Python 包管理器 uv 介绍

Python 包管理器 uv 全面介绍 uv 是由 Astral（热门工具 Ruff 的开发者）推出的下一代高性能 Python 包管理器和构建工具，用 Rust 编写。它旨在解决传统工具（如 pip、virtualenv、pip-tools）的性能瓶颈，同时…...

编程新知 2025/12/12 23:11:21

scikit-learn机器学习

# 同时添加如下代码, 这样每次环境(kernel)启动的时候只要运行下方代码即可: # Also add the following code, # so that every time the environment (kernel) starts, # just run the following code: import sys sys.path.append(/home/aistudio/external-libraries)机…...

编程新知 2025/7/5 19:39:42

微服务通信安全：深入解析mTLS的原理与实践

🔥「炎码工坊」技术弹药已装填！ 点击关注 → 解锁工业级干货【工具实测|项目避坑|源码燃烧指南】一、引言：微服务时代的通信安全挑战随着云原生和微服务架构的普及，服务间的通信安全成为系统设计的核心议题。传统的单体架构中&…...

编程新知 2025/12/14 16:22:05

目录

引入

流程介绍

具体实现

相关文章：