微信小程序授權(quán)登錄功能如何實(shí)現(xiàn)

這篇文章主要介紹“微信小程序授權(quán)登錄功能如何實(shí)現(xiàn)”的相關(guān)知識(shí)，小編通過實(shí)際案例向大家展示操作過程，操作方法簡(jiǎn)單快捷，實(shí)用性強(qiáng)，希望這篇“微信小程序授權(quán)登錄功能如何實(shí)現(xiàn)”文章能幫助大家解決問題。

微信授權(quán)登錄

我們的項(xiàng)目開發(fā)有時(shí)候用到用戶的一些信息，比如頭像，昵稱等。目前小程序?yàn)槲覀兲峁┖昧?code>wx.getUserProfile方法以供獲取用戶信息，它的使用非常簡(jiǎn)單。

wx.getUserProfile方法獲取用戶信息

不推薦使用 wx.getUserInfo 獲取用戶信息，自2021年4月13日起，getUserInfo將不再?gòu)棾鰪棿?，并直接返回匿名的用戶個(gè)人信息

推薦使用 wx.getUserProfile 獲取用戶信息，開發(fā)者每次通過該接口獲取用戶個(gè)人信息均需用戶確認(rèn)。

簡(jiǎn)單示例代碼：

官網(wǎng)的示例代碼寫得較為復(fù)雜，這里我寫了一些簡(jiǎn)單的代碼，以便學(xué)習(xí)。

<!-- 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: '必須授權(quán)才能繼續(xù)使用', // 必填 聲明獲取用戶個(gè)人信息后的用途，后續(xù)會(huì)展示在彈窗中
            success:(res)=> { 
                console.log('授權(quán)成功', res);
                this.setData({ 
                    userInfo:res.userInfo
                })
            },
            fail:(err)=> {
                console.log('授權(quán)失敗', err);
            }
        })
    }

})

退出登錄

由于上面用的判斷是否登錄，是用userInfo是否為空判斷的，所以我們退出登錄只要把userInfo清空就行了，就是這么簡(jiǎn)單粗暴！

與本地緩存wx.setStorageSync結(jié)合使用

如果沒有本地緩存，每次打開小程序都需要再授權(quán)一次，太麻煩了，而且本地緩存中的數(shù)據(jù)其他頁面也能使用，不用重復(fù)獲取。

完整代碼：

<!-- 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
        })
    },
    // 授權(quán)登錄
    login() {
        wx.getUserProfile({
            desc: '必須授權(quán)才能繼續(xù)使用', // 必填 聲明獲取用戶個(gè)人信息后的用途，后續(xù)會(huì)展示在彈窗中
            success:(res)=> { 
                console.log('授權(quán)成功', res);
                wx.setStorageSync('user',res.userInfo)
                this.setData({ 
                    userInfo:res.userInfo
                })
            },
            fail:(err)=> {
                console.log('授權(quán)失敗', err);
            }
        })
    },
    // 退出登錄
    loginOut(){
        this.setData({ 
            userInfo:''
        })
        // 清空緩存
        wx.setStorageSync('user',null)
    }
    
})

關(guān)于“微信小程序授權(quán)登錄功能如何實(shí)現(xiàn)”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)，可以關(guān)注億速云行業(yè)資訊頻道，小編每天都會(huì)為大家更新不同的知識(shí)點(diǎn)。