Uniapp 微信小程序 最新 获取用户头像 和 昵称 方法 有效可用

文章目录

  • 前言
  • 代码实现
  • 运行效果
  • 技术分析


前言

同事有个需求 授权获取用户头像 和 昵称 。之前做过线上小程序发版上线流程 就实现了下 最新的方法和 api 有些变化 记录下


代码实现

先直接上代码







运行效果

Uniapp 微信小程序 最新 获取用户头像 和 昵称 方法 有效可用_第1张图片
Uniapp 微信小程序 最新 获取用户头像 和 昵称 方法 有效可用_第2张图片
Uniapp 微信小程序 最新 获取用户头像 和 昵称 方法 有效可用_第3张图片

技术分析

旧版本的 getUserProfile和getUserInfo接口不再能获取用户信息

  • chooseAvatar
    这个方法用于处理用户选择头像的操作。当用户点击按钮并选择头像时,open-type=“chooseAvatar” 会触发这个事件。
    事件参数 e 中包含了用户选择的头像信息。具体来说,e.detail.avatarUrl 会返回用户选择的头像的 URL。
    方法体内使用 this.userInfo.avatarUrl = e.detail.avatarUrl; 将获取到的头像 URL 保存到组件的 userInfo 数据对象中,更新头像的显示。

  • getNickname
    这个方法用于处理用户输入昵称时的操作。当用户在昵称输入框中输入内容并失去焦点时,@blur=“getNickname” 会触发这个事件。
    同样,事件参数 e 中含有用户输入的相关信息,e.detail.value 将返回用户在输入框中输入的昵称内容。
    方法体内使用 this.userInfo.userName = e.detail.value; 将获取到的昵称保存到 userInfo 数据对象中,更新显示的昵称内容。
    总结来说,onChooseavatar 方法用于更新用户头像,getNickname 方法用于更新用户昵称,这两者都通过事件处理和数据绑定来实现用户信息的动态更新。

有用的 不妨 点个赞评论下

你可能感兴趣的:(Uniapp,Vue,uni-app,前端,javascript,vue,微信小程序)