uniapp2023年微信小程序头像+昵称分别获取

1、DOM

javascript 复制代码
<view class="m-user">
	<view class="user-info">
		<!--头像 GO-->
		<button class="avatar avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar"
			slot="right">
			<image mode="aspectFill" src="默认的空图" v-if="!userinfo.avatar"></image>
			<image mode="aspectFill" :src="userinfo.avatar" v-else></image>
		</button>
		<!--昵称  GO-->
		<view class="nickname">
			<view class="tit" v-if="userinfo.nickname">
				<input  type="nickname" style="font-size:28rpx;flex: 1;" placeholder="请输入昵称"
					v-model="userinfo.nickname" @blur="getNickname" />
				<view class="font-24 mt40">
					{{userinfo.username}}
				</view>
			</view>
			<view class="tit" v-else>
				<text class="auth-login" @click="$zeropo.to(`/pages/users/login`)">授权登录</text>
			</view>
		</view>
	</view>
</view>

3、JS

javascript 复制代码
data() {
	return {
		HTTP_URL: this.$HTTP_URL,//服务器域名,按自己的项目修改
		userinfo: {
			nickname: '',//昵称
			username: '',//微信授权的字符
			avatar: '',//头像
		},
	}
},
/*methods*/
// 获取头像
onChooseAvatar(e) {
	let token = uni.getStorageSync('token')
	uni.showLoading()
	uni.uploadFile({
		url: this.HTTP_URL + '/common/upload',//上传接口,按自己的项目修改
		header: {
			token: token
		},
		filePath: e.detail.avatarUrl,
		name: 'file',
		success: (res) => {
			const r = JSON.parse(res.data);
			this.$api.post({
				url: '/user/profile',//更新用户信息的接口,按自己的项目修改
				data: {
					avatar: this.HTTP_URL + r.data.fileName,
				},
				success: re => {
					setTimeout(function() {
						uni.showToast({
							title: "设置成功"
						})
						uni.hideLoading()
					}, 1000)
					uni.stopPullDownRefresh();
				},
				fail: err => {

				},
			});

		},
		fail: (e) => {
			console.log('e', e)
		}
	});

},
// 获取昵称
getNickname(e) {
	this.nickname = e.detail.value
	this.$api.post({
		url: '/user/profile',更新用户信息的接口,按自己的项目修改
		data: {
			nickname: this.nickname,
		},
		success: re => {
			setTimeout(function() {
				uni.showToast({
					title: "设置成功"
				})
				uni.hideLoading()
			}, 1000)
			uni.stopPullDownRefresh();
			this.getUserinfo();//刷新用户信息,没写这个方法,按自己的项目修改,如果是表单页面则去掉
		},
		fail: err => {
			console.log('e', err)
		},
	});
},

3、CSS

css 复制代码
.m-user {
	height: 150rpx;
	padding: 30rpx 30rpx 0;
	border-bottom: 1rpx solid #f7f7f7;
	.user-info {
		display: flex;
		align-items: center;
		justify-content: space-between;
		.avatar {
			width: 130rpx;
			width: 130rpx;
			border: 0;
			background: none;
			padding: 0;
			margin: 0;
			line-height: 0;

			image {
				width: 130rpx;
				height: 130rpx;
				border-radius: 10rpx;
				overflow: hidden;
			}
		}

		.nickname {
			width: 550rpx;
			height: 130rpx;
			text-align: left;
			float: left;
			.tit {
				font-size: 30rpx;
				width: 100%;
				color: #1d363a;
				float: left;
				.auth-login {
					width: 140rpx;
					height: 50rpx;
					font-size: 26rpx;
					background: #fffae7;
					float: right;
					line-height: 50rpx;
					border-radius: 25rpx;
					text-align: center;
					color: #fecf5d;
				}

			}

		}

	}

}

3、效果图


4、发布申请隐私后,返回结果

发布申请隐私后,返回头像结果!

发布申请隐私后,返回头像结果!

发布申请隐私后,返回头像结果!

相关推荐
程序员陆通3 分钟前
Vibe Coding开发微信小程序实战案例
微信小程序·小程序·notepad++·ai编程
「、皓子~29 分钟前
后台管理系统的诞生 - 利用AI 1天完成整个后台管理系统的微服务后端+前端
前端·人工智能·微服务·小程序·go·ai编程·ai写作
nbsaas-boot1 小时前
[特殊字符] 分享裂变新姿势:用 UniApp + Vue3 玩转小程序页面分享跳转!
小程序·uniapp·notepad++
老A技术联盟1 小时前
从小白入门,基于Cursor开发一个前端小程序之Cursor 编程实践与案例分析
前端·小程序
you45801 小时前
小程序学习笔记:使用 MobX 实现全局数据共享,实例创建、计算属性与 Actions 方法
笔记·学习·小程序
风铃喵游1 小时前
构建引擎: 打造小程序编译器
前端·小程序·架构
说私域1 小时前
基于开源AI智能名片链动2+1模式S2B2C商城小程序的抖音渠道力拓展与多渠道利润增长研究
人工智能·小程序·开源
MonkeyKing_sunyuhua3 小时前
微信小程序能不能获取物联网的上的设备数据
物联网·微信小程序·小程序
paopaokaka_luck3 小时前
基于SpringBoot+Vue的酒类仓储管理系统
数据库·vue.js·spring boot·后端·小程序
mg6683 小时前
微信小程序入门实例_____从零搭建你的第一个微信小程序
微信小程序·小程序