微信小程序获取头像以及昵称

本文介绍了微信小程序在2022年11月8日后对`wx.getUserProfile`接口的调整,用户头像和昵称获取需通过新的方式,如使用`chooseAvatar`事件和`input`组件的`nickname`类型。同时,上传头像时需要注意微信的敏感信息检测。
摘要由CSDN通过智能技术生成

原来是通过 wx.getUserProfile() 来获取用户微信昵称和头像,但是最近有一次调整,公告内提到了 wx.getUserProfile 接口将会在 2022年11月8日24时 被收回(基础库版本低于2.27.1的可以继续正常返回),生效期后发布的小程序通过 wx.getUserInfo 接口获取用户头像将统一返回默认灰色头像,昵称将统一返回 “微信用户”。


在新版本下 获取微信头像 需要通过在 button 组件上绑定 open-type 属性并设置为 chooseAvatar 后,通过 bindchooseavatar 事件回调获取到头像信息的临时路径。

获取微信昵称 则需要把 input 组件的 type-type 属性设置为 nickname,在用户点击输入框后将会在键盘上方会展示微信昵称,所以并不会通过一个接口直接返回用户头像和昵称了。

<view class="wraper">
		<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
			<image class="avatar" :src="avatarUrl" mode=""></image>
		</button>
		<input type="nickname" class="weui-input" placeholder="请输入昵称" @change="getNickname" />
		<view class="button">
			<u-button customStyle="width: 40%;color:#07c160;border-color: #efefef;" @click="close">取消</u-button>
			<u-button customStyle="width: 40%;background-color:#07c160;color:#fff" @click="getupdate">立即修改</u-button>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>

方法:
            getNickname(e) {
				this.querName.nickname = e.detail.value;
			},
			onChooseAvatar(e) {
				const {
					avatarUrl
				} = e.detail
				this.avatarUrl = avatarUrl
			},

昵称的获取方式通过chang事件拿到nickName的名称

其中在获取头像的临时路径后需要通过uploadFile方法上传到服务器

		uni.uploadFile({
					url: ``, // 后台接口
					filePath: this.avatarUrl, // 上传图片 url
					name: 'file',
					header: {
						'Content-Type': 'multipart/form-data',
						"Authorization": uni.getStorageSync('token'),
					}, // header 值
					success: res => {
						
					},
					fail: e => {
						this.$u.toast(`请上传头像`)
					}
				});

其中微信会对上传的图片做敏感信息检测

  • 8
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要在微信小程序获取用户的头像昵称,可以通过调用微信提供的接口来实现。以下是获取用户头像昵称的步骤: 1. 在小程序的页面中,使用`wx.getUserInfo`方法获取用户的基本信息,包括头像昵称等。示例代码如下: ```javascript wx.getUserInfo({ success: function(res) { var userInfo = res.userInfo; var nickName = userInfo.nickName; // 用户昵称 var avatarUrl = userInfo.avatarUrl; // 用户头像图片链接 // 这里可以将获取到的信息保存到本地或发送到服务器进行处理 } }); ``` 2. 在小程序的`app.js`或需要使用用户信息的页面中,需要在`onLaunch`或`onLoad`方法中调用`wx.login`方法获取用户的登录凭证code。示例代码如下: ```javascript wx.login({ success: function(res) { if (res.code) { // 登录成功,获取到用户的登录凭证code var code = res.code; // 这里可以将code发送到服务器进行处理,用于换取用户的openid等信息 } else { console.log('登录失败!' + res.errMsg); } } }); ``` 需要注意的是,获取用户信息和登录凭证code的接口都需要用户授权才能调用成功。在小程序的`app.json`文件中,需要添加`scope.userInfo`和`scope.login`权限,示例代码如下: ```json { "pages": [ "pages/index/index" ], "permission": { "scope.userLocation": { "desc": "你的位置信息将用于小程序定位" }, "scope.userInfo": { "desc": "你的头像、称等信息将用于小程序展示" }, "scope.login": { "desc": "你的登录凭证将用于小程序登录" } } } ``` 这样,当用户打开小程序时,会弹出授权提示框,让用户授权获取头像昵称的权限。用户授权后,就可以成功获取到用户的头像昵称信息了。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值