getUserInfo接口如何替换成getUserProfile超详细说明
微信小程序API近期又做了调整，之前用的好好的getUserInfo做了重大调整，无法直接获取用户信息了，比如昵称头像等等，当然2021年4月13日上线前的小程序不受影响，如果想要再次升级新版本，即必须涉及到更换获取用户授权的修改，将getUserInfo改成getUserProfile接口。 [图片] 这就代表着之前用的获取授权信息的方法要做调整了，先看看哪些模块受到影响。 之前使用如下代码，可以获取用户的相关信息：
之前：(使用上面的方式，会出现授权弹窗，同意后可以直接获取到nickName昵称及avatarUrl用户头像) [图片] 现在：（不会弹窗，直接获取用户信息nickName变成了匿名，avatarUrl用户头像变成了灰色头像） [图片] 授权过后鉴定是否授权同样也无法使用了，下面是app.js中的代码同过wx.getSetting获取scope.userInfo判断是否授权，现在获取不该参数，所有这个在app.js中的写法就无法判断用户有没有登录了。 [图片] 针对上面的文字，下面开始来介绍下我的实现方式，如何用好新接口getUserProfile。 先来看看wx.getUserProfile怎么用：https://developers.weixin.qq.com/miniprogram/dev/api/open-api/user-info/wx.getUserProfile.html 上面是官方地址，里面有详细的说明。 getUserProfile不像之前的getUserInfo一样必须放在按钮button上，而且要使用open-type="getUserInfo"，新接口直接可以应用在任何标签上，使用点击时间或者其他触发事件直接执行getUserProfile接口，如下所示：
注：desc属性必须填写，不填写可能获取不到数据； 如下图所示，将会出现弹窗授权 [图片] 每次点击都会获取一次授权，这样有个好处就是之前getUserInfo时候拒绝了之后再想同意需要操作很大一圈代码，这个的话，每次点击都会重新弹窗一次这样倒是解决了一大难题。 [图片] 正确的用户信息，包含了昵称及头像等等... 存在的问题： 如果每次点击都授权的话用户体验非常的不友好，比如做了一个博客系统，每次用户想要给某一条信息点赞，点赞前都要授权一次，用户肯定很烦，所以，获取授权第一次的时候就要存储下来，然后再做表单提交或者点赞评论时候，判断数据库中用户信息是否存在就好了。 解决方案： user页面，提醒客户点击登录授权，默认头像及文字提醒，授权过后显示头像及昵称；[图片] user.wxml页面
{{userInfo.nickName}}
{{userInfo.country+userInfo.province+userInfo.city}}
点击登录
user.js页面 //没有授权过的话，不要在当前页面存储用户信息，直接跳转到login页面同意处理用户信息
goLogin(){
wx.navigateTo({
url: '/pages/login/login'
})
}
login登录页面的操作，点击确认授权弹出授权浮窗。[图片] login.wxml页面
确认授权
暂不授权
login.js页面 //获取授权信息
clickUserProfile(){
wx.getUserProfile({
desc: '业务需要',
lang:'zh_CN',
success:res=>{
this.saveUserInfo(res.userInfo)
}
})
},
//保存用户信息
saveUserInfo(userInfo){
app.globalData.userInfo=userInfo
//使用页面栈的方式，获取了授权信息接着更改用户页面的userInfo属性
var page=getCurrentPages()[getCurrentPages().length-2];
page.setData({
userInfo
})
//使用云函数saveuser将用户信息存储到云数据库中
wx.cloud.callFunction({
name:"saveuser",
data:{
userInfo
}
}).then(res=>{
wx.showToast({
title: '授权成功'
})
setTimeout(()=>{
this.noLogin();
},1500)
})
}
saveuser云函数页面 // 云函数入口函数
exports.main = async (event, context) => {
const openid = cloud.getWXContext().OPENID
const {userInfo}=event;
userInfo.openid=openid;
//获取数据库中有没有当前用户的信息
var res= await db.collection("userAll").where({
openid:openid
}).count()
if(res.total>0){
return await db.collection('userAll').where({
openid
}).update({
data: userInfo
})
}else{
return await db.collection('userAll').add({
data: userInfo
})
}
}
一旦获取了用户信息，自动会从login页面跳转到user页面，同理user页面中的userInfo就变成了最新的用户数据，user页面也就变成了这样； [图片] 首次进入user页面时候需要从数据库判断是否已经存在该用户信息 app.js页面 //定义hasUserInfo函数，发送云函数，同过返回true和false判断是否已经授权
async hasUserInfo(){
if (this.globalData.userInfo && this.globalData.userInfo.nickName && this.globalData.userInfo.avatarUrl) return true
var res= await wx.cloud.callFunction({
name:"getuser"
})
if(res.result.code==200){
this.globalData.userInfo=res.result.data[0]
return true
}else{
return false
}
}
getuser云函数页面 // 云函数入口函数
exports.main = async (event, context) => {
const openid = cloud.getWXContext().OPENID
var res=await db.collection("userAll").where({
openid
}).get();
if(res.data.length){
return {data:res.data,code:200}
}else{
return {code:400}
}
}
在需要的位置就可以使用app.js中的hasUserInfo方法了，比如user页面 user.js页面 //页面载入时
onLoad:async function (options) {
await app.hasUserInfo()
this.setData({
userInfo:app.globalData.userInfo
})
}
比如对一个点赞按钮操作时候先判断有没有用户信息时候： //点赞操作
async clickZan(){
if(await app.hasUserInfo()){
console.log("可以点赞");
}else{
wx.navigateTo({
url: '/pages/login/login'
})
}
}
还有一种不保存用户信息，只负责在页面中展现的可以直接使用open-data组件，不用授权就可以轻松获取用户信息； 组件地址如下： https://developers.weixin.qq.com/miniprogram/dev/component/open-data.html 演示代码如下：
最终效果 [图片] 如果文章没有看懂，还有视频的介绍 https://www.bilibili.com/video/BV1s64y1i7Rw
