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)題，可以參考的這一篇文章的后端代碼部分：
百度翻譯API使用教程（前端+后端）_THE WHY的博客-CSDN博客
代碼展示如下：
@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)
},這里選擇使用用戶頭像即可修改用戶頭像為微信頭像：
文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-526278.html
如果有什么問(wèn)題，歡迎留言討論，作者也是初學(xué)者，如果有錯(cuò)誤的話歡迎指正~文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-526278.html
到了這里，關(guān)于微信小程序獲取用戶手機(jī)號(hào)碼教程（前端＋后端）的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
