微信小程序獲取用戶手機(jī)號(hào)碼詳細(xì)教程(前端+后端)
1.背景介紹
在開(kāi)發(fā)一款微信小程序時(shí),需要用戶進(jìn)行微信登錄,獲取用戶的手機(jī)號(hào)碼來(lái)作為用戶的唯一標(biāo)識(shí)(userId),于是探索獲取用戶手機(jī)號(hào)碼的方式;
(當(dāng)然,通過(guò)wx.login來(lái)獲取code,進(jìn)而換取用戶的openid也是可以的)
目前版本的微信小程序獲取用戶手機(jī)號(hào)碼的方式如下:
前端開(kāi)發(fā)參考:手機(jī)號(hào)快速填寫(xiě)組件 | 微信開(kāi)放文檔
后端開(kāi)發(fā)參考:
手機(jī)號(hào)快速填寫(xiě) | 微信開(kāi)放文檔
步驟如下:
①利用手機(jī)號(hào)快速填寫(xiě)的功能,將button組件 open-type
的值設(shè)置為 getPhoneNumber
②用戶點(diǎn)擊按鈕,彈出申請(qǐng)獲取用戶手機(jī)號(hào)的彈窗:
③如果用戶點(diǎn)擊允許,則可以通過(guò)bindgetphonenumber
事件回調(diào)獲取到動(dòng)態(tài)令牌code(注意這里的code和wx.login的code不一樣,而且獲取用戶手機(jī)號(hào)碼不需要提前調(diào)用wx.login獲取code了)
④把code傳到開(kāi)發(fā)者后臺(tái),并在開(kāi)發(fā)者后臺(tái)調(diào)用微信后臺(tái)提供的 phonenumber.getPhoneNumber
接口,消費(fèi)code來(lái)?yè)Q取用戶手機(jī)號(hào)
注意一點(diǎn),獲取手機(jī)號(hào)的功能好像只允許經(jīng)過(guò)認(rèn)證的小程序使用,如果未認(rèn)證只能使用測(cè)試號(hào)才可以
否則便會(huì)報(bào)錯(cuò):
2.前端代碼
開(kāi)發(fā)環(huán)境:Uniapp框架
微信小程序調(diào)試基礎(chǔ)庫(kù)的版本:2.32.1
基本思路:通過(guò)按鈕綁定監(jiān)聽(tīng)事件,獲取用戶授權(quán),得到code,傳到后端換取用戶手機(jī)號(hào):
代碼如下:
按鈕:
<button open-type="getPhoneNumber" class="login_button" @getphonenumber="login" v-show="!logged">登錄</button>
login函數(shù):
//登錄按鈕 login(e) { console.log(e) var detail = e.detail if (detail.errMsg == "getPhoneNumber:ok") { console.log("用戶同意授權(quán)") var code = detail.code uni.request({ url: "http://localhost:8081/getPhoneNumber", //調(diào)用接口 method: 'POST', header: { 'content-type': 'application/json' }, data: { code: code, //請(qǐng)求體中封裝code }, success(e) { console.log(e) var userId = e.data.phone_info.purePhoneNumber; uni.setStorage({ key: "userId", data: userId, success() { uni.switchTab({ url: "../../pages/homePage/homepage" }) } }) }, fail(e) { uni.showModal({ title: "錯(cuò)誤!", content: "網(wǎng)絡(luò)錯(cuò)誤!", complete() { } }) } }) } }
3.后端代碼
開(kāi)發(fā)環(huán)境:springboot
開(kāi)發(fā)工具:idea
如果對(duì)于idea創(chuàng)建springboot項(xiàng)目有任何問(wèn)題,可以參考的這一篇文章的后端代碼部分:
代碼展示如下:
@RestController public class PhoneNumberController { @PostMapping("/getPhoneNumber") public Object getPhoneNumber(@RequestBody Map<String,Object> data) { //通過(guò)appid和secret來(lái)獲取token //WXContent.APPID是自定義的全局變量 String tokenUrl = String.format("https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=%s&secret=%s", WXContent.APPID, WXContent.APPSECRET); JSONObject token = JSON.parseObject(HttpUtil.get(tokenUrl)); //通過(guò)token和code來(lái)獲取用戶手機(jī)號(hào) String url = "https://api.weixin.qq.com/wxa/business/getuserphonenumber?access_token=" + token.getString("access_token"); //封裝請(qǐng)求體 Map<String, String> paramMap = new HashMap<>(); paramMap.put("code", data.get("code").toString()); //封裝請(qǐng)求頭 HttpHeaders headers = new HttpHeaders(); headers.setContentType(MediaType.APPLICATION_JSON); HttpEntity<Map<String, String>> httpEntity = new HttpEntity<>(paramMap,headers); //通過(guò)RestTemplate發(fā)送請(qǐng)求,獲取到用戶手機(jī)號(hào)碼 RestTemplate restTemplate = new RestTemplate(); ResponseEntity<Object> response = restTemplate.postForEntity(url, httpEntity, Object.class); //返回到前端展示 return response.getBody(); } }
4.結(jié)果展示
在我的前端代碼中有緩存用戶id的功能,如果成功登錄,即可在緩存中查看到用戶id,如下:
5.補(bǔ)充:獲取用戶頭像
微信小程序獲取用戶信息的功能好像挺離譜的,一直改來(lái)改去,目前大多是通過(guò)點(diǎn)擊頭像申請(qǐng)獲取微信頭像來(lái)實(shí)現(xiàn)
<button class="mine_avatar_wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar"> <image class="mine_image" :src="avatarUrl"></image> </button>
通過(guò)open-type
綁定選擇用戶頭像的功能,然后點(diǎn)擊按鈕即可彈出彈窗:
而onChooseAvatar函數(shù)則是獲取到微信頭像后渲染到頁(yè)面上
onChooseAvatar(e) { this.avatarUrl = e.detail.avatarUrl uni.setStorageSync('avatarUrl',this.avatarUrl) },
這里選擇使用用戶頭像即可修改用戶頭像為微信頭像:
總結(jié)
到此這篇關(guān)于微信小程序獲取用戶手機(jī)號(hào)碼的文章就介紹到這了,更多相關(guān)微信小程序獲取用戶手機(jī)號(hào)碼內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- uniapp抖音小程序一鍵獲取用戶手機(jī)號(hào)的示例代碼
- UNIAPP實(shí)現(xiàn)微信小程序登錄授權(quán)和手機(jī)號(hào)授權(quán)功能(uniapp做微信小程序)
- 微信小程序中獲取用戶手機(jī)號(hào)授權(quán)登錄詳細(xì)步驟
- uniapp微信小程序授權(quán)登錄并獲取手機(jī)號(hào)的方法
- uniapp+.net?core實(shí)現(xiàn)微信小程序獲取手機(jī)號(hào)功能
- PHP配合微信小程序?qū)崿F(xiàn)獲取手機(jī)號(hào)碼詳解
- 微信小程序登錄方法之授權(quán)登陸及獲取微信用戶手機(jī)號(hào)
- 微信小程序獲取用戶手機(jī)號(hào)碼的詳細(xì)步驟
- 微信小程序?qū)崿F(xiàn)手機(jī)號(hào)碼驗(yàn)證
- 抖音小程序一鍵獲取手機(jī)號(hào)的實(shí)現(xiàn)思路
相關(guān)文章
JS關(guān)于刷新頁(yè)面的相關(guān)總結(jié)
在本篇內(nèi)容中我們給大家整理了關(guān)于JS刷新頁(yè)面的所有相關(guān)知識(shí)點(diǎn)以及整理了相關(guān)的技術(shù)文章,大家可以收藏本頁(yè)面繼續(xù)深入學(xué)習(xí)。2018-05-05JS使用正則實(shí)現(xiàn)去掉字符串左右空格的方法
這篇文章主要介紹了JS使用正則實(shí)現(xiàn)去掉字符串左右空格的方法,結(jié)合實(shí)例形式分析了JS針對(duì)首尾匹配及空格匹配的簡(jiǎn)單實(shí)現(xiàn)技巧,需要的朋友可以參考下2016-12-12前端JavaScript實(shí)現(xiàn)文件壓縮的全面優(yōu)化指南
JavaScript文件大小直接影響網(wǎng)頁(yè)加載速度和用戶體驗(yàn),本文將詳細(xì)介紹從基礎(chǔ)到高級(jí)的各種JavaScript壓縮優(yōu)化技術(shù),小伙伴可以根據(jù)需求進(jìn)行選擇2025-04-04video.js 實(shí)現(xiàn)視頻只能后退不能快進(jìn)的思路詳解
這篇文章主要介紹了video.js 實(shí)現(xiàn)視頻只能后退不能快進(jìn)的思路詳解,主要思路是點(diǎn)擊進(jìn)度條需要獲取拖動(dòng)前的時(shí)間點(diǎn),具體實(shí)例代碼大家跟隨小編一起看看吧2018-08-08微信小程序?qū)崙?zhàn)之網(wǎng)易云音樂(lè)歌曲詳情頁(yè)實(shí)現(xiàn)代碼
本文給大家介紹了微信小程序?qū)W習(xí)記錄之網(wǎng)易云音樂(lè)歌曲詳情頁(yè)代碼實(shí)現(xiàn),代碼分為html、css和js部分,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-05-05微信小程序使用ucharts在小程序中加入橫屏展示功能的全過(guò)程
這篇文章主要給大家介紹了關(guān)于微信小程序使用ucharts在小程序中加入橫屏展示功能的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用微信小程序具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2022-09-09