前端uniapp+后端springboot 具体教程《实现微信小步伐授权登录》（附完整前 ...

微信小步伐官方登录流程图：

参考微信小步伐登录官网文档
1、前端技能栈

1.1、uniapp

使用uniapp构建一套代码多端使用的前端框架项目
1.2、前端封装工具

• dateUtil.js：
  功能：
  1. 时间日期格式化
  2. 传入日期是否和当前日期的比力
  完整代码：
  
  1. // 判断传入日期是否和当前日期比较
  2. const judgeDate=(toDate)=>{
  3.      
  4.         return new Date().getTime()-new Date(toDate).getTime();
  5. }
  7. var timeFormat = function (msTime) {
  8.      
  9.     let time = new Date(msTime);
  10.     let yy = time.getFullYear();
  11.     let MM = time.getMonth() + 1;
  12.     let dd = time.getDate();
  13.     let hh = time.getHours() < 10 ? "0" + time.getHours() : time.getHours();
  14.     let min =
  15.         time.getMinutes() < 10 ? "0" + time.getMinutes() : time.getMinutes();
  16.     let sec =
  17.         time.getSeconds() < 10 ? "0" + time.getSeconds() : time.getSeconds();
  18.     return yy + "-" + MM + "-" + dd + " " + hh + ":" + min + ":" + sec;
  19. }
  21. export {
  22.      timeFormat,judgeDate}

  复制代码
  
  
• requestUtil.js：
  功能：
  1. 定义公共的url
  2. 后端哀求工具封装
  完整代码：
  
  1. // 同时发送异步代码的次数
  2. let ajaxTimes = 0;
  4. // 定义公共的url
  5. const baseUrl = "http://localhost:8866";
  7. /**
  8. * 返回baseUrl
  9. */
  10. export const getBaseUrl = () => {
  11.      
  12.   return baseUrl;
  13. }
  15. /**
  16. * 后端请求工具类
  17. * @param {*} params 请求参数
  18. */
  19. export const requestUtil = (params) => {
  20.      
  22.   let header = {
  23.      
  24.     ...params.header
  25.   };
  27.   // 拼接header 带上token
  28.   header["token"] = uni.getStorageSync("token");
  30.   ajaxTimes++;
  32.   // 显示加载中 效果
  33.   wx.showLoading({
  34.      
  35.     title: "加载中",
  36.     mask: true
  37.   });
  39.   var start = new Date().getTime();
  41.   // 模拟网络延迟加载
  42.   while (true)
  43.     if (new Date().getTime() - start > 1000 * 1) break;
  45.   return new Promise((resolve, reject) => {
  46.      
  47.     wx.request({
  48.      
  49.       ...params,
  50.       header: header,
  51.       url: baseUrl + params.url,
  52.       success: (result) => {
  53.      
  54.         resolve(result.data);
  55.       },
  56.       fail: (err) => {
  57.      
  58.         uni.showToast({
  59.      
  60.           icon: 'error',
  61.           title: '连接服务器失败',
  62.           duration: 3000
  63.         })
  64.         reject(err);
  65.       },
  66.       complete: () => {
  67.      
  68.         ajaxTimes--;
  69.         if (ajaxTimes === 0) {
  70.      
  71.           //  关闭正在等待的图标
  72.           wx.hideLoading();
  73.         }
  74.       }
  75.     });
  76.   })
  77. }

  复制代码
  
  
• stringUtil.js：
  功能：
  1. 判断字符串是否为空
  完整代码：
  
  1. //判断字符串是否为空
  2. export const isEmpty = (str) => {
  3.      
  4.   if (str === '' || str.trim().length === 0) {
  5.      
  6.     return true
  7.   } else {
  8.      
  9.     return false;
  10.   }
  11. }

  复制代码

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
  

1. <script>
2.   import {
3.    
4.     requestUtil
5.   } from "./utils/requestUtil.js"
6.   export default {
7.    
8.     onLaunch: function() {
9.    
10.       console.log('App Launch')
11.       wx.login({
12.    
13.         timeout: 5000,
14.         success: (res) => {
15.    
16.           console.log(res)
17.           this.wxlogin(res.code);
18.         }
19.       });
20.     },
21.     onShow: function() {
22.    
23.       console.log('App Show')
24.     },
25.     onHide: function() {
26.    
27.       console.log('App Hide')
28.     },
29.     methods: {
30.    
31.       /**
32.        * 请求后端获取用户token
33.        * @param {} code
34.        */
35.       async wxlogin(code) {
36.    
37.         console.log("code=" + code)
38.         // 发送请求 获取用户的token
39.         const result = await requestUtil({
40.    
41.           url: "/user/wxlogin",
42.           data: {
43.    
44.             code: code
45.           },
46.           method: "post"
47.         });
48.         console.log("token=" + result.token);
49.         console.log("openid=" + result.openid);
50.         if (result.code == 0) {
51.    
52.           console.log("登录成功")
53.           uni.setStorageSync("token", result.token);
54.           uni.setStorageSync("openid", result.openid);
55.         } else {
56.    
57.           console.log("登录失败，报错信息：" + result.msg);
58.           uni.showToast({
59.    
60.             icon: 'error',
61.             title: result.msg,
62.             duration: 3000
63.           })
64.         }
65.       }
66.     }
67.   }
68. </script>
70. <style>
71.   /*每个页面公共css */
72. </style>

复制代码

2、后端技能栈

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

2.1、创建springboot后端项目

利用idea工具，使用spring initializr初始化创建一个空的springboot项目
   springboot版本选择2.3.2.RELEASE。
  

• 修改pom.xml
  

1. <dependencies>
2.         <dependency>
3.             <groupId>org.springframework.boot</groupId>
4.             <artifactId>spring-boot-starter-web</artifactId>
5.         </dependency>
7.         <dependency>
8.             <groupId>org.springframework.boot</groupId>
9.             <artifactId>spring-boot-starter-test</artifactId>
10.             <scope>test</scope>
11.         </dependency>
13.         <dependency>
14.             <groupId>org.springframework.boot</groupId>
15.             <artifactId>spring-boot-starter-validation</artifactId>
16.         </dependency>
19.         <dependency>
20.             <groupId>org.springframework.boot</groupId>
21.             <artifactId>spring-boot-devtools</artifactId>
22.             <scope>runtime</scope>
23.             <optional>true</optional>
24.         </dependency>
26.         <dependency>
27.             <groupId>mysql</groupId>
28.             <artifactId>mysql-connector-java</artifactId>
29.             <scope>runtime</scope>
30.         </dependency>
33.         <!-- 连接池 -->
34.         <dependency>
35.             <groupId>com.alibaba</groupId>
36.             <artifactId>druid</artifactId>
37.             <version>1.1.10</version>
38.         </dependency>
39.         <!-- mybatis-plus -->
40.         <dependency>
41.             <groupId>com.baomidou</groupId>
42.             <artifactId>mybatis-plus-boot-starter</artifactId>
43.             <version>3.3.2</version>
44.         </dependency>
47.         <dependency>
48.             <groupId>com.alibaba</groupId>
49.             <artifactId>fastjson</artifactId>
50.             <version>1.2.40</version>
51.         </dependency>
53.         <!-- JWT -->
54.         <dependency>
55.             <groupId>com.auth0</groupId>
56.             <artifactId>java-jwt</artifactId>
57.             <version>3.2.0</version>
58.         </dependency>
59.         <dependency>
60.             <groupId>io.jsonwebtoken</groupId>
61.             <artifactId>jjwt</artifactId>
62.             <version>0.9.1</version>
63.         </dependency>
65.         <dependency>
66.             <groupId>commons-io</groupId>
67.             <artifactId>commons-io</artifactId>
68.             <version>2.5</version>
69.         </dependency>
71.         <dependency>
72.             <groupId>org.projectlombok</groupId>
73.             <artifactId>lombok</artifactId>
74.             <optional>true</optional>
75.         </dependency>
77.         <!-- spring boot redis 缓存引入 -->
78.         <dependency>
79.             <groupId>org.springframework.boot</groupId>
80.             <artifactId>spring-boot-starter-data-redis</artifactId>
81.         </dependency>
82.         <!-- lettuce pool 缓存连接池 -->
83.         <dependency>
84.             <groupId>org.apache.commons</groupId>
85.             <artifactId>commons-pool2</artifactId>
86.         </dependency>
88.         <!-- hutool工具类-->
89.         <dependency>
90.             <groupId>cn.hutool</groupId>
91.             <artifactId>hutool-all</artifactId>
92.             <version>5.3.3</version>
93.         </dependency>
95.         <!-- 验证码依赖-->
96.         

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。