uni.getUserProfile 已废弃
//授权获取用户信息 废弃
getUserProfile(e) {
console.log('授权登录')
uni.showLoading({
title: '加载中'
})
let that = this
uni.getUserProfile({
desc: '用于完善会员资料',
success: (res) => {
uni.hideLoading();
that.nickName = res.userInfo.nickName
that.avatar = res.userInfo.avatarUrl
that.rawData = res.userInfo;
// console.log(res.userInfo,'用户信息')
that.wxlogin();
},
fail() {
uni.hideLoading();
}
})
},
提示： 新规则 需要注意两点
1. 获取的头像路径得处理一下，这个方法获取的路径是本地路径，所以得走上传接口
2. 获取昵称后，开发者工具上 一直提示 昵称是空，但是 真机上 是正常的
新规则 样式
文章来源：https://www.toymoban.com/news/detail-515544.html
html
<u-popup mode="bottom" :show="getnickshow" @close="getnickshow = false" round='16rpx'>
<view class="getnickbox">
<view class="flex_align_center">
<image :src="project.logo" class="logoimg" mode="aspectFit"></image>
<view class="name">
{{project.name}}
<text>申请</text>
</view>
</view>
<view class="m1 mt30">获取你的头像、昵称</view>
<view class="m2">展示个人信息</view>
<view class="xin1">
<button
type="default" class="flex_spacebetween buttoncss" open-type="chooseAvatar" @chooseavatar="chooseavatar">
<view class="flex_align_center toubox">
<view class="t1">头像</view>
<view v-if="avatar == ''" class="avatarbox">
<u-icon name="account-fill" size="50" color="#999"></u-icon>
</view>
<image v-else :src="avatar" class="avatarimg"></image>
</view>
<u-icon name="arrow-right" size="25" color="#999"></u-icon>
</button>
</view>
<view class="nick">
<view class="n1">昵称:</view>
<input type="nickname" v-model="nickname" placeholder="请输入昵称">
</view>
<view class="fixedBtn wan">
<button size="mini" open-type="getUserInfo" @click="getUserInfo" :plain='true' class="btn">完成</button>
</view>
</view>
</u-popup>
文章来源地址https://www.toymoban.com/news/detail-515544.html
js
data() {
return {
getnickshow:false,
project:{
name :'',
logo :'',
},
avatar:''
};
},
onShow() {
// 获取项目的 logo 和 名称
uni.getSystemInfo({
success: (res) =>{
this.project.name = res.appName
}
})
this.project.logo = __wxConfig.accountInfo.icon
},
// 选择用户头像， 重点， 得调用下上传图片接口
chooseavatar(e){
uni.uploadFile({
url: baseUrl + 'api/common/upload',
filePath: e.detail.avatarUrl,
name: 'file',
formData: {
is_wxhead: 1
},
header: {
// Authorization: uni.getStorageSync("token")
},
success: r => {
let imgData = JSON.parse(r.data)
console.log(imgData)
this.avatar = imgData.data.fullurl;
}
});
},
async getUserInfo(){
let that = this;
if(this.avatar == ""){
uni.showToast({
title: '请选择头像',
icon: 'none'
})
return
}
// 坑，，，点击昵称后，开发者工具上 一直提示 昵称是空，但是 真机上 是正常的
if(this.nickname == ""){
uni.showToast({
title: '请编辑用户昵称或昵称不能使用特殊字符',
icon: 'none'
})
return
}
that.rawData = {
language: "zh_CN",
nickName: that.nickname,
avatarUrl: that.avatar
}
that.wxlogin();
},
css
.getnickbox{
padding: 40rpx 20rpx;
.logoimg{
width:50rpx;
height:50rpx;
}
.name{
margin-left:20rpx;
text{
margin-left:10rpx;
}
}
.m1{
font-weight: 500;
}
.m2{
padding-bottom: 30rpx;
border-bottom: 1rpx solid #f2f2f2;
color:#999;
padding-top: 10rpx;
font-size: 24rpx;
}
.xin1{
border-bottom: 1rpx solid #f2f2f2;
margin-bottom: 30rpx;
.toubox{
padding: 10rpx 0;
display: flex;
align-items: center;
.t1{
font-size: 28rpx;
margin-right: 30rpx;
}
.avatarbox{
width: 100rpx;
height: 100rpx;
border-radius: 20rpx;
}
.avatarimg{
width: 100rpx;
height: 100rpx;
border-radius: 20rpx;
}
}
}
.buttoncss{
background-color: #fff;
border-radius: 0px;
border: 0rpx solid transparent;
display: flex;
align-items: center;
justify-content: space-between;
}
button::after{
border: 0px solid rgba(0,0,0,.2);
}
.nick{
padding-bottom: 30rpx;
border-bottom:2rpx solid #f2f2f2;
display: flex;
align-items: center;
padding-left: 14px;
padding-right: 14px;
.n1{
font-size: 28rpx;
margin-right: 30rpx;
}
}
.wan{
position: relative;
height: 100rpx;
box-shadow: 0rpx 0rpx 0rpx 0rpx;
margin-top: 30rpx;
}
.mt30{
margin-top: 30rpx;
}
}
.flex_align_center{
display: flex;
align-items: center;
}
到了这里，关于【uniapp，样式，登录】【微信小程序】获取用户昵称和头像 uni.getUserProfile 废弃 后 新规则 写法的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
