| 微信小程序用户登录及头像昵称设置教程（前后端） | 您所在的位置：网站首页 › 水滴筹的头像名字和微信上怎么不一样 › 微信小程序用户登录及头像昵称设置教程（前后端） |
微信小程序用户登录及头像昵称设置教程（前后端）
|
目录 1.背景分析 2.具体需求分析 3.前端设计 3.1 用户登录 3.2 头像昵称填写（个人信息界面） 4.后端设计 4.1项目架构分析 4.2 代码分析 实体类 dao层 service层 controller层 工具类 5.nginx部署 6.效果演示 1.背景分析众所周知，微信小程序获取用户信息的接口经过了好几次调整，目前来说【wx.getUserProfile】 和【wx.getUserInfo】 这两个获取用户信息的接口都已经停用了，取而代之的是【头像昵称填写能力】：
详见小程序用户头像昵称获取规则调整公告：小程序用户头像昵称获取规则调整公告 | 微信开放社区 而与此同时，手机号快速验证组件将需要付费使用，及【获取用户手机号码】的功能要收费了.... 详见：手机号快速验证组件 | 微信开放文档 这样的调整无疑会对用户身份信息的获取以及用户登录产生一定的影响，因此在本demo中采用【wx.login】进行登录，而不是获取用户手机号码进行登录； 在用户头像和昵称获取方面采用最新的接口来实现； 2.具体需求分析前端页面： 登录页面：登录按钮个人信息页面：展示/设置用户头像及昵称流程： 在登录页面，用户点击按钮进行登录，需要判断用户是否已经登录过 如果用户尚未登录，为用户自动进行注册如果用户已经登录过，则需要获取到用户之前已经设置过的用户头像和昵称，并展示在个人信息页面在个人信息页面： 需要保证用户此时已经登录用户可以设置头像，将设置的头像发送到服务器进行保存用户可以设置昵称，将设置的昵称发送到服务器进行保存数据库设计： 共有一张数据表：【user表】
user_id：用户id，用户身份的唯一标识，以微信用户的openid作为用户id user_avatarurl：用户头像 user_name：用户昵称 技术栈： 前端：微信小程序原生开发，基于微信官方案例拓展后端：采用SpringBoot框架开发，接口运行在本地服务器：采用华为云服务器，部署nginx，主要功能是保存图片资源并提供静态资源访问的接口 3.前端设计 3.1 用户登录用户登录全流程详见：小程序登录 | 微信开放文档 包括前后端对接以及微信接口服务的调用； 在前端开发部分主要使用的是微信提供的【wx.login】API： 接口文档：wx.login(Object object) | 微信开放文档 login页面具体设计如下： ①login.wxml： 一个简单的按钮组件，绑定【login】方法： 点此登录②login.wxss： .container { display: flex; justify-content: center; align-items: center; width: 100%; height: 100vh; }对按钮的位置进行居中设置，需要注意的是这里的【height】不能设置100%，否则垂直居中不起作用 vh，是css相对视口高度。1vh=1%*视口高度 至此页面绘制完毕，很简单：
③login.js: Page({ data: { }, login() { wx.login({ success: (res) => { console.log(res) var code = res.code //获取code wx.request({ //调用后端接口 url: 'http://localhost:8080/login', method: 'POST', header: { 'content-type': 'application/json' }, data: { code: code, //请求体中封装code }, success(res) { console.log(res) //页面跳转 wx.navigateTo({ //携带用户头像信息和用户昵称信息 url: '/index/index?userAvatarUrl=' + res.data.data.userAvatarUrl + '&userName=' + res.data.data.userName, }) } }) }, }) } })主要逻辑就是前端通过【wx.login】获取code，然后后端拿到code之后通过调用 微信服务端的【auth.code2Session】接口来换取用户唯一身份标识openId 如果用户不是第一次登录，则可能在之前的登录中设置过头像和昵称，因此后端接口的返回信息中需要有通过openId查询到的用户头像和用户昵称，前端获取到这些信息后通过页面跳转携带这些信息到达个人信息界面； 3.2 头像昵称填写（个人信息界面）参考微信官方文档的【头像昵称填写功能】： 头像昵称填写 | 微信开放文档 需要注意该功能从基础库 2.21.2 开始支持，因此需要检查开发者工具中【调试基础库的版本】 具体的前端代码参考了官方案例：
点击【在开发者工具中预览效果】即可下载代码 ①index.wxml： 展示用户头像和昵称： |
【本文地址】