微信小程序获取个人信息
| 这个作业属于哪个课程 | <2021春软件工程实践|S班> |
|---|---|
| 这个作业要求在哪里 | <作业要求> |
| 这个作业的目标 | 个人技术博客 |
技术概述
学习原因：在开发微信小程序的时候，我们一般都需要获取当前用户的微信信息，来存储用户的个性化设置，以及提供个性化的服务。
做什么：这里要介绍一下如何获取用户的登录状态及个人信息。
技术难点：在我个人开发过程中发现有许多参考文档是旧的，不能很好地解决问题，于是由此介绍下个人的解决方案。
技术详述
- 获取用户身份标识
我们一般是采用wx.login()函数来获取获取登录凭证（code）。通过凭证进而换取用户登录态信息，包括用户在当前小程序的唯一标识（openid）、微信开放平台帐号下的唯一标识（unionid，若当前小程序已绑定到微信开放平台帐号）及本次登录的会话密钥（session_key）等，之后就可以依据openid在后端生成用户并绑定用户行为。返回值是一个code，code是用户登录凭证（有效期五分钟）。开发者需要在开发者服务器后台调用auth.code2Session，使用code换取openid、unionid、session_key等信息
wx.login({
success (res) {
if (res.code) {
//发起网络请求
wx.request({
url: 'https://example.com/onLogin',
data: {
code: res.code
}
})
} else {
console.log('登录失败！' + res.errMsg)
}
}
})
这是微信官方提供的时序图，在下面问题解决部分有对于此的应用。
- 获取用户资料信息
在之前可以通过wx.getUserInfo()函数配合login登录后的状态直接获取用户状态，但在四月份微信调整接口使得getUserInfo()只能获取到匿名用户状态，于是现在需要获取用户信息应调用wx.getUserprofile()函数。
getUserProfile(e) {
// 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认
// 开发者妥善保管用户快速填写的头像昵称，避免重复弹窗
wx.getUserProfile({
desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
success: (res) => {
this.setData({
userInfo: res.userInfo,
hasUserInfo: true
})
}
})
},
getUserInfo(e) {
// 不推荐使用getUserInfo获取用户信息，预计自2021年4月13日起，getUserInfo将不再弹出弹窗，并直接返回匿名的用户个人信息
this.setData({
userInfo: e.detail.userInfo,
hasUserInfo: true
})
},
技术使用中遇到的问题和解决过程
- 由于是初学，在获取登录状态以及登录信息时都会踩坑，比如登录完却没有记录状态等问题，有些接口需要登录后才能调用，否则后端无法获取正在访问的用户的信息，自然无法返回需要的数据，以下为我的解决方法可以参考。
做法是封装userLogin函数，函数返回一个Promise对象，在调用别的函数时通过userInfo这个全局变量去判断该用户是否登录，若尚未登录则调用userLogin.then请求登录,已登录则可以直接获取信息。
userLogin:function (e) {
let that=this;
let promise=new Promise(function (resolve,reject) {
let _that = that;
wx.login({
success: res => {
// 发送 res.code 到后台换取 openId, sessionKey, unionId
console.log(res.code);
console.log("登录" + that.globalData.baseUrl);
request({
url: that.globalData.baseUrl + '/api/user/login',
method: 'POST',
data:
res.code,
success:function(respond)
{
that.globalData.userInfo=respond.data;
console.log("登录成功");
console.log(respond);
that.globalData.userId = respond.data.data.id;
resolve(respond);
},
fail:function(respond)
{
// this.globalData.userInfo=res.data;
console.log("登录失败");
console.log(respond);
reject(respond);
}
})
}
})
})
return promise;
},
function(){
if(!app.globalData.userInfo){ //未登录
userLogin
.then(this.action());
}
else //已登录
this.action();
}
- 获取用户资料时一般应提供一个按钮供用户授权，点击按钮后会出现授权弹窗用户允许后将返回一系列用户信息，则可以在特定地方显示，或者将其存储进数据库中
代码如下可参考
<image class="avatar" bindtap="setAvatarUrl" src="{{url}}"> </image>
setAvatarUrl: function(e) {
wx.getUserProfile({
desc: '获取用户头像等信息',
success: res => {
this.setData({
url: res.userInfo.avatarUrl
})
console.log(res)
},
fail: err => {
wx.showToast({
title: '失败了',
icon: 'error'
})
}
})
},
总结
微信小程序确实是一种很便携的工具，能够实现快速开发。以上是我对于获取用户身份标识以及获取用户信息的方法的分享，在初次学习时容易遇到问题，查阅资料后也会存在疑惑，以上内容是我在踩坑后总结调整得到，希望能对读者有所帮助，更多拓展的用法需要参考微信开发文档。若有疑问，也可评论留言。
