uni.getUserProfile 已廢棄
//授權(quán)獲取用戶信息 廢棄
getUserProfile(e) {
console.log('授權(quán)登錄')
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();
}
})
},
提示： 新規(guī)則 需要注意兩點
1. 獲取的頭像路徑得處理一下，這個方法獲取的路徑是本地路徑，所以得走上傳接口
2. 獲取昵稱后，開發(fā)者工具上 一直提示 昵稱是空，但是 真機上 是正常的
新規(guī)則 樣式
文章來源：http://www.zghlxwxcb.cn/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>
文章來源地址http://www.zghlxwxcb.cn/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
},
// 選擇用戶頭像， 重點， 得調(diào)用下上傳圖片接口
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
}
// 坑，，，點擊昵稱后，開發(fā)者工具上 一直提示 昵稱是空，但是 真機上 是正常的
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;
}
到了這里，關(guān)于【uniapp，樣式，登錄】【微信小程序】獲取用戶昵稱和頭像 uni.getUserProfile 廢棄 后 新規(guī)則 寫法的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
