眾所周知小程序登錄自2022年2月21日24時起回收通過<open-data>展示個人信息的能力，啥意思呢，就是頭像展示成灰色，昵稱展示成微信用戶，例如：
話不多說直接正題。
????????首先介紹第一種，費力的方式：依然還是用 open-type 的值設(shè)置為 chooseAvatar，當(dāng)用戶選擇需要使用的頭像之后，可以通過 bindchooseavatar 事件回調(diào)獲取到獲取到頭像信息的臨時路徑。（附官方介紹：頭像昵稱填寫 | 微信開放文檔）
說白了就是讓用戶手動填寫信息，說實話，強烈不推薦該做法。有興趣的看下官方的示例代碼，這這里我就不做過多的講解了。
? ? ? ? 其次就是使用wx.getUserProfile，看了眾多產(chǎn)品登錄源碼，都在使用這個，接下來我就簡單介紹一下小程序整體登錄流程以及該方法的使用。
? ? ? ? 1.wx.getUserProfile(Object,object)，該方法有個必傳字段desc（聲明獲取用戶個人信息后的用途，不超過30個字符），隨便寫點就行，例如完善會員資料、**信息關(guān)聯(lián)。隨便怎么寫都行，開心就好。該方法有三個回調(diào)，success、fail、complete（用這個就行，一頂二，成功失敗都會執(zhí)行）。
wx.getUserProfile({
desc: '編輯會員資料',
complete: (res) => {
if(res.errMsg == "getUserProfile:ok"){
//成功的操作
}else{
//失敗的操作
}
}
})?附（成功信息打印結(jié)果）：
cloudID: "***************"
encryptedData: "*************"
errMsg: "getUserProfile:ok"
iv: "*******"
rawData: "{"nickName":"山西懿穎科技有限公司","gender":0,"language":"zh_CN","city":"","province":"","country":"","avatarUrl":"https://thirdwx.qlogo.cn/mmopen/vi_32/PiajxSqBRaEKAYRMLQErdU66S4lfdddAEqicmuJpYiale1DKib4KQXoqibcD78jcy9JJ3icvSNUP3VHITRFuqpMg/132"}"
signature: "*********"
userInfo: {nickName: "山西懿穎科技有限公司", gender: 0, language: "zh_CN", city: "", province: ""?附（失敗信息打印結(jié)果）：
{errMsg: "getUserProfile:fail getUserProfile:fail auth deny"}至此：nickName（微信用戶名），avatarUrl（頭像路徑）都拿到了。?
其實以上內(nèi)容就已經(jīng)夠用了，接下來我會帶領(lǐng)各位同學(xué)把微信整套登錄流程走一遍。
=================《微信登錄整體流程》===============
微信登錄整體流程：
涉及到的方法：wx.getSetting()，wx.getUserProfile()，wx.authorize()，wx.login()。
何時需要登錄？并不是所有的程序都是一進(jìn)系統(tǒng)就要登錄的，例如電商產(chǎn)品，查看訂單，查看物流。瀏覽商品并不需要，所以找準(zhǔn)定位。
????????一、wx.getSetting()
? ? ? ? 該方法主要用戶獲取用戶當(dāng)前設(shè)置，返回值中會出現(xiàn)用戶以請求過的權(quán)限，例如登錄。首先通過該方法查詢用戶是否已經(jīng)登錄。
????????
wx.getSetting({
success(res){
//返回值
//authSetting:
//scope.address: true
//scope.invoice: true
//scope.invoiceTitle: true
//scope.userInfo: true//這里主要用這個
//scope.userLocation: true
//__proto__: Object
//errMsg: "getSetting:ok"
if(res.authSetting && !res.authSetting['scope.userInfo']){
//執(zhí)行未登錄操作
}
}
})? ? ? ? 二、wx.login()
? ? ? ? 該方法主要用于獲取code，把獲取到的code傳到服務(wù)端，服務(wù)端（調(diào)用auth.code2Session方法換取OpenId、UnionID、session_key）返回Token，你用到的只有Token，括號里的內(nèi)容作為擴展可以不予理會。拿到Token做本地存儲，store、Storage都可以存，超哥一般往Storage里存（存儲方法見2.1，往下看），建議Token做加密處理。
wx.getSetting({
success(res){
if(res.authSetting && !res.authSetting['scope.userInfo']){
//獲取code方法
wx.login({
success: res => {
// 發(fā)送 res.code 到后臺換取 openId, sessionKey, unionId
token({code:res.code}).then( res => {//這步是token接口的請求
// 獲取本地緩存中的TOKEN
const TOKEN = wx.setStorageSync('TOKEN',res.token);
})
}
})
}
}
})? ? ? ? ? ?至此token就成功拿到了。
????????????????2.1、wx.setStorageSync以及wx.setStorage區(qū)別以及用法
? ? ? ? ? ? ? ? ? ? ? ? 區(qū)別：顯而易見wx.setStorageSync就是同步執(zhí)行，wx.setStorage異步執(zhí)行。
? ? ? ? ? ? ? ? ? ? ? ? 用法：
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?存：wx.setStorageSync（'key'，value）；
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??。簑x.getStorageSync（'key'）；
? ? ? ? 三、wx.getUserProfile()
????????wx.getUserProfile每次調(diào)用都會彈框詢問用戶，看下圖；
????????
? ? ? ?前文已經(jīng)說過了2022年2月21日24時起回收通過<open-data>展示個人信息的能力，所以現(xiàn)在以wx.getUserProfile替換當(dāng)初的getUserInfo。
????????wx.getUserProfile（）用法已經(jīng)說明，詳情見上文，這里就不做重復(fù)講解了，直接上代碼；
wx.getSetting({
success(res){
if(res.authSetting && !res.authSetting['scope.userInfo']){
wx.login({
success: res => {
// 發(fā)送 res.code 到后臺換取 openId, sessionKey, unionId
token({code:res.code}).then( res => {//這步是token接口的請求
// 獲取本地緩存中的TOKEN
const TOKEN = wx.getStorageSync('TOKEN',res.token);
wx.getUserProfile({
desc: '編輯會員資料', // 聲明獲取用戶個人信息后的用途，后續(xù)會展示在彈窗中，請謹(jǐn)慎填寫
complete: (res) => {
if(res.errMsg == "getUserProfile:ok"){
console.log('成功了')
//存儲用戶昵稱和頭像
wx.setStorageSync('userInfo', {
name:res.userInfo.nickName,
img:res.userInfo.avatarUrl,
});
}else{
console.log(res)
}
}
})
})
}
})
}
}
})????????至此，登錄這套流程就已經(jīng)完事了，本文通俗易懂，簡單粗暴的同學(xué)直接復(fù)制以上代碼，把TOKEN接口請求你換成自己的就OK了。
????????----------以下方法作為拓展延伸--------
????????4、wx.authorize()? ?
? ? ? ? 該方法主要用戶向用戶提前發(fā)起授權(quán)請求，調(diào)用后會立即彈框詢問用戶是否同意授權(quán)某項功能，例如（地理位置、麥克風(fēng)、攝像頭....），舊版的登錄用wx.authorize()方法登錄的也很多，只不過新版限制了getUserInfo彈出框的功能，其實還是本文一開始說的那套。
? ? ? ? 其實除登錄外，例如獲取授權(quán)定位。首先還是通過wx.getSetting()方法查詢是否已經(jīng)授權(quán)過定位，如果沒有，執(zhí)行wx.authorize()，提前向用戶發(fā)起定位授權(quán)請求。
wx.getSetting({
success(res) {
if (res.authSetting['scope.record'] && !res.authSetting['scope.userLocation']) {
wx.authorize({
scope: 'scope.userLocation',
success () {
// 用戶已經(jīng)同意小程序使用定位功能，當(dāng)再次調(diào)用wx.getLocation()方法時，不會再次詢問。
wx.getLocation()
}
})
}
}
})好了，終于完事了，老樣子，不要噴，喜歡的點贊帶走，不喜歡的請自覺繞道，寫個需要的人，噴子勿擾?。。?/p>
如有糾正或不明白的地方，歡迎大家留言探討。
插播一條廣告：
? ? ? ?本公司自營項目：
? ? ? ? ? ? ? ? ? 微信電商小程序（拼團、砍價、會員、積分、限時秒殺、分銷、直播等諸多功能）；
? ? ? ? ? ? ? ? ? 刷臉支付（招商加盟，代理加盟，一站式源碼部署）；
? ? ? ? ? ? ? ? ? 另：接各種開發(fā)項目，PC、移動、webApp、小程序、App、M站等；
? ? ? ? ? ? ? ? ?如果有需要請打開http://yykj.huijik.com進(jìn)行留言，（進(jìn)入頁面下拉到最底端即可留言）文章來源：http://www.zghlxwxcb.cn/news/detail-483117.html
????????文章來源地址http://www.zghlxwxcb.cn/news/detail-483117.html
到了這里，關(guān)于微信小程序登錄功能實現(xiàn)(最新)的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
