这篇文章主要介绍“微信小程序授权登录功能如何实现”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“微信小程序授权登录功能如何实现”文章能帮助大家解决问题。

    微信授权登录

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

    wx.getUserProfile方法获取用户信息

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

    微信小程序授权登录功能如何实现

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

    微信小程序授权登录功能如何实现

    简单示例代码

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

    <!-- userInfo如果为空证明没有登录 -->
    <button wx-if="{{!userInfo}}" bindtap="login">获取头像昵称</button>
    <view wx:else class="userInfo">
        <image src="{{userInfo.avatarUrl}}"></image>
        <text>{{userInfo.nickName}}</text>
    </view>
    .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是否为空判断的,所以我们退出登录只要把userInfo清空就行了,就是这么简单粗暴!

    微信小程序授权登录功能如何实现

    微信小程序授权登录功能如何实现

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

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

    完整代码

    <!-- userInfo如果为空证明没有登录 -->
    <button wx-if="{{!userInfo}}" bindtap="login">获取头像昵称</button>
    <view wx:else class="userInfo">
        <image src="{{userInfo.avatarUrl}}"></image>
        <text>{{userInfo.nickName}}</text>
        <button type="warn" bindtap="loginOut">退出登录</button>
        
    </view>
    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)
        }
        
    })

    关于“微信小程序授权登录功能如何实现”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识,可以关注***行业资讯频道,小编每天都会为大家更新不同的知识点。

    相关文章: