微信小程序獲取用戶手機(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-05
JS使用正則實(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-04
video.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

