微信小程序獲取用戶openid的方法詳解
- 小程序可以通過微信官方提供的登錄能力方便地獲取微信提供的用戶身份標(biāo)識,快速建立小程序內(nèi)的用戶體系
- 然而因?yàn)樾〕绦蛑械膐penid不可以直接使用需要用code(登錄憑證)去換取openid
獲取openid的思路
獲取openid首先需要調(diào)用小程序的login方法獲取小程序的登錄憑證code,然后使用code向微信換取登錄態(tài)信息,包括用戶的唯一標(biāo)識(openid)及本次登錄的會話密鑰(session_key)
我這里是用一個點(diǎn)擊事件來觸發(fā)一個函數(shù)
wx.getUserInfo 會獲取到你的一些信息 比如名字
info(){
wx.getUserInfo({
//成功后會返回
success:(res)=>{
console.log(res);
}
})
},
下圖看打印

wx.login 可以獲取到你的code值
wx.login({
//成功放回
success:(res)=>{
console.log(res);
let code=res.code
}
})
下圖看打印

通過wx.request 來讓code換取openid
這里面需要一段很長的url地址
https://api.weixin.qq.com/sns/jscode2session?appid=APPID&secret=SECRET&js_code=JSCODE&grant_type=authorization_code
這個地址可以在開發(fā)文檔=>服務(wù)器=>登錄中 找到
不要以為你把這個路徑cv上就好了 這段連接中有三處地方需要改動
(每個人的id都不一樣所以你要自己去作修改 下面有修改處的位置)
wx.request({
url: `https://api.weixin.qq.com/sns/jscode2session?appid=wx16ccbe7d04209a11&secret=1f9465bdebe244b5ad15635e8a655832&js_code=$[code]&grant_type=authorization_code`,
success:(res)=>{
console.log(res);
userInfo.openid=res.data.openid
//獲取到你的openid
console.log(userInfo.openid);
}
})需要修改的地方

注意是沒處地方都是等號之后&符號之前的 (這里一定不能出錯)
我給大家說下這三處地方在哪找
第一個
登錄 微信公眾平臺 =>開發(fā)管理=>開發(fā)設(shè)置=>開發(fā)者Id

第二個
在第一個的下面

第三個是你獲取的code值
把他拼接過去 注意要使用反引號

你還需要再設(shè)置中溝一個東西 要不然會報錯 (如圖)

然后打印你就會看到你的openid的值 如下

完整代碼
info(){
wx.getUserInfo({
//成功后會返回
success:(res)=>{
console.log(res);
// 把你的用戶信息存到一個變量中方便下面使用
let userInfo= res.userInfo
//獲取openId(需要code來換?。┻@是用戶的唯一標(biāo)識符
// 獲取code值
wx.login({
//成功放回
success:(res)=>{
console.log(res);
let code=res.code
// 通過code換取openId
wx.request({
url: `https://api.weixin.qq.com/sns/jscode2session?appid=wx16ccbe7d04209a11&secret=1f9465bdebe244b5ad15635e8a655832&js_code=$[code]&grant_type=authorization_code`,
success:(res)=>{
console.log(res);
userInfo.openid=res.data.openid
console.log(userInfo.openid);
}
})
}
})
}
})
},
總結(jié)
openid是用戶的唯一標(biāo)識,它可以快速的建立小程序內(nèi)的用戶體系因?yàn)閛penid是一個敏感信息所有他不會直接給你,需要你用登錄憑證(code)去換取openid
到此這篇關(guān)于微信小程序獲取用戶openid的文章就介紹到這了,更多相關(guān)微信小程序獲取用戶openid內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Javascript Function.prototype.bind詳細(xì)分析
這篇文章主要介紹了Javascript Function.prototype.bind詳細(xì)分析的相關(guān)資料,需要的朋友可以參考下2016-12-12
用console.table()調(diào)試javascript
昨天我了解到Chrome調(diào)試工具一個小巧的調(diào)試方法,在WDCC期間, Marcus Ross(@zahlenhelfer) 介紹了,chrome調(diào)試工具各種調(diào)試方法,這個只是其中一種,現(xiàn)在我來給大家秀下。2014-09-09
微信小程序云開發(fā)實(shí)現(xiàn)增刪改查功能
這篇文章主要為大家詳細(xì)介紹了微信小程序云開發(fā)實(shí)現(xiàn)增刪改查功能,具有一定的參考價值,感興趣的小伙伴們可以參考一下2019-05-05
javascript add event remove event
javascript事件綁定和刪除功能代碼2008-04-04
JavaScript實(shí)現(xiàn)動態(tài)加載刪除表格
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)動態(tài)加載刪除表格,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2021-04-04
深入理解JS中的微任務(wù)和宏任務(wù)的執(zhí)行順序及應(yīng)用場景
JavaScript中的任務(wù)分為宏任務(wù)和微任務(wù),它們的執(zhí)行順序會影響代碼的執(zhí)行結(jié)果。了解它們的機(jī)制可以幫助我們更好地理解事件循環(huán)和異步編程,避免出現(xiàn)一些意想不到的錯誤2023-05-05
JavaScript DOM節(jié)點(diǎn)操作方式全面講解
DOM(Document Object Model 文檔對象模型)定義了訪問和操作文檔的標(biāo)準(zhǔn)方法。整個瀏覽器網(wǎng)頁就是一個Dom樹形結(jié)構(gòu),這篇文章主要介紹了JavaScript DOM節(jié)點(diǎn)操作方式2022-10-10

