首先,在微信官方更新授权操作之前,我们一直使用getUserInfo来获取微信用户的头像和昵称以及openid,这个可以参考我的上一篇博客(使用getUserInfo获取用户头像),但是微信官方弃用getUserInfo之后,我们获取头像相关信息和openid的信息就需要分两步进行。
1、获取openid的部分,采用云函数来进行获取,因为微信官方修改完获取用户信息api之后,wx.getUserProfile不能够获取openid的信息,但是后面如果我们需要对个人信息就行相关操作就需要openid。
设置一个云函数,这里名命为Login,具体内容如下所示:
const cloud = require('wx-server-sdk')
cloud.init()
// 云函数入口函数
exports.main = async (event, context) => {
const wxInfo = cloud.getWXContext()
return {
wxInfo
}
}
在js文件中进行调用云函数,获取openid(获取头像的信息,也在这里先附加上,后面在单独拿出来说明)
var app = getApp()
const db = wx.cloud.database()
const userinfoList = db.collection('user')
Page({
data: {
userInfo: {},
hasUserInfo: false,
userlists: [],
},
onLoad: function () {
let isfirst = wx.getStorageSync('userId')
// console.log(isfirst.openid)
//这个是在已经完成过一次授权之后再次登录直接加载openid信息,避免多次调用授权操作
if (isfirst) {
//Do something with return value
userinfoList.where({
//可以用这个获取openid,app.globalData.userInfo.openid,也可以用下面的方式
_openid: isfirst
}).get({
success: res => {
this.setData({
userlists: res.data[0],
})
}
})
}
//这里是直接读取第一次授权是设置的用户信息(头像、昵称)的缓存信息
let user = wx.getStorageSync('userInfo')
if (user) {
this.setData({
userInfo: user,
hasUserInfo: true
})
}
},
getUserProfile(e) {
wx.cloud.callFunction({
name: 'Login',
success: res => {
wx.setStorageSync('userId', res.result.wxInfo.OPENID)
userinfoList.where({
_openid: res.result.wxInfo.OPENID
}).get({
success: res => {
// console.log(res)
this.setData({
userlists: res.data[0]
})
}
})
}
})
wx.getUserProfile({
desc: '用于完善会员资料',
success: (res) => {
// let user = res.userInfo
// wx.setStorageSync('user', user)
wx.setStorageSync('userInfo', res.userInfo)
this.setData({
userInfo: res.userInfo,
hasUserInfo: true
})
}
})
}
})
2、获取微信用户头像、昵称信息,利用getUserProfile来替换之前的getUserInfo。
//用来获取用户头像、昵称信息
getUserProfile(e) {
wx.cloud.callFunction({
name: 'Login',
success: res => {
wx.setStorageSync('userId', res.result.wxInfo.OPENID) //成功调用云函数Login获取得到openid,并利用setStorageSyns进行存储
userinfoList.where({
_openid: res.result.wxInfo.OPENID
}).get({
success: res => {
// 根据openid将用户注册时所填写的一些信息设置出来
this.setData({
userlists: res.data[0]
})
}
})
}
})
//调用wx.getUserProfile获取用户头像昵称
wx.getUserProfile({
desc: '用于完善会员资料',
success: (res) => {
wx.setStorageSync('userInfo', res.userInfo)
this.setData({
userInfo: res.userInfo,
hasUserInfo: true
})
}
})
}
3、这里在附上我用来展示用户信息的页面代码(我这里用了vant组件,详细用法可见之前的博客微信小程序利用vant组件进行快速开发)
user-info.wxml
<view class="userinfo">
<button wx:if="{{!hasUserInfo}}" bindtap="getUserProfile" class="userinfo-btn"> 点击微信授权 </button>
<block wx:else>
<image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
<text class="userinfo-nickname">{{userInfo.nickName}}</text>
</block>
</view>
<van-cell-group>
<van-cell title="学号" value="{{userlists.name}}" />
<van-cell title="电话" value="{{userlists.phone}}" />
<van-cell title="积分" value="{{userlists.score}}" />
</van-cell-group>
user-info.wxss
.userinfo {
display: flex;
flex-direction: column;
align-items: center;
background: #b3d4db;
width: 100%;
height: 300rpx;
}
.userinfo-btn{
margin-top: 50rpx;
background: none !important;
color: #fff !important;
font-size: 40rpx;
}
.account-bg {
width: 100%;
height: 150rpx;
}
.userinfo-avatar {
width: 108rpx;
height: 108rpx;
margin: 40rpx;
border-radius: 50%;
}
.userinfo-nickname {
color: #fff;
}
user-info.json
{
"usingComponents": {
"van-cell": "../../vant/cell/index",
"van-cell-group": "../../vant/cell-group/index"
},
"navigationBarBackgroundColor": "#b3d4db",
"navigationBarTitleText": "个人中心"
}
个人中心页面展示,授权之前会有按钮显示,这里就不再展示了,直接拷贝上面代码就可以看到效果。
仅以此篇作为微信小程序用户授权信息获取的补充。