uniapp 微信小程序头像昵称修改

 一、规则修改

由于小程序规则的修改，原本uniapp官网自带的uni.getUserProfile的方法已经被收回了，使用不了，具体公告链接如下：小程序用户头像昵称获取规则调整公告 | 微信开放社区 (qq.com)https://developers.weixin.qq.com/community/develop/doc/00022c683e8a80b29bed2142b56c01

规则公告

 修改为了头像昵称填写能力，官网如下：小程序用户头像昵称获取规则调整公告 | 微信开放社区 (qq.com)https://developers.weixin.qq.com/community/develop/doc/00022c683e8a80b29bed2142b56c01

二、uniapp写法

 根据uniapp的写法，可参考一下样式及代码，这里我区分为了avatar和userInfo.avatar，userInfo.avatar为后端数据获取拿到的用户信息，而avatar则是我更改头像后进行了一个本地存储，点击了确定之后才将更新后的头像传给后端并更新userInfo的数据，昵称则是同理，昵称用的是value进行初始化显示，而填写或者获取到的数据我都存在了本地的nickname字段中，点击确定后才进行更新。

样式

 

<view class="content">
	<view class="titletxt">修改头像、昵称</view>
	<view class="lbox1">
		<text>头像</text>
		<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar" slot="right">
			<image class="avatar" :src="avatar?avatar:userInfo.avatar"></image>
		</button>
	</view>
	<view class="lbox1">
		<text>昵称</text>
		<input type="nickname" class="weui-input" :value="userInfo.nickname" @blur="userNameInput"
						placeholder="请输入昵称" />
	</view>
	<view class="btnbox">
		<view class="nobtn">取消</view>
		<view class="surebtn">确定</view>
	</view>
</view>

onChooseAvatar(e) {
	this.avatar = e.detail.avatarUrl;
},
//获取昵称输入内容
userNameInput(e) {
	this.nickname = e.detail.value
},