微信小程序【获取用户昵称头像和昵称(附源码)】
获取用户昵称头像和昵称
wx.getUserProfile
bindgetuserinfo
登录过程
前端源码: 提取码:zb4w 后端源码: 提取码:8bwm
登录-小程序
- 执行wx.login 登录获取小程序端的code
- 小程序端请求服务端用户数据时,先wx.checkSession,有效就通过access_token 确定用户,找到session_key;无效就执行wx.login重新登录重新生成access_token,服务端重新获取session_key;
wx.checkSession
检查登录态是否过期
wx.login
调用接口获取登录凭证(code)
wx.request
请求自己小程序服器,并且携带了code,userInfo信息
后台
准备数据表
反向生成工具生成
-
WxUser.java WxUserMapper.java WxUserMapper.xml
准备封装前端传过来的数据
-
UserInfo WxLoginInfo
小程序服器配置
<dependency> <groupId>com.github.binarywang</groupId> <artifactId>weixin-java-miniapp</artifactId> <version>3.3.0</version> </dependency>
application.yml
oa: wx: app-id: wxf23b28b5e4ea4d6a app-secret: 212621faa31cdf0691367ea45b2b6041 msgDataFormat: JSON
WxProperties
封装oa.wx的数据
WxConfig
注册WxMaService
@Configuration public class WxConfig { @Autowired private WxProperties properties; @Bean public WxMaConfig wxMaConfig() { WxMaInMemoryConfig config = new WxMaInMemoryConfig(); config.setAppid(properties.getAppId()); config.setSecret(properties.getAppSecret()); config.setMsgDataFormat(properties.getMsgDataFormat()); return config; } @Bean public WxMaService wxMaService(WxMaConfig maConfig) { WxMaService service = new WxMaServiceImpl(); service.setWxMaConfig(maConfig); return service; } }
WxAuthController
响应给客户端数据有:
token userInfo
登录-小程序
点击"修改",将弹出一个对话框,请在对话框中输入你的小程序测试号appid
login.js
user.loginByWeixin(res.userInfo).then(res => { app.globalData.hasLogin = true; wx.navigateBack({ delta: 1 }) })
user.js
function loginByWeixin(userInfo) { return new Promise(function(resolve, reject) { return login().then((res) => { //登录远程服务器 util.request(api.AuthLoginByWeixin, { code: res.code, userInfo: userInfo }, POST).then(res => { if (res.errno === 0) { //存储用户信息 wx.setStorageSync(userInfo, res.data.userInfo); wx.setStorageSync(token, res.data.token); resolve(res); } else { reject(res); } })
将userInfo,token数据保存到本地
util.js
function request(url, data = {}, method = "GET") { return new Promise(function (resolve, reject) { wx.request({ url: url, data: data, method: method, timeout:6000, header: { Content-Type: application/json, X-OA-Token: wx.getStorageSync(token) },
如果使用util.request函数,每次请求都会携带’X-OA-Token’: wx.getStorageSync(‘token’);而服器已经保存了所有的token,所以服器通过token区分每个客户端
emoji
mysql的utf8编码的一个字符最多3个字节,但是一个emoji表情为4个字节,所以utf8不支持存储emoji表情。但是utf8的超集utf8mb4一个字符最多能有4字节,所以能支持emoji表情的存储。
Linux系统中MySQL的配置文件为my.cnf。
Winows中的配置文件为my.ini。
[mysql] # 设置mysql客户端默认字符集 default-character-set=utf8mb4 [mysqld] #设置3306端口 port = 3306 # 设置mysql的安装目录 basedir=D:\tools\mysql-5.7.23-winx64 # 设置mysql数据库的数据的存放目录 datadir=D:\tools\mysql-5.7.23-winx64\data # 允许最大连接数 max_connections=200 # 服务端使用的字符集默认为8比特编码的latin1字符集 character-set-server=utf8mb4 # 创建新表时将使用的默认存储引擎 default-storage-engine=INNODB
上一篇:
【小程序】生成二维码
下一篇:
小程序页面跳转记录