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

微信登录功能-保姆级教学

目录

一、使用组件

二、登录功能

2.1 步骤

2.2 首先找到网页权限 复制demo 代码 这里我们需要修改两个参数

三、前端代码

3.1 api 里weiXinApi.ts

3.2 api里的 index.ts

3.3 pinia.ts

3.4 My.vue 

四、后端代码

4.1 WeiXinController

4.2 Access_Token.Java

4.3 WeiXinUser.java

五、效果图

5.1 登录之前效果图

5.2 登录之后效果图

六、源代码参考

6.1 前端源代码参考

6.2 后端源代码参考


一、使用组件

vant4:https://vant-contrib.gitee.io/vant/#/zh-CN

二、登录功能

2.1 步骤

想要点击微信登录四个字 跳转到登录页面

2.2 首先找到网页权限 复制demo 代码 这里我们需要修改两个参数

 applid(唯一id)和redirect_uri(授权后重定向的回调链接地址, 请使用 urlEncode 对链接进行处理)

其中applid 注册的时候已经给我们了

 比如说我们点击微信登录想要跳转到 http:h5.a.com/my 就可以用下面的编码工具进行编码,然后放到最初的demo链接里。UrlEncode - 在线URL网址编码、解码在线URL网址编码、解码icon-default.png?t=N7T8https://www.qianbo.com.cn/Tool/Url-Encode.html

点击 微信登录

  • 注意: 前端端口 最好设置为 80 否则很可能提示 redirect_uri参数错误!!!

三、前端代码

3.1 api 里weiXinApi.ts

import http from "@/http/index";
export default {getAccessToken: {name: "获取token",url: "/api/weixin/access_token",call: async function name(params: any = {}) {return await http.get(this.url, params);},},};

3.2 api里的 index.ts


import weiXinApi from "./weiXinApi";export {weiXinApi,};

3.3 pinia.ts

import { createPinia, defineStore } from "pinia";
import piniaPluginPersistedstate from "pinia-plugin-persistedstate";const pinia = createPinia();
pinia.use(piniaPluginPersistedstate);
export default pinia;const h5Store = defineStore("h5Store", {state: () => {return {//定义变量name: "微信登录",nickname:"",headimgurl:"https://img2.baidu.com/it/u=2092827811,169092614&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",openid:"",token: "",};},persist: {// 在这里进行自定义配置key: "h5Store",storage: localStorage, //将数据持久化到本地浏览器中},
});
export { h5Store };

3.4 My.vue 

<template><view class="image-container"><van-row><van-col  span="8"><van-imageroundwidth="10rem"height="10rem":src="h5_store.headimgurl"></van-image><div class="text-center"><!-- 1.微信登录获取code --><a href="https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxd7cd618e72d4f454&redirect_uri=http%3A%2F%2Fh5.a.com%2Fmy&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect">{{h5_store.name}}</a></div></van-col span="8"></van-row></view>
</template><script lang="ts" setup>
import { ref, onMounted } from "vue";
import {useRoute}  from "vue-router"
import {weiXinApi} from "@/api/index"
// 导入pinia
import { h5Store } from "@/store/pinia";
const h5_store=h5Store();
const route=useRoute();
onMounted(() => {// 第一步:获取code const {code ,state} = route.query;console.log(code);//091qixFa1lNlgH0dPlHa1XBkP43qixFsif(code!=undefined){weiXinApi.getAccessToken.call({code:code}).then((res:any)=>{// 登录成功获取用户的信息后 将头像和openid保存到store中console.log(res);h5_store.name=res.data.nickname;h5_store.headimgurl=res.data.headimgurl;h5_store.openid=res.data.openid;})}
});
</script>
<style lang="css" scoped>
/* 在wxss文件中 */
.image-container {position: relative;left: 25%; /* 水平居中 */align-items: center; /* 垂直居中,如果需要 */width: 100%; /* 或者设定一个固定的宽度以适应屏幕 */height: auto; /* 根据实际情况调整高度 */background-color:cyan
}
.text-center {position: relative; /* 开启相对定位 */left: 50%;display: inline-block; /* 可能需要这个来确保文本块可以在一行内显示 */
}
</style>

四、后端代码

4.1 WeiXinController


package com.by.controller;import cn.hutool.core.util.StrUtil;
import cn.hutool.http.HttpUtil;
import cn.hutool.json.JSONUtil;
import com.by.model.Access_Token;
import com.by.model.WeiXinUser;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;@RestController
@RequestMapping("/api/weixin")
public class WeiXinController {/*** 微信公众号注册后的appid和appsecret*/private String appID = "wxd7cd618e72d4f454";private String appsecret = "a939c776a064d8358ed66d9c68aeeded";@GetMapping("/access_token")public WeiXinUser getAccessToken(String code) {/*** 2. 通过code换取网页授权access_token*/String url = StrUtil.format("https://api.weixin.qq.com/sns/oauth2/access_token?appid={}&secret={}&code={}&grant_type=authorization_code",appID,appsecret,code);String body = HttpUtil.get(url);Access_Token access_token = JSONUtil.toBean(body, Access_Token.class);/*** 4. 获取用户信息*/url= StrUtil.format("https://api.weixin.qq.com/sns/userinfo?access_token={}&openid={}&lang=zh_CN",access_token.getAccess_token(),access_token.getOpenid());body= HttpUtil.get(url);WeiXinUser wanted_user =  JSONUtil.toBean(body, WeiXinUser.class);return wanted_user;}
}

4.2 Access_Token.Java


package com.by.model;import lombok.AllArgsConstructor;
import lombok.Builder;
import lombok.Data;
import lombok.NoArgsConstructor;@Data
@AllArgsConstructor
@NoArgsConstructor
@Builder
public class Access_Token {/*** 获取到的凭证*/private String access_token;private int expires_in;private String refresh_token;private String openid;}

4.3 WeiXinUser.java


package com.by.model;import lombok.AllArgsConstructor;
import lombok.Builder;
import lombok.Data;
import lombok.NoArgsConstructor;@Data
@AllArgsConstructor
@NoArgsConstructor
@Builder
public class WeiXinUser {private String openid;private String nickname;private int sex;private String province;private String city;private String country;private String headimgurl;private String privilege;private String unionid;
}

五、效果图

将头像和昵称和openid 存到pinia 中,当前端发出的请求被后端正常响应后 将图片和昵称从结果集中拿出来赋给pinia 里的头像和昵称

5.1 登录之前效果图

5.2 登录之后效果图

六、源代码参考

6.1 前端源代码参考

https://codeup.aliyun.com/62858d45487c500c27f5aab5/huang-h5-weixin.git

6.2 后端源代码参考

https://codeup.aliyun.com/62858d45487c500c27f5aab5/SpringBoot-WeiXin.git 

相关文章:

微信登录功能-保姆级教学

目录 一、使用组件 二、登录功能 2.1 步骤 2.2 首先找到网页权限 复制demo 代码 这里我们需要修改两个参数 三、前端代码 3.1 api 里weiXinApi.ts 3.2 api里的 index.ts 3.3 pinia.ts 3.4 My.vue 四、后端代码 4.1 WeiXinController 4.2 Access_Token.Java 4.3 We…...

嵌入式MCU BootLoader开发配置详细笔记教程

目录 一、BootLoader基础 二、BootLoader原理及配置 三、BootLoader程序 bootloader.h bootloader.c 四、Application1 用户程序 application1.h application1.c 五、Application2 用户程序 application2.h 六、程序运行效果 七、工程文件Demo 一、BootLoader基础 …...

Unity 中消息提醒框

Tooltip 用于ui布局 using System.Collections; using System.Collections.Generic; using UnityEngine; using TMPro; using UnityEngine.UI;[ExecuteInEditMode()] // 可以在编辑模式下运行public class Tooltip : MonoBehaviour {public TMP_Text header; // 头部文本publi…...

好数(蓝桥杯)

文章目录 好数题目描述暴力方法一暴力方法二&#xff08;超时&#xff09; 好数 题目描述 【问题描述】 一个整数如果按从低位到高位的顺序&#xff0c;奇数位&#xff08;个位、百位、万位 &#xff09;上的数字是奇数&#xff0c;偶数位&#xff08;十位、千位、十万位 …...

自动化收集Unity版本更新日志

自动化收集Unity版本更新日志 &#x1f365;功能介绍&#x1f96a;食用手册填写配置开始搜集 &#x1f368;数据展示 &#x1f365;功能介绍 &#x1f4a1;获取指定年份中所有的Unity版本更新日志。 &#x1f4a1;根据指定字符串过滤。 &#x1f4a1;.收集后自动保存成markdow…...

【CSS】CSS水平居中方案

CSS水平居中方案 1. 行内元素水平居中 设置父元素的text-align:center .box {width: 300px;height: 300px;margin: 100px auto;text-align: center;background-color: pink; }2. 块级元素水平居中 当块级元素设置了明确的宽度数值时&#xff0c;可以使用margin: 0 auto 3.…...

SQL注入sqli_labs靶场第二题

解题思路与第一题相同 ?id1 and 11 和?id1 and 12进行测试如果11页面显示正常和原页面一样&#xff0c;并且12页面报错或者页面部分数据显示不正常&#xff0c;那么可以确定此处为数字型注入。 联合查询&#xff1a; 猜解列名数量&#xff1a;3 ?id1 order by 4 判断回显…...

基于机器学习的人脸发型推荐算法研究与应用实现

1.摘要 本文主要研究内容是开发一种发型推荐系统&#xff0c;旨在识别用户的面部形状&#xff0c;并根据此形状推荐最适合的发型。首先&#xff0c;收集具有各种面部形状的用户照片&#xff0c;并标记它们的脸型&#xff0c;如长形、圆形、椭圆形、心形或方形。接着构建一个面部…...

【服务器部署篇】Linux下Nginx的安装和配置

作者介绍&#xff1a;本人笔名姑苏老陈&#xff0c;从事JAVA开发工作十多年了&#xff0c;带过刚毕业的实习生&#xff0c;也带过技术团队。最近有个朋友的表弟&#xff0c;马上要大学毕业了&#xff0c;想从事JAVA开发工作&#xff0c;但不知道从何处入手。于是&#xff0c;产…...

React搭建一个文章后台管理系统

1、项目准备 本篇文章讲解的是一个简单的文章后台管理系统&#xff0c;系统的功能很简单&#xff0c;如下&#xff1a;登录、退出&#xff1b;首页&#xff1b;内容(文章)管理&#xff1a;文章列表、发布文章、修改文章。 1&#xff09;React官方脚手架&#xff1a;create-rea…...

Elasticsearch 支持的插件 —— 筑梦之路

Analysis 插件&#xff1a; 1、IK Analyzer&#xff1a;适用于中文分词的插件&#xff0c;提供了针对中文文本的分析器。 2、Smart Chinese Analysis&#xff1a;另一个中文分词插件&#xff0c;支持中文智能分词。 集群管理插件&#xff1a; 1、Kibana&#xff1a;Elasticsear…...

HTML:链接

目录 一、超链接 二、 外联元素 一、<a>超链接 <a> 标签用于定义超链接&#xff0c;超链接可以让用户从一个网页跳转到另一个网页。 常用属性&#xff1a; href指定链接的目标地址。download表示链接是一个下载链接&#xff0c;指定下载的文件名。target 指定在…...

vscode远程连接centos

文章目录 vacode连接linux1. 安装插件2. 查看配置3. 打开ssh4. 远程连接 vacode连接linux 1. 安装插件 在扩展栏搜索remote &#xff0c;找到Remote Development插件&#xff0c;进行安装&#xff1a; 2. 查看配置 打开自己的linux终端&#xff0c;输入ifconfig&#xff0c;…...

scala---面向对象(类,对象,继承,抽象类,特质)

一、类&#xff08;class&#xff09;和 对象&#xff08;object&#xff09; 1、类 类就是对客观的一类事物的抽象。用一个class关键字来描述和Java一样&#xff0c;在这个类中可以拥有这一类事物的属性&#xff0c;行为等等。 2、为什么要有对象 在java中的一个class既可…...

【机器学习300问】68、随机初始化神经网络权重的好处?

一、固定的初始化神经网络权重可能带来的问题 在训练神经网络的时候&#xff0c;初始化权重如果全部设置为0或某个过大值/过小值。会导致一些问题&#xff1a; 对称权重问题&#xff1a;全为0的初始化权重会导致神经网络在前向传播时接收到的信号输入相同。每个神经网络节点中…...

数据结构与算法——20.B-树

这篇文章我们来讲解一下数据结构中非常重要的B-树。 目录 1.B树的相关介绍 1.1、B树的介绍 1.2、B树的特点 2.B树的节点类 3.小结 1.B树的相关介绍 1.1、B树的介绍 在介绍B树之前&#xff0c;我们回顾一下我们学的树。 首先是二叉树&#xff0c;这个不用多说&#xff…...

Tomcat源码解析——Tomcat的启动流程

一、启动脚本 当我们在服务启动Tomcat时&#xff0c;都是通过执行startup.sh脚本启动。 在Tomcat的启动脚本startup.sh中&#xff0c;最终会去执行catalina.sh脚本&#xff0c;传递的参数是start。 在catalina.sh脚本中&#xff0c;前面是环境判断和初始化参数&#xff0c;最终…...

蓝桥杯真题演练:2023B组c/c++

日期统计 小蓝现在有一个长度为 100 的数组&#xff0c;数组中的每个元素的值都在 0 到 9 的范围之内。 数组中的元素从左至右如下所示&#xff1a; 5 6 8 6 9 1 6 1 2 4 9 1 9 8 2 3 6 4 7 7 5 9 5 0 3 8 7 5 8 1 5 8 6 1 8 3 0 3 7 9 2 7 0 5 8 8 5 7 0 9 9 1 9 4 4 6 8 6 3 …...

微信小程序实现预约生成二维码

业务需求&#xff1a;点击预约按钮即可生成二维码凭码入校参观~ 一.创建页面 如下是博主自己写的wxml&#xff1a; <swiper indicator-dots indicator-color"white" indicator-active-color"blue" autoplay interval"2000" circular > &…...

专业140+总分410+北京理工大学826信号处理导论考研经验北理工电子信息通信工程,真题,参考书,大纲。

今年考研专业课826信号处理导论&#xff08;信号系统和数字信号处理&#xff09;140&#xff0c;总分410&#xff0c;顺利上岸&#xff01;回看去年将近一年的复习&#xff0c;还是记忆犹新&#xff0c;有不少经历想和大家分享&#xff0c;有得有失&#xff0c;希望可以对大家复…...

Vim 调用外部命令学习笔记

Vim 外部命令集成完全指南 文章目录 Vim 外部命令集成完全指南核心概念理解命令语法解析语法对比 常用外部命令详解文本排序与去重文本筛选与搜索高级 grep 搜索技巧文本替换与编辑字符处理高级文本处理编程语言处理其他实用命令 范围操作示例指定行范围处理复合命令示例 实用技…...

Linux 文件类型,目录与路径,文件与目录管理

文件类型 后面的字符表示文件类型标志 普通文件&#xff1a;-&#xff08;纯文本文件&#xff0c;二进制文件&#xff0c;数据格式文件&#xff09; 如文本文件、图片、程序文件等。 目录文件&#xff1a;d&#xff08;directory&#xff09; 用来存放其他文件或子目录。 设备…...

【JavaEE】-- HTTP

1. HTTP是什么&#xff1f; HTTP&#xff08;全称为"超文本传输协议"&#xff09;是一种应用非常广泛的应用层协议&#xff0c;HTTP是基于TCP协议的一种应用层协议。 应用层协议&#xff1a;是计算机网络协议栈中最高层的协议&#xff0c;它定义了运行在不同主机上…...

【力扣数据库知识手册笔记】索引

索引 索引的优缺点 优点1. 通过创建唯一性索引&#xff0c;可以保证数据库表中每一行数据的唯一性。2. 可以加快数据的检索速度&#xff08;创建索引的主要原因&#xff09;。3. 可以加速表和表之间的连接&#xff0c;实现数据的参考完整性。4. 可以在查询过程中&#xff0c;…...

基于uniapp+WebSocket实现聊天对话、消息监听、消息推送、聊天室等功能,多端兼容

基于 ​UniApp + WebSocket​实现多端兼容的实时通讯系统,涵盖WebSocket连接建立、消息收发机制、多端兼容性配置、消息实时监听等功能,适配​微信小程序、H5、Android、iOS等终端 目录 技术选型分析WebSocket协议优势UniApp跨平台特性WebSocket 基础实现连接管理消息收发连接…...

CMake基础:构建流程详解

目录 1.CMake构建过程的基本流程 2.CMake构建的具体步骤 2.1.创建构建目录 2.2.使用 CMake 生成构建文件 2.3.编译和构建 2.4.清理构建文件 2.5.重新配置和构建 3.跨平台构建示例 4.工具链与交叉编译 5.CMake构建后的项目结构解析 5.1.CMake构建后的目录结构 5.2.构…...

spring:实例工厂方法获取bean

spring处理使用静态工厂方法获取bean实例&#xff0c;也可以通过实例工厂方法获取bean实例。 实例工厂方法步骤如下&#xff1a; 定义实例工厂类&#xff08;Java代码&#xff09;&#xff0c;定义实例工厂&#xff08;xml&#xff09;&#xff0c;定义调用实例工厂&#xff…...

Spring AI 入门:Java 开发者的生成式 AI 实践之路

一、Spring AI 简介 在人工智能技术快速迭代的今天&#xff0c;Spring AI 作为 Spring 生态系统的新生力量&#xff0c;正在成为 Java 开发者拥抱生成式 AI 的最佳选择。该框架通过模块化设计实现了与主流 AI 服务&#xff08;如 OpenAI、Anthropic&#xff09;的无缝对接&…...

【开发技术】.Net使用FFmpeg视频特定帧上绘制内容

目录 一、目的 二、解决方案 2.1 什么是FFmpeg 2.2 FFmpeg主要功能 2.3 使用Xabe.FFmpeg调用FFmpeg功能 2.4 使用 FFmpeg 的 drawbox 滤镜来绘制 ROI 三、总结 一、目的 当前市场上有很多目标检测智能识别的相关算法&#xff0c;当前调用一个医疗行业的AI识别算法后返回…...

Reasoning over Uncertain Text by Generative Large Language Models

https://ojs.aaai.org/index.php/AAAI/article/view/34674/36829https://ojs.aaai.org/index.php/AAAI/article/view/34674/36829 1. 概述 文本中的不确定性在许多语境中传达,从日常对话到特定领域的文档(例如医学文档)(Heritage 2013;Landmark、Gulbrandsen 和 Svenevei…...