uniapp 小程序获取昵称,头像,手机号
时间: 2024-03-31 08:29:55 浏览: 265
在UniApp小程序中,获取用户的昵称、头像和手机号可以通过以下步骤实现:
1. 获取用户昵称和头像:
- 在小程序的`pages.json`文件中配置需要获取用户信息的页面,例如:
```json
{
"pages": [
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "首页",
"app-plus": {
"nvue": true
}
}
}
],
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "uni-app"
},
"tabBar": {}
}
```
- 在需要获取用户信息的页面的`script`标签中添加以下代码:
```javascript
export default {
onLoad() {
uni.getUserInfo({
success: (res) => {
const userInfo = res.userInfo;
console.log(userInfo.nickName); // 用户昵称
console.log(userInfo.avatarUrl); // 用户头像
}
});
}
}
```
2. 获取用户手机号:
- 在小程序的`pages.json`文件中配置需要获取用户手机号的页面,例如:
```json
{
"pages": [
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "首页",
"app-plus": {
"nvue": true
}
}
}
],
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "uni-app"
},
"tabBar": {}
}
```
- 在需要获取用户手机号的页面的`script`标签中添加以下代码:
```javascript
export default {
methods: {
getPhoneNumber(e) {
uni.login({
success: (res) => {
if (res.code) {
uni.request({
url: 'https://your-backend-api.com/decodePhoneNumber', method: 'POST',
data: {
code: res.code,
encryptedData: e.detail.encryptedData,
iv: e.detail.iv
},
success: (res) => {
console.log(res.data.phoneNumber); // 用户手机号
}
});
}
}
});
}
}
}
```
- 在小程序的`template`中添加获取手机号的按钮,并绑定`getPhoneNumber`方法:
```html
<template>
<button @getphonenumber="getPhoneNumber">获取手机号</button>
</template>
```
阅读全文