uni-app获取微信头像昵称

uni-app获取微信头像昵称，使用uView的弹窗显示修改信息，使用vuex存储用户信息，效果如下

如下为代码，在此记录实现

<!-- 用户卡片 -->
<view class="user-card"  @click="showPop">
	<image class="avatar" :src="userInfo.avatar || defaultAvatarUrl"></image>
	<view class="nickname">{{ userInfo.nickName }}</view>
</view>

<!-- 普通弹窗 -->
<u-popup :show="show" :round="10" mode="bottom" @close="close" @open="open">
	<view class="containar">
		<view class="containar-title">授权用户头像昵称</view>

		<view class="containar-row">
			<view>头像</view>
			<view class="avatarUrl">
				<button type="balanced" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
					<image class="refreshIcon" :src="updateUser.avatar"></image>
				</button>
			</view>
		</view>
		<u-line hairline="false" margin="20px 0 20px 0"></u-line>

		<view class="containar-row">
			<view>昵称</view>
			<view>
				<input type="nickname" style="text-align: right" placeholder="请输入昵称"
					:value="updateUser.nickName" @input="onInputChange" />
			</view>
		</view>
		<u-line hairline="false" margin="20px 0 20px 0"></u-line>

		<view  class="containar-row">
			<view class="btn">
				<u-button type="primary" :plain="true" text="取消" @click="canclePop"></u-button>
			</view>
			<view class="btn">
				<u-button type="primary" text="确定" @click="confirmUser"></u-button>
			</view>
		</view>
	</view>
</u-popup>


<script>
	data() {
		return {
			userInfo: {},
			updateUser: {},
			defaultAvatarUrl: 'https://ibi-business.oss-cn-beijing.aliyuncs.com/frontend/imges/default-avatar.png',
		};
	},
	methods: {
		// 展示弹框
		showPop() {
			this.updateUser = {
				avatar: this.userInfo.avatar ? this.userInfo.avatar : defaultAvatarUrl,
				nickName: this.userInfo.nickName ? this.userInfo.nickName : ''
			}
			this.show = true;
			// 隐藏下面的Bar
			uni.hideTabBar({
				animation: true
			});
		},
		// 取消弹框
		canclePop() {
			this.close()
		},
		open() {
			// console.log('open');
		},
		// 关闭弹框
		close() {
			// 恢复下面的Bar
			uni.showTabBar();
			this.show = false
		},
		onChooseAvatar(e) {
			const {
				avatarUrl
			} = e.detail
			// 获取到头像需要上传到自己的服务器oss
			if (avatarUrl) {
				let baseUrl = uni.$http.baseUrl;
				let token = this.$store.state.m_user.token
				uni.uploadFile({
					fileType: "image",
					url: baseUrl + '/oss/upload?project=ptd-map-view',
					filePath: avatarUrl,
					name: 'file',
					formData: {
						//iFile:tempFilePaths[0], // 这里一定不能加,加了 iOS 图片上传会失败
						ibitoken: token,
					},
					// 请求头一定要加，否则 iOS 图片上传会失败
					header: {
						'content-type': 'multipart/form-data'
					},
					success: (res) => {
						let result = JSON.parse(res.data);
						if (result.code === 200) {
							this.updateUser.avatar = result.data.fileName;
						} else {
							uni.$u.toast('上传失败1');
						}
					},
					fail: (e) => {
						uni.$u.toast('上传失败，网络错误', e);
					}
				});
			}
		},
		onInputChange(e) {
			this.updateUser.nickName = e.detail.value
		},
		async confirmUser() {
			let info = {
				avatar: this.updateUser.avatar,
				nickName: this.updateUser.nickName,
				id: this.userInfo.id
			}
			let {
				data: res
			} = await uni.$http.post('/login/updateUserInfo', info);
			if (res && res.code === 200) {
				// 单独更新修改信息
				this.$store.commit('m_user/updateUserNickName', info.nickName);
				this.$store.commit('m_user/updateUserAvatar', info.avatar);
				// 更新本地 userInfo
				this.userInfo.nickName = info.nickName;
				this.userInfo.avatar = info.avatar;
				// 显示更新成功提示
				uni.showToast({
					title: '用户信息更新成功',
					icon: 'success'
				});
				this.close()
			} else {
				uni.showToast({
					title: '用户信息更新失败',
					icon: 'fail'
				});
			}
		},
	}
</script>

 <!-- 样式 -->
<style lang="scss" scoped>
.user-card {
  background: #fff;
  border-radius: 20rpx;
  margin: 32rpx 24rpx 0 24rpx;
  display: flex;
  align-items: center;
  padding: 32rpx 24rpx;
  .avatar {
    width: 100rpx;
    height: 100rpx;
    border-radius: 50%;
    margin-right: 28rpx;
    border: 2rpx solid #eee;
    background: #f0f0f0;
  }
  .nickname {
    font-weight: bold;
    font-size: 32rpx;
    color: #333;
  }
}

.containar {
	.containar-title {
		padding: 20px;
		font-weight: bold;
	}

	.containar-row {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-right: 20px;
		padding-left: 20px;
	}
	
	.btn {
		width: 45%;
	}

	.avatarUrl {
		padding: 0;
		background: #fff;

		button {
			background: #fff;
			line-height: 15rpx;
			height: auto;
			border: none !important;
			width: auto;
			padding: 0;
			margin: 0;
			display: flex;
			border: none;
			justify-content: center;
			align-items: center;

			&::after {
				border: none;
			}

			.refreshIcon {
				width: 30px;
				height: 30px;
				border-radius: 50%;
				background-color: #ccc;
			}
			
		}
	}

	.avatarUrl:active {
		transform: scale(0.8);
	}
}
</style>

关于 uni-app 小程序使用 vuex 可以查看文章：登录与初始化vuex

---

完~

#微信昵称 #小程序