实现微信小程序授权登录

1、前端技术栈 1.1、uniapp 1.2、前端封装工具 1.3、Hbuilderx构建uniapp项目 2、后端技术栈 2.1、创建springboot后端项目 2.2、数据库准备 2.3、创建实体类 2.4、后端工具类 2.5、mapper和service接口 2.5、Service实现类 2.6、微信用户的控制层Controller

微信小程序官方登录流程图：

参考微信小程序登录官网文档

1、前端技术栈

1.1、uniapp

使用uniapp构建一套代码多端使用的前端框架项目

1.2、前端封装工具

dateUtil.js：

功能：

1. 时间日期格式化

2. 传入日期是否和当前日期的比较

完整代码：

// 判断传入日期是否和当前日期比较 const judgeDate=(toDate)=>{ return new Date().getTime()-new Date(toDate).getTime();}var timeFormat = function (msTime) { let time = new Date(msTime); let yy = time.getFullYear(); let MM = time.getMonth() + 1; let dd = time.getDate(); let hh = time.getHours() < 10 ? "0" + time.getHours() : time.getHours(); let min = time.getMinutes() < 10 ? "0" + time.getMinutes() : time.getMinutes(); let sec = time.getSeconds() < 10 ? "0" + time.getSeconds() : time.getSeconds(); return yy + "-" + MM + "-" + dd + " " + hh + ":" + min + ":" + sec;}export { timeFormat,judgeDate}

requestUtil.js：

功能：

1. 定义公共的url

2. 后端请求工具封装

完整代码：

// 同时发送异步代码的次数let ajaxTimes = 0;// 定义公共的urlconst baseUrl = "http://localhost:8866";/** * 返回baseUrl */export const getBaseUrl = () => { return baseUrl;}/** * 后端请求工具类 * @param {*} params 请求参数 */export const requestUtil = (params) => { let header = { ...params.header }; // 拼接header 带上token header["token"] = uni.getStorageSync("token"); ajaxTimes++; // 显示加载中 效果 wx.showLoading({ title: "加载中", mask: true }); var start = new Date().getTime(); // 模拟网络延迟加载 while (true) if (new Date().getTime() - start > 1000 * 1) break; return new Promise((resolve, reject) => { wx.request({ ...params, header: header, url: baseUrl + params.url, success: (result) => { resolve(result.data); }, fail: (err) => { uni.showToast({ icon: 'error', title: '连接服务器失败', duration: 3000 }) reject(err); }, complete: () => { ajaxTimes--; if (ajaxTimes === 0) { // 关闭正在等待的图标 wx.hideLoading(); } } }); })}

stringUtil.js：

功能：

1. 判断字符串是否为空

完整代码：

//判断字符串是否为空export const isEmpty = (str) => { if (str === '' || str.trim().length === 0) { return true } else { return false; }}

1.3、Hbuilderx构建uniapp项目

项目结构：

app.vue中，写两个方法：

在onLaunch生命周期函数中调用wx.login()获取code（前提是在微信开发者工具中登录微信账号，而且在uniapp中设置微信小程序AppId），code的作用是后端接受到code，通过code参数向微信后台发送请求，它是实现微信临时登录的url中的一个非常重要的参数。 三个重要参数 appid：应用ID secret：应用密钥 js_code：前台传给我们的code wxlogin方法

携带code参数发送请求给后端来获取token和openid

<script> import { requestUtil } from "./utils/requestUtil.js" export default { onLaunch: function() { console.log('App Launch') wx.login({ timeout: 5000, success: (res) => { console.log(res) this.wxlogin(res.code); } }); }, onShow: function() { console.log('App Show') }, onHide: function() { console.log('App Hide') }, methods: { /** * 请求后端获取用户token * @param {} code */ async wxlogin(code) { console.log("code=" + code) // 发送请求 获取用户的token const result = await requestUtil({ url: "/user/wxlogin", data: { code: code }, method: "post" }); console.log("token=" + result.token); console.log("opentoken operator">+ result.openid); if (result.code == 0) { console.log("登录成功") uni.setStorageSync("token", result.token); uni.setStorageSync("openid", result.openid); } else { console.log("登录失败，报错信息：" + result.msg); uni.showToast({ icon: 'error', title: result.msg, duration: 3000 }) } } } }</script><style> /*每个页面公共css */</style>

2、后端技术栈

springboot后端技术框架 mybatis-plus数据持久层框架

2.1、创建springboot后端项目

利用idea工具，使用spring initializr初始化创建一个空的springboot项目

springboot版本选择2.3.2.RELEASE。

修改pom.xml

<dependencies> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-test</artifactId> <scope>test</scope> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-validation</artifactId> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-devtools</artifactId> <scope>runtime</scope> <optional>true</optional> </dependency> <dependency> <groupId>mysql</groupId> <artifactId>mysql-connector-java</artifactId> <scope>runtime</scope> </dependency> <!-- 连接池 --> <dependency> <groupId>com.alibaba</groupId> <artifactId>druid</artifactId> <version>1.1.10</version> </dependency> <!-- mybatis-plus --> <dependency> <groupId>com.baomidou</groupId> <artifactId>mybatis-plus-boot-starter</artifactId> <version>3.3.2</version> </dependency> <dependency> <groupId>com.alibaba</groupId> <artifactId>fastjson</artifactId> <version>1.2.40</version> </dependency> <!-- JWT --> <dependency> <groupId>com.auth0</groupId> <artifactId>java-jwt</artifactId> <version>3.2.0</version> </dependency> <dependency> <groupId>io.jsonwebtoken</groupId> <artifactId>jjwt</artifactId> <version>0.9.1</version> </dependency> <dependency> <groupId>commons-io</groupId> <artifactId>commons-io</artifactId> <version>2.5</version> </dependency> <dependency> <groupId>org.projectlombok</groupId> <artifactId>lombok</artifactId> <optional>true</optional> </dependency> <!-- spring boot redis 缓存引入 --> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-data-redis</artifactId> </dependency> <!-- lettuce pool 缓存连接池 --> <dependency> <groupId>org.apache.commons</groupId> <artifactId>commons-pool2</artifactId> </dependency> <!-- hutool工具类--> <dependency> <groupId>cn.hutool</groupId> <artifactId>hutool-all</artifactId> <version>5.3.3</version> </dependency> <!-- 验证码依赖-->