基本信息
文件名称:微信小程序授权登录的最新实现方案详解(2025年).docx
文件大小:16.87 KB
总页数:5 页
更新时间:2025-06-25
总字数:约2.41千字
文档摘要

微信小程序授权登录的最新实现方案详解(2025年)

目录微信授权登录wx.getUserProfile方法获取用户信息退出登录与本地缓存wx.setStorageSync结合使用总结补充:wx.getUserProfile已被回收

微信授权登录

我们的项目开发有时候用到用户的一些信息,比如头像,昵称等。目前小程序为我们提供好了wx.getUserProfile方法以供获取用户信息,它的使用非常简单。

wx.getUserProfile方法获取用户信息

不推荐使用wx.getUserInfo获取用户信息,自2025年4月13日起,getUserInfo将不再弹出弹窗,并直接返回匿名的用户个人信息

推荐使用wx.getUserProfile获取用户信息,开发者每次通过该接口获取用户个人信息均需用户确认。

对应的官方文档:/miniprogram/dev/api/open-api/user-info/wx.getUserProfile.html

简单示例代码:

官网的示例代码写得较为复杂,这里我写了一些简单的代码,以便学习。

!--userInfo如果为空证明没有登录--

buttonwx-if={{!userInfo}}bindtap=login获取头像昵称/button

viewwx:else

imagesrc={{userInfo.avatarUrl}}/image

text{{userInfo.nickName}}/text

/view

.userInfo{

display:flex;

flex-direction:column;

align-items:center;

.userInfoimage{

width:200rpx;

height:200rpx;

border-radius:200rpx;

Page({

data:{

userInfo:,//用于存放获取的用户信息

login(){

wx.getUserProfile({

desc:必须授权才能继续使用,//必填声明获取用户个人信息后的用途,后续会展示在弹窗中

success:(res)={

console.log(授权成功,res);

this.setData({

userInfo:res.userInfo

fail:(err)={

console.log(授权失败,err);

退出登录

由于上面用的判断是否登录,是用userInfo是否为空判断的,所以我们退出登录只要把userInfo清空就行了,就是这么简单粗暴!

与本地缓存wx.setStorageSync结合使用

如果没有本地缓存,每次打开小程序都需要再授权一次,太麻烦了,而且本地缓存中的数据其他页面也能使用,不用重复获取。

完整代码:

!--userInfo如果为空证明没有登录--

buttonwx-if={{!userInfo}}bindtap=login获取头像昵称/button

viewwx:else

imagesrc={{userInfo.avatarUrl}}/image

text{{userInfo.nickName}}/text

buttontype=warnbindtap=loginOut退出登录/button

/view

Page({

data:{

userInfo:,//用于存放获取的用户信息

onLoad(){

letuser=wx.getStorageSync(user)

this.setData({

userInfo:user

//授权登录

login(){

wx.getUserProfile({

desc:必须授权才能继续使用,//必填声明获取用户个人信息后的用途,后续会展示在弹窗中

success:(res)={

console.log(授权成功,res);

wx.setStorageSync(user,res.userInfo)

this.setData({

userInfo:res.userInfo

fail:(err)={

console.