微信小程序授權(quán)登錄實現(xiàn)方案wx.getUserProfile(2022年最新版)
微信授權(quán)登錄
我們的項目開發(fā)有時候用到用戶的一些信息,比如頭像,昵稱等。目前小程序為我們提供好了wx.getUserProfile
方法以供獲取用戶信息,它的使用非常簡單。
wx.getUserProfile方法獲取用戶信息
不推薦使用 wx.getUserInfo
獲取用戶信息,自2021年4月13日起,getUserInfo
將不再彈出彈窗,并直接返回匿名的用戶個人信息
推薦使用 wx.getUserProfile
獲取用戶信息,開發(fā)者每次通過該接口獲取用戶個人信息均需用戶確認。
對應的官方文檔:https://developers.weixin.qq.com/miniprogram/dev/api/open-api/user-info/wx.getUserProfile.html
簡單示例代碼:
官網(wǎng)的示例代碼寫得較為復雜,這里我寫了一些簡單的代碼,以便學習。
<!-- 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ù)使用', // 必填 聲明獲取用戶個人信息后的用途,后續(xù)會展示在彈窗中 success:(res)=> { console.log('授權(quán)成功', res); this.setData({ userInfo:res.userInfo }) }, fail:(err)=> { console.log('授權(quán)失敗', err); } }) } })
退出登錄
由于上面用的判斷是否登錄,是用userInfo是否為空判斷的,所以我們退出登錄只要把userInfo清空就行了,就是這么簡單粗暴!
與本地緩存wx.setStorageSync結(jié)合使用
如果沒有本地緩存,每次打開小程序都需要再授權(quán)一次,太麻煩了,而且本地緩存中的數(shù)據(jù)其他頁面也能使用,不用重復獲取。
完整代碼:
<!-- 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ù)使用', // 必填 聲明獲取用戶個人信息后的用途,后續(xù)會展示在彈窗中 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) } })
總結(jié)
wx.getUserProfile
用于授權(quán)登錄,獲取用戶信息,但它返回的加密數(shù)據(jù)中不包含 openId
和 unionId
字段,只包含頭像昵稱,所以需要其他信息的需要結(jié)合云開發(fā)云函數(shù)使用
到此這篇關(guān)于微信小程序授權(quán)登錄實現(xiàn)方案wx.getUserProfile的文章就介紹到這了,更多相關(guān)微信小程序授權(quán)登錄wx.getUserProfile內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
JS獲取iframe中marginHeight和marginWidth屬性的方法
這篇文章主要介紹了JS獲取iframe中marginHeight和marginWidth屬性的方法,涉及javascript操作iframe屬性的技巧,并分析了marginHeight和marginWidth屬性的功能,非常具有實用價值,需要的朋友可以參考下2015-04-04細說webpack源碼之compile流程-rules參數(shù)處理技巧(1)
webpack作為一種流行的打包工具被廣泛應用在web項目的前端工程化構(gòu)建中。下面通過本文給大家介紹webpack源碼之compile流程-rules參數(shù)處理技巧,感興趣的朋友一起看看吧2017-12-12鼠標事件的screenY,pageY,clientY,layerY,offsetY屬性詳解
這篇文章主要介紹了鼠標事件的screenY,pageY,clientY,layerY,offsetY屬性詳解,需要的朋友可以參考下2015-03-03js實現(xiàn)百度地圖定位于地址逆解析,顯示自己當前的地理位置
本文分享了基于javascript實現(xiàn)的百度地圖定位于地址逆解析,顯示自己當前的地理位置的實例代碼,有興趣的朋友可以看下2016-12-12用showModalDialog彈出頁面后,提交表單總是彈出一個新窗口
用showModalDialog彈出頁面后,提交表單總是彈出一個新窗口,其實解決方法很簡單如下。2009-07-07