前端uniapp+后端springboot 详细教程《实现微信小程序授权登录》（附完整前后端项目demo）_基于springboot的微信小程序登录前后端

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

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

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}
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  19
  20
  21
  22

• requestUtil.js：
  功能：
  1. 定义公共的url
  2. 后端请求工具封装
  完整代码：

  // 同时发送异步代码的次数
  let ajaxTimes = 0;
  
  // 定义公共的url
  const 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();
          }
        }
      });
    })
  }
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  19
  20
  21
  22
  23
  24
  25
  26
  27
  28
  29
  30
  31
  32
  33
  34
  35
  36
  37
  38
  39
  40
  41
  42
  43
  44
  45
  46
  47
  48
  49
  50
  51
  52
  53
  54
  55
  56
  57
  58
  59
  60
  61
  62
  63
  64
  65
  66
  67
  68
  69
  70
  71
  72
  73
  74
  75
  76
  77

• stringUtil.js：
  功能：
  1. 判断字符串是否为空
  完整代码：

  //判断字符串是否为空
  export const isEmpty = (str) => {
       
    if (str === '' || str.trim().length === 0) {
       
      return true
    } else {
       
      return false;
    }
  }
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72

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>
            
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90