微信小程序获取用户头像调整

微信小程序在用户隐私策略调整后,开发者需采用新方式获取用户头像和昵称:用户主动选择头像并输入昵称。旧接口如getUserProfile和getUserInfo将返回默认头像,插件需适配。推荐使用头像昵称填写能力,从2.21.2版本起支持iOS和安卓8.0.16以上。

微信小程序获取用户头像,由于用户隐私策略调整,腾讯对获取用户信息也进行了调整。

记录内容如下:

1 新方式

新的方式:当触发获取用户头像时,由用户选择头像图片,输入昵称。

具体代码如下,即,昵称:改为用户输入方式;头像:改为用户可选择提供。

 
  <form bindsubmit="userInfoLogin">
  <input name="nickname" type="nickname" class="calculate-input" placeholder="请输入昵称" value="{{nickName}}"   />
  <button class="move-anim-box weight-save" type="primary" form-type="submit">保存</button>
 
  
  </form>
 
 userInfoLogin(e) {
 this.setData({
      nickName: e.detail.value.nickname
    })
},

2 调整说明

按照开发使用基础库,采取了不同的策略。下文摘自腾讯开发指南:

自 2022 年 10 月 25 日 24 时后(以下统称 “生效期” ),用户头像昵称获取规则将进行如下调整:

  • 自生效期起,小程序 wx.getUserProfile 接口将被收回:生效期后发布的小程序新版本,通过 wx.getUserProfile 接口获取用户头像将统一返回默认灰色头像,昵称将统一返回 “微信用户”。生效期前发布的小程序版本不受影响,但如果要进行版本更新则需要进行适配。
  • 自生效期起,插件通过 wx.getUserInfo 接口获取用户昵称头像将被收回:生效期后发布的插件新版本,通过 wx.getUserInfo 接口获取用户头像将统一返回默认灰色头像,昵称将统一返回 “微信用户”。生效期前发布的插件版本不受影响,但如果要进行版本更新则需要进行适配。通过 wx.login 与 wx.getUserInfo 接口获取 openId、unionId 能力不受影响。
  • 「头像昵称填写能力」支持获取用户头像昵称:如业务需获取用户头像昵称,可以使用「头像昵称填写能力」(基础库 2.21.2 版本开始支持,覆盖iOS与安卓微信 8.0.16 以上版本),具体实践可见下方《最佳实践》。
  • 小程序 wx.getUserProfile 与插件 wx.getUserInfo 接口兼容基础库 2.27.1 以下版本的头像昵称获取需求:对于来自低版本的基础库与微信客户端的访问,小程序通过 wx.getUserProfile 接口将正常返回用户头像昵称,插件通过 wx.getUserInfo 接口将正常返回用户头像昵称,开发者可继续使用以上能力做向下兼容。

对于上述 3,wx.getUserProfile 接口、wx.getUserInfo 接口、头像昵称填写能力的基础库版本支持能力详细对比见下表:

在 UniApp 中开发微信小程序时,若需获取微信用户头像和昵称,需特别注意自 2022 年 10 月 25 日起,微信官方对用户信息接口的调整。具体而言,`wx.getUserProfile` 和 `wx.getUserInfo` 接口将不再返回真实用户头像和昵称,而是统一返回默认灰色头像和“微信用户”这一昵称[^2]。 为了实现获取用户头像和昵称的需求,开发者可以采用 **手动上传头像** 和 **用户填写昵称** 的方式来替代原有接口功能。以下是具体的实现方法: ### 手动上传用户头像 通过调用 `wx.chooseImage` 接口,允许用户从本地相册中选择一张图片作为头像,并通过 `uni.uploadFile` 方法上传至服务器进行保存。 ```javascript // 用户选择图片并上传 chooseAndUploadAvatar() { uni.chooseImage({ count: 1, // 只能选择一张图片 sizeType: ['compressed'], // 可以指定是原图还是压缩图,默认二者都有 sourceType: ['album', 'camera'], // 可以指定来源是相册或相机,默认二者都有 success: (res) => { const tempFilePath = res.tempFilePaths[0]; uni.uploadFile({ url: 'https://yourdomain.com/upload', // 替换为你的服务器地址 filePath: tempFilePath, name: 'file', success: (uploadRes) => { console.log('头像上传成功:', uploadRes.data); // 处理上传后的文件路径 }, fail: (err) => { console.error('头像上传失败:', err); } }); }, fail: (err) => { console.error('选择图片失败:', err); } }); } ``` ### 用户填写昵称 通过页面中的输入框让用户自行输入昵称,并通过表单提交的方式将数据发送到服务器端保存。 ```html <template> <view> <input v-model="nickname" placeholder="请输入昵称" /> <button @click="submitNickname">提交</button> </view> </template> <script> export default { data() { return { nickname: '' }; }, methods: { submitNickname() { uni.request({ url: 'https://yourdomain.com/api/saveNickname', method: 'POST', data: { nickname: this.nickname }, success: (res) => { console.log('昵称保存成功:', res.data); }, fail: (err) => { console.error('昵称保存失败:', err); } }); } } }; </script> ``` ### 获取用户授权(仅用于其他非敏感信息) 虽然无法再通过授权接口获取头像和昵称,但你仍可通过 `wx.authorize` 请求用户授权其他权限,如地理位置、通讯录等。 ```javascript uni.authorize({ scope: 'scope.userInfo', success() { console.log('用户已授权'); }, fail() { console.warn('用户未授权'); } }); ``` ##
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值