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

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

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中，写两个方法：

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

• appid：应用ID
• secret：应用密钥
• js_code：前台传给我们的code

3. 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("openid=" + 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。

1. 修改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>