评论

getUserInfo接口如何替换成getUserProfile超详细说明

详细介绍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


最后一次编辑于  2021-04-22  
点赞 12
收藏
评论

4 个评论

  • 王建中
    王建中
    2021-09-23

    有用,谢谢

    2021-09-23
    赞同
    回复
  • 走不完的路
    走不完的路
    2021-08-11

    用户修改了微信名或者头像怎么办

    2021-08-11
    赞同
    回复
  • 俊
    2021-05-27

    老师,可以发一下源码吗


    2021-05-27
    赞同
    回复
  • 茈号铭卟垓
    茈号铭卟垓
    2021-04-21

    感谢老师,老师可以贴一下wxss文件吗

    2021-04-21
    赞同
    回复
登录 后发表内容