uniapp开发微信小程序——微信登录,获取头像和昵称
uniapp开发微信小程序——微信登录,获取头像和昵称
·
点击未授权,唤起弹窗
弹窗中获取头像和昵称
<u-popup :show="goLogin" @close="closeLogin" @open="openLogin" mode="bottom" :round="10" :closeable="true">
<view class="login_box">
<view class="log_title">获取您的昵称、头像</view>
<view class="log_tip">获取用户头像、昵称,主要用于向用户提供具有辨识度的用户中心界面</view>
<button class="ava_box" type="balanced" open-type="chooseAvatar" @chooseavatar="onChooseavatar"
style="width: 188rpx;height: 188rpx;margin:0;padding: 0;">
<image class="img_big" :src="avatar?avatar:'../../static/images/mine_avatar.png'" style="width: 188rpx;height: 188rpx;border-radius: 50%;"></image>
<image class="img_samll" src="../../static/images/mine_camera.png" style="width: 60rpx;height: 60rpx;"></image>
</button>
<view class="set_nick">
<input placeholder="请输入昵称" class="nickname" type="nickname" v-model="nickname"
@input="nameInput" @blur="nameInput" />
</view>
<view v-if="avatar && nickname" class="act_save" @click="saveUser">保存</view>
<view v-else class="save">保存</view>
</view>
</u-popup>
更换头像事件
onChooseavatar(e) {
let _this = this;
let imgUrl = {};
imgUrl = e.detail;
uni.showLoading({
title: '加载中'
})
uni.uploadFile({
url: 'http://xxxx.com/upload',
filePath: imgUrl.avatarUrl,
name: 'file',
formData: {
file: "file",
},
header: {
"token": getApp().globalData.token || uni.getStorageSync('token'),
},
success: uploadFileRes => {
// 注意:这里返回的uploadFileRes.data 为JSON 需要自己去转换
let data = JSON.parse(uploadFileRes.data);
if (data.code == 1) {
_this.avatar = data.data.fullurl;
}
},
fail: (error) => {
uni.showToast({
title: error,
duration: 2000
});
},
complete: () => {
uni.hideLoading();
}
});
},
更改昵称事件
nameInput(e) {
this.nickname = e.detail.value
},
然后点击保存更改信息
// 保存信息
saveUser(){
let dataInfo = uni.getStorageSync('userInfo');
let _this = this;
changeInfo({
nickname: _this.nickname,
avatar: _this.avatar,
gender:_this.gender
}, 'json').then(res => {
if (res.code == 1) {
dataInfo.avatar = _this.avatar
dataInfo.nickname = _this.nickname
dataInfo.gender = _this.gender
uni.setStorageSync('userInfo', dataInfo)
_this.goLogin = false
_this.isLogin = true
}
})
}
更多推荐
已为社区贡献8条内容
所有评论(0)