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

文章目录


前言

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


代码实现

先直接上代码

vue 复制代码
<template>
  <view class="container">
    <button
      class="choose-avatar-button"
      open-type="chooseAvatar"
      @chooseavatar="onChooseavatar"
    >
      获取头像
    </button>

    <view class="user-info">
      <image
        class="avatar"
        :src="userInfo.avatarUrl"
        v-if="userInfo.avatarUrl"
        mode="aspectFill"
      ></image>

      <input
        class="nickname-input"
        type="nickname"
        placeholder="请输入昵称"
        v-model="userInfo.userName"
        @blur="getNickname"
      />
      <text class="display-username">{{ userInfo.userName }}</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      userInfo: {
        avatarUrl: "",
        userName: "",
      },
    };
  },
  methods: {
    onChooseavatar(e) {
      console.log("e", e);
      this.userInfo.avatarUrl = e.detail.avatarUrl;
    },
    getNickname(e) {
      console.log("e", e);
      this.userInfo.userName = e.detail.value;
    },
  },
};
</script>

<style lang="scss">
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background-color: #f5f5f5; /* 设置背景颜色 */
  height: 100vh; /* 设置容器高度为100%视口高度 */
}

.choose-avatar-button {
  background-color: #007bff; /* 按钮背景色 */
  color: white; /* 字体颜色 */
  border: none; /* 去掉边框 */
  border-radius: 5px; /* 按钮圆角 */
  padding: 10px 20px; /* 按钮内边距 */
  font-size: 18px; /* 字体大小 */
  margin-bottom: 20px; /* 下边距 */
}

.user-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: white; /* 用户信息背景 */
  border-radius: 10px; /* 圆角 */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* 阴影效果 */
  padding: 20px; /* 内边距 */
  width: 80%; /* 宽度 */
}

.avatar {
  width: 100px; /* 头像宽度 */
  height: 100px; /* 头像高度 */
  border-radius: 50%; /* 圆形 */
  margin-bottom: 10px; /* 下边距 */
}

.nickname-input {
  width: 100%; /* 输入框宽度 */
  padding: 10px; /* 内边距 */
  border: 1px solid #ccc; /* 边框 */
  border-radius: 5px; /* 圆角 */
  font-size: 16px; /* 字体大小 */
  margin-bottom: 10px; /* 下边距 */
}

.display-username {
  margin-top: 10px; /* 上边距 */
  font-size: 20px; /* 字体大小 */
  color: #333; /* 字体颜色 */
}
</style>

运行效果



技术分析

旧版本的 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 方法用于更新用户昵称,这两者都通过事件处理和数据绑定来实现用户信息的动态更新。

有用的 不妨 点个赞评论下

相关推荐
逐·風2 小时前
unity关于自定义渲染、内存管理、性能调优、复杂物理模拟、并行计算以及插件开发
前端·unity·c#
Devil枫2 小时前
Vue 3 单元测试与E2E测试
前端·vue.js·单元测试
Yaml43 小时前
Spring Boot 与 Vue 共筑二手书籍交易卓越平台
java·spring boot·后端·mysql·spring·vue·二手书籍
尚梦3 小时前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app
GIS程序媛—椰子3 小时前
【Vue 全家桶】6、vue-router 路由(更新中)
前端·vue.js
前端青山4 小时前
Node.js-增强 API 安全性和性能优化
开发语言·前端·javascript·性能优化·前端框架·node.js
毕业设计制作和分享4 小时前
ssm《数据库系统原理》课程平台的设计与实现+vue
前端·数据库·vue.js·oracle·mybatis
从兄5 小时前
vue 使用docx-preview 预览替换文档内的特定变量
javascript·vue.js·ecmascript
小飞哥liac6 小时前
微信小程序的组件
微信小程序
清灵xmf6 小时前
在 Vue 中实现与优化轮询技术
前端·javascript·vue·轮询