微信小程序授权登录实现方案wx.getUserProfile(2022年最新版)

目录

• 微信授权登录
• wx.getUserProfile方法获取用户信息
• 简单示例代码：
• 退出登录
• 与本地缓存wx.setStorageSync结合使用
• 总结

获取头像昵称

    
    {{userInfo.nickName}}

.userInfo{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.userInfo image{
    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.nickName}}
    退出登录
    

Page({

    data: {
        userInfo: "", //用于存放获取的用户信息
    },
    onLoad(){
        let user = 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.log("授权失败", err);
            }
        })
    },
    // 退出登录
    loginOut(){
        this.setData({ 
            userInfo:""
        })
        // 清空缓存
        wx.setStorageSync("user",null)
    }
})