微信登录功能-保姆级教学
目录
一、使用组件
二、登录功能
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网址编码、解码https://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…...
好数(蓝桥杯)
文章目录 好数题目描述暴力方法一暴力方法二(超时) 好数 题目描述 【问题描述】 一个整数如果按从低位到高位的顺序,奇数位(个位、百位、万位 )上的数字是奇数,偶数位(十位、千位、十万位 …...
自动化收集Unity版本更新日志
自动化收集Unity版本更新日志 🍥功能介绍🥪食用手册填写配置开始搜集 🍨数据展示 🍥功能介绍 💡获取指定年份中所有的Unity版本更新日志。 💡根据指定字符串过滤。 💡.收集后自动保存成markdow…...
【CSS】CSS水平居中方案
CSS水平居中方案 1. 行内元素水平居中 设置父元素的text-align:center .box {width: 300px;height: 300px;margin: 100px auto;text-align: center;background-color: pink; }2. 块级元素水平居中 当块级元素设置了明确的宽度数值时,可以使用margin: 0 auto 3.…...
SQL注入sqli_labs靶场第二题
解题思路与第一题相同 ?id1 and 11 和?id1 and 12进行测试如果11页面显示正常和原页面一样,并且12页面报错或者页面部分数据显示不正常,那么可以确定此处为数字型注入。 联合查询: 猜解列名数量:3 ?id1 order by 4 判断回显…...
基于机器学习的人脸发型推荐算法研究与应用实现
1.摘要 本文主要研究内容是开发一种发型推荐系统,旨在识别用户的面部形状,并根据此形状推荐最适合的发型。首先,收集具有各种面部形状的用户照片,并标记它们的脸型,如长形、圆形、椭圆形、心形或方形。接着构建一个面部…...
【服务器部署篇】Linux下Nginx的安装和配置
作者介绍:本人笔名姑苏老陈,从事JAVA开发工作十多年了,带过刚毕业的实习生,也带过技术团队。最近有个朋友的表弟,马上要大学毕业了,想从事JAVA开发工作,但不知道从何处入手。于是,产…...
React搭建一个文章后台管理系统
1、项目准备 本篇文章讲解的是一个简单的文章后台管理系统,系统的功能很简单,如下:登录、退出;首页;内容(文章)管理:文章列表、发布文章、修改文章。 1)React官方脚手架:create-rea…...
Elasticsearch 支持的插件 —— 筑梦之路
Analysis 插件: 1、IK Analyzer:适用于中文分词的插件,提供了针对中文文本的分析器。 2、Smart Chinese Analysis:另一个中文分词插件,支持中文智能分词。 集群管理插件: 1、Kibana:Elasticsear…...
HTML:链接
目录 一、超链接 二、 外联元素 一、<a>超链接 <a> 标签用于定义超链接,超链接可以让用户从一个网页跳转到另一个网页。 常用属性: href指定链接的目标地址。download表示链接是一个下载链接,指定下载的文件名。target 指定在…...
vscode远程连接centos
文章目录 vacode连接linux1. 安装插件2. 查看配置3. 打开ssh4. 远程连接 vacode连接linux 1. 安装插件 在扩展栏搜索remote ,找到Remote Development插件,进行安装: 2. 查看配置 打开自己的linux终端,输入ifconfig,…...
scala---面向对象(类,对象,继承,抽象类,特质)
一、类(class)和 对象(object) 1、类 类就是对客观的一类事物的抽象。用一个class关键字来描述和Java一样,在这个类中可以拥有这一类事物的属性,行为等等。 2、为什么要有对象 在java中的一个class既可…...
【机器学习300问】68、随机初始化神经网络权重的好处?
一、固定的初始化神经网络权重可能带来的问题 在训练神经网络的时候,初始化权重如果全部设置为0或某个过大值/过小值。会导致一些问题: 对称权重问题:全为0的初始化权重会导致神经网络在前向传播时接收到的信号输入相同。每个神经网络节点中…...
数据结构与算法——20.B-树
这篇文章我们来讲解一下数据结构中非常重要的B-树。 目录 1.B树的相关介绍 1.1、B树的介绍 1.2、B树的特点 2.B树的节点类 3.小结 1.B树的相关介绍 1.1、B树的介绍 在介绍B树之前,我们回顾一下我们学的树。 首先是二叉树,这个不用多说ÿ…...
Tomcat源码解析——Tomcat的启动流程
一、启动脚本 当我们在服务启动Tomcat时,都是通过执行startup.sh脚本启动。 在Tomcat的启动脚本startup.sh中,最终会去执行catalina.sh脚本,传递的参数是start。 在catalina.sh脚本中,前面是环境判断和初始化参数,最终…...
蓝桥杯真题演练:2023B组c/c++
日期统计 小蓝现在有一个长度为 100 的数组,数组中的每个元素的值都在 0 到 9 的范围之内。 数组中的元素从左至右如下所示: 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 …...
微信小程序实现预约生成二维码
业务需求:点击预约按钮即可生成二维码凭码入校参观~ 一.创建页面 如下是博主自己写的wxml: <swiper indicator-dots indicator-color"white" indicator-active-color"blue" autoplay interval"2000" circular > &…...
专业140+总分410+北京理工大学826信号处理导论考研经验北理工电子信息通信工程,真题,参考书,大纲。
今年考研专业课826信号处理导论(信号系统和数字信号处理)140,总分410,顺利上岸!回看去年将近一年的复习,还是记忆犹新,有不少经历想和大家分享,有得有失,希望可以对大家复…...
做一个后台项目的架构
后台架构的11个维度 架构1:团队协助基础工具链的选型和培训架构2:搭建微服务开发基础设施架构3:选择合适的RPC框架架构4:选择和搭建高可用的注册中心架构5:选择和搭建高可用的配置中心架构6:选择和搭建高性…...
嵌入式单片机 TTL电平、232电平、485电平的区别和联系
一、简介 TTL、232和485是常见的串口通信标准,它们在电平和通信方式上有所不同, ①一般情况下TTL电平应用于单片机外设,属于MCU/CPU等片外外设; ②232/485电平应用于产品整体对外的接口,一般是片外TTL串口转232/485…...
2024年大唐杯备考
努力更新中…… 第一章 网络架构和组网部署 1.1 5G的网络整体架构 5G网络中的中传、回传、前传(这里属于承载网的概念) CU和DU之间是中传 BBU和5GC之间是回传 BBU和AAU之间是前传(这个好记) 这里竟然还藏了MEC(…...
Spring Boot(06):Spring Boot与MySQL搭配,打造极简高效的数据管理系统
1. 前言 Spring Boot 是一个基于Spring框架的快速开发框架,可以使开发者快速搭建一个可靠的Java Web应用程序。而MySQL是最广泛使用的关系型数据库系统之一,也是Spring Boot整合数据库的首选。本文将介绍Spring Boot如何整合MySQL数据库。 2. 摘要 本文…...
Vue3 + Vite 构建组件库发布到 npm
你有构建完组件库后,因为不知道如何发布到 npm 的烦恼吗?本教程手把手教你用 Vite 构建组件库发布到 npm 搭建项目 这里我们使用 Vite 初始化项目,执行命令: pnpm create vite my-vue-app --template vue这里以我的项目 vue3-xm…...
Vite多环境配置与打包:灵活高效的Vue开发工作流
🌟 前言 欢迎来到我的技术小宇宙!🌌 这里不仅是我记录技术点滴的后花园,也是我分享学习心得和项目经验的乐园。📚 无论你是技术小白还是资深大牛,这里总有一些内容能触动你的好奇心。🔍 &#x…...
从零实现诗词GPT大模型:数据集介绍和预处理
专栏规划: https://qibin.blog.csdn.net/article/details/137728228 本章将介绍该系列文章中使用的数据集,并且编写预处理代码,处理成咱们需要的格式。 一、数据集介绍 咱们使用的数据集名称是chinese-poetry,是一个在github上开源的中文诗…...
45.HarmonyOS鸿蒙系统 App(ArkUI)创建列表(List)
列表是一种复杂的容器,当列表项达到一定数量,内容超过屏幕大小时,可以自动提供滚动功能。它适合用于呈现同类数据类型或数据类型集,例如图片和文本。在列表中显示数据集合是许多应用程序中的常见要求(如通讯录、音乐列…...
推荐算法之协同过滤
算法原理 透过百科,我们了解到协同过滤推荐(Collaborative Filtering recommendation)是在信息过滤和信息系统中正迅速成为一项很受欢迎的技术。与传统的基于内容过滤直接分析内容进行推荐不同,协同过滤算法结合用户行为分析用户…...
Kotlin 面试题
lifecycleScope.launchWhenResumed launchWhenResumed是一个扩展函数,它是LifecycleCoroutineScope的一部分,并且它是在Android的Lifecycle库中引入的。 这个函数的主要目的是在Lifecycle的对应组件(通常是Activity或Fragment)处于“resumed”状态时启动协程。 public fun …...
云服务器建设网站/软件开发公司有哪些
科目编号:0063 座位号 2017-2018学年度第二学期期末考试 中国现代文学专题 试题 2018年 7 月 一、简答题(共30分) 简要说明废名与许钦文、王鲁彦、台静农等乡土小说作家在创作上的不同。 二、分析题(共70分) 说明&am…...
中央党建网站党建文化建设点/我在百度下的订单如何查询
方法调用方式 在scala中,有以下几种方法调用方式, 后缀调用法 中缀调用法 花括号调用法 无括号调用法 在后续编写spark、flink程序时,我们会使用到这些方法调用方式 1、后缀调用法 这种方法与Java没有区别。 语法 scala 对象名.方法名(参数) …...
企业网站建设的上市公司/搜索网站
号外!加小编阿元微信号“rhyayuan”,受邀进入行业最大微信群——“润滑油聚焦油粉群‘’什么是国六?“国六”是大家对国家第六阶段机动车污染物排放标准的俗称。国六标准是对国五标准的升级,跟“国五”标准相比,“国六…...
不停弹窗的网站怎么做/什么叫友情链接
雷音是阿里巴巴研究员、淘系技术部 FashionAI 负责人,在淘系技术嘉年华硅谷站,他分享了《时尚电商新赛道— FashionAI 中的技术》 ,旨在揭秘:从面向机器学习的知识重建切入,提出了在 AI 能力的推动下,让人值…...
风铃网站具体是做那方面的/北京网站优化公司
在Linux当中有一些命令只有root账户才能使用,怎么样才能使普通的用户可以执行root权限的命令呢,就是要使用一个名字叫做sudo的命令,下面是对sudo命令的一些介绍sudo是linux系统管理指令,是允许系统管理员让普通用户执行一些或者全部的root命令的一个工具,…...
4线城市搞网站开发/滕州今日头条新闻
在 OpenBSD 的测试快照中加入了一个新的功能,每次当 OpenBSD 用户重启或升级计算机时都会创建一个独特的内核。该功能被称之为 KARL(内核地址随机化链接Kernel Address Randomized Link),即以随机的顺序重新链接其内部的内核文件&…...