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

目录

一、使用组件

二、登录功能

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 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/816710.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【5G PHY】5G无线链路监测原理简述

博主未授权任何人或组织机构转载博主任何原创文章&#xff0c;感谢各位对原创的支持&#xff01; 博主链接 本人就职于国际知名终端厂商&#xff0c;负责modem芯片研发。 在5G早期负责终端数据业务层、核心网相关的开发工作&#xff0c;目前牵头6G算力网络技术标准研究。 博客…

Tool:VRAM的简介、查询电脑VRAM的常用方法

Tool&#xff1a;VRAM的简介、查询电脑VRAM的常用方法 目录 VRAM的简介 查询电脑VRAM的常用方法 1、对于Windows系统 T1、设置-系统-显示查询法 T2、使用 DirectX 诊断工具&#xff1a; T3、使用系统信息工具&#xff1a; 2、对于Linux系统 T1、使用nvidia-smi命令&…

基于SpringBoot+Mybatis框架的私人影院预约系统(附源码,包含数据库文件)

基于SpringBootMybatis框架的私人影院预约系统&#xff0c;附源码&#xff0c;包含数据库文件。 非常完整的一个项目&#xff0c;希望能对大家有帮助哈。 本系统的完整源码以及数据库文件都在文章结尾处&#xff0c;大家自行获取即可。 项目简介 该项目设计了基于SpringBoo…

vue2+Echart 实现柱状图和折线图组合样式

示例图&#xff1a; 实现代码&#xff1a; BarLineChart.vue <!-- 库存周转率 --> <template><div :class"className" :style"{height:height,width:width}"/> </template><script > import * as echarts from echarts r…

云笔记小程序的实现

1.前言 云笔记, 是基于HotApp小程序统计云后台提供的api接口开发的一个微信小程序。 2.功能 离线保存笔记 云端数据同步, 更换了设备也可以找到以前的笔记 接入了好推二维码提供的数据统计工具, 可以到平台上查看用户分析、留存分析、事件分析。 3.界面效果 ***HotApp云笔…

ZYNQ-Vitis(SDK)裸机开发之(四)PS端MIO和EMIO的使用

目录 一、ZYNQ中MIO和EMIO简介 二、Vivado中搭建block design 1.配置PS端MIO&#xff1a; 2.配置PS端EMIO&#xff1a; 三、Vitis中新建工程进行GPIO控制 1. GPIO操作头文件gpio_hdl.h&#xff1a; 2.GPIO操作源文件gpio_hdl.c&#xff1a; 3.main函数进行调用 例程开发…

ssm049基于Vue.js的在线购物系统的设计与实现+vue

在线购物系统 摘 要 随着科学技术的飞速发展&#xff0c;各行各业都在努力与现代先进技术接轨&#xff0c;通过科技手段提高自身的优势&#xff1b;对于在线购物系统当然也不能排除在外&#xff0c;随着网络技术的不断成熟&#xff0c;带动了在线购物系统&#xff0c;它彻底改…

力扣 | 24. 两两交换链表中的节点

两两交换链表中的节点 给定一个链表&#xff0c;两两交换其中相邻的节点&#xff0c;并返回交换后的链表。 你不能只是单纯的改变节点内部的值&#xff0c;而是需要实际的进行节点交换。 输入&#xff1a;head 1->2->3->4->5->NULL 输出&#xff1a;2->1-&g…

电商技术揭秘二十三:智能物流优化与效率提升

相关系列文章 电商技术揭秘一&#xff1a;电商架构设计与核心技术 电商技术揭秘二&#xff1a;电商平台推荐系统的实现与优化 电商技术揭秘三&#xff1a;电商平台的支付与结算系统 电商技术揭秘四&#xff1a;电商平台的物流管理系统 电商技术揭秘五&#xff1a;电商平台…

web3项目自动连接小狐狸以及小狐狸中的各种“地址”详解

刚做web3的时候&#xff0c;比较迷糊的就是人们口中说的各种地址&#xff0c;小狐狸钱包地址&#xff0c;私钥地址&#xff0c;跳转地址&#xff0c;接口地址&#xff0c;交易地址&#xff0c;等等XX地址&#xff0c;常常感觉跟做链的同事们说话不在一个频道。 这一小节&#x…

Linux的学习之路:10、进程(2)

摘要 本章主要是说一下fork的一些用法、进程状态、优先级和环境变量。 目录 摘要 一、fork 1、fork的基本用法 2、分流 二、进程状态 三、优先级 四、环境变量 1、常见环境变量 2、和环境变量相关的命令 3、通过代码如何获取环境变量 五、导图 一、fork 1、fork…

《自动机理论、语言和计算导论》阅读笔记:p172-p224

《自动机理论、语言和计算导论》学习第 8 天&#xff0c;p172-p224总结&#xff0c;总计 53 页。 一、技术总结 1.Context-Free Grammar(CFG) 2.parse tree (1)定义 p183&#xff0c;But perhaps more importantly, the tree, known as a “parse tree”, when used in a …

事务隔离级别的无锁实现方式 -- MVCC

MVCC的全称是Multiversion Concurrency Control(多版本并发控制器)&#xff0c;是一种事务隔离级别的无锁的实现方式&#xff0c;用于提高事务的并发性能&#xff0c;即事务隔离级别的一种底层实现方式。 在了解MVCC之前&#xff0c;我们先来回顾一些简单的知识点&#xff1a;…

基于单片机和安卓平台的移动物联网应用开发实训系统设计

摘要:文章介绍了一种采用单片机和安卓移动设备构建移动物联网应用开发实训系统的方法。并基于该系统完成了实训的项目设计,实现了通过手机远程获取单片机上的传感器数据以及远程控制单片机上的开关设备等典型的物联网应用。 关键词:单片机;传感器;安卓应用开发 1 物联网应…

伺服驱动器算法入门的一些建议和书籍推荐

希望此篇文章对想从事伺服驱动器的研发工作的一些刚刚入门的同学一些建议。 针对伺服驱动器的研发工作涉及的知识和需要掌握的技能主要分为两部分&#xff0c;第一是原理部分、第二是工程实践部分。原理部分的学习在此主要推荐大家查看一些入门书籍&#xff0c;本文章中也对书籍…

【opencv】示例-travelsalesman.cpp 使用模拟退火算法求解旅行商问题

// 载入 OpenCV 的核心头文件 #include <opencv2/core.hpp> // 载入 OpenCV 的图像处理头文件 #include <opencv2/imgproc.hpp> // 载入 OpenCV 的高层GUI(图形用户界面)头文件 #include <opencv2/highgui.hpp> // 载入 OpenCV 的机器学习模块头文件 #includ…

陇剑杯 ios 流量分析

陇剑杯 ios 流量分析 ios 一位ios的安全研究员在家中使用手机联网被黑&#xff0c;不仅被窃密还丢失比特币若干&#xff0c;根据流量分析完成ios1-8 ios 1 ios-1&#xff1a;黑客所控制的C&C服务器IP是_____________。 什么是C&C服务器? C&C&#xff08;Com…

MATLAB GUI图形化界面设计计算器

MATLAB GUI界面设计教程可以帮助用户创建交互式的图形用户界面&#xff0c;以简化与MATLAB程序的交互过程。以下是一个简化的教程&#xff0c;指导你如何进行MATLAB GUI界面设计&#xff1a; 1. 启动GUIDE或App Designer GUIDE&#xff1a;在MATLAB命令窗口中输入guide命令&a…

44.HarmonyOS鸿蒙系统 App(ArkUI)栅格布局介绍

栅格布局是一种通用的辅助定位工具&#xff0c;对移动设备的界面设计有较好的借鉴作用。主要优势包括&#xff1a; 提供可循的规律&#xff1a;栅格布局可以为布局提供规律性的结构&#xff0c;解决多尺寸多设备的动态布局问题。通过将页面划分为等宽的列数和行数&#xff0c;…

我五年减脂历程中应用的数据指标

对于减脂&#xff0c;理论说的再多无益&#xff0c;关键是要行动起来。只有坚持过&#xff0c;才有资格说&#xff1a;我尽力了。 每天跑步5公里&#xff0c;是改变一个人体态的分水岭。记住是每天&#xff0c;不管春夏秋冬、酷暑寒雪。 我常在想&#xff0c;如何才能变成一个更…