这个作业属于哪个课程 | <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\'
})
}
})
},
总结
微信小程序确实是一种很便携的工具,能够实现快速开发。以上是我对于获取用户身份标识以及获取用户信息的方法的分享,在初次学习时容易遇到问题,查阅资料后也会存在疑惑,以上内容是我在踩坑后总结调整得到,希望能对读者有所帮助,更多拓展的用法需要参考微信开发文档。若有疑问,也可评论留言。
请发表评论