在使用 HBuilderX 开发 uni-app 项目时，可以通过以下步骤实现微信小程序中获取用户头像、昵称、授权登录以及用户手机号。
1. 配置微信小程序的权限
在微信小程序后台中，确保已经启用了相关的功能模块，如：
- 登录（
wx.login） - 用户信息（
getUserProfile） - 获取手机号（
wx.getPhoneNumber）
同时在 app.json 中配置授权弹窗的提示：
{
"permission": {
"scope.userInfo": {
"desc": "用于完善会员资料"
},
"scope.userLocation": {
"desc": "用于显示您的位置信息"
}
}
}
2. 授权获取用户头像、昵称
从微信小程序 2.10.4 版本开始，推荐使用 wx.getUserProfile 获取用户信息。
示例代码
methods: {
getUserProfile() {
wx.getUserProfile({
desc: '用于完善会员资料', // 授权提示内容
success: (res) => {
console.log('用户信息:', res.userInfo);
// 处理用户信息
this.userInfo = res.userInfo;
},
fail: (err) => {
console.log('用户拒绝授权:', err);
}
});
}
}
注意
wx.getUserProfile 不会自动缓存用户信息，每次调用都需要用户确认。
3. 登录获取用户唯一标识（OpenID）
利用 wx.login 方法获取登录凭证 code，并通过后台接口换取 openid 和 session_key。
示例代码
methods: {
login() {
wx.login({
success: (res) => {
if (res.code) {
console.log('登录成功，code:', res.code);
// 调用后台接口，将 code 发送到服务端获取 openid 和 session_key
uni.request({
url: 'https://yourserver.com/api/login',
method: 'POST',
data: {
code: res.code
},
success: (res) => {
console.log('服务器返回:', res.data);
}
});
} else {
console.log('登录失败:', res.errMsg);
}
}
});
}
}
4. 获取用户手机号
通过微信小程序的 button 组件的 open-type="getPhoneNumber" 属性，获取用户手机号。
WXML 部分
<button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">获取手机号</button>
JS 部分
methods: {
getPhoneNumber(e) {
if (e.detail.errMsg === 'getPhoneNumber:ok') {
console.log('用户手机号加密数据:', e.detail.encryptedData);
console.log('iv:', e.detail.iv);
// 将加密数据和 iv 发送到后台解密
uni.request({
url: 'https://yourserver.com/api/decryptPhoneNumber',
method: 'POST',
data: {
encryptedData: e.detail.encryptedData,
iv: e.detail.iv,
sessionKey: this.sessionKey // 从登录接口获取的 session_key
},
success: (res) => {
console.log('解密后的手机号:', res.data.phoneNumber);
}
});
} else {
console.log('用户拒绝授权:', e.detail.errMsg);
}
}
}
5. 完整代码示例
结合以上方法，以下是一个整合用户头像、昵称、授权登录和获取手机号的完整示例。
WXML
<view class="container">
<button @tap="getUserProfile">获取用户信息</button>
<button @tap="login">登录</button>
<button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">获取手机号</button>
</view>
JS
export default {
data() {
return {
userInfo: null,
sessionKey: '' // 登录后从后台获取
};
},
methods: {
getUserProfile() {
wx.getUserProfile({
desc: '用于完善会员资料',
success: (res) => {
this.userInfo = res.userInfo;
console.log('用户信息:', res.userInfo);
},
fail: (err) => {
console.log('用户拒绝授权:', err);
}
});
},
login() {
wx.login({
success: (res) => {
if (res.code) {
console.log('登录成功，code:', res.code);
// 调用后台接口换取 sessionKey 和 openid
uni.request({
url: 'https://yourserver.com/api/login',
method: 'POST',
data: { code: res.code },
success: (res) => {
this.sessionKey = res.data.sessionKey;
console.log('服务器返回:', res.data);
}
});
} else {
console.log('登录失败:', res.errMsg);
}
}
});
},
getPhoneNumber(e) {
if (e.detail.errMsg === 'getPhoneNumber:ok') {
console.log('加密手机号数据:', e.detail.encryptedData);
uni.request({
url: 'https://yourserver.com/api/decryptPhoneNumber',
method: 'POST',
data: {
encryptedData: e.detail.encryptedData,
iv: e.detail.iv,
sessionKey: this.sessionKey
},
success: (res) => {
console.log('解密后的手机号:', res.data.phoneNumber);
}
});
} else {
console.log('用户拒绝授权:', e.detail.errMsg);
}
}
}
};
6. 服务端解密逻辑
服务端需使用微信官方提供的解密算法，利用 session_key、encryptedData 和 iv 解密用户数据。常见的服务端语言都有对应的 SDK 或示例。
这样即可完成微信小程序中获取用户头像、昵称、授权登录及手机号的功能实现。
发布者：myrgd，转载请注明出处：https://www.object-c.cn/5169
