【uni-app】微信小程序获取用户头像、昵称

​

微信小程序获取用户头像、昵称是比较常见的需求，之前是授权一键获取，后面官方改成分别获取了，在这里记录一下其用法。

技术栈：uni-app、Vue3（3.4.21）、TypeScript（4.9.5）、wot-design-uni（1.2.26）、UnoCSS（0.58.9）

​编辑

实现步骤

• 模板布局

获取头像主要是设置按钮属性open-type="chooseAvatar" ，并通过@chooseavatar获取图片。昵称则主要是设置输入框属性 type="nickname"，监听输入内容变化。

<view class="cell-group">
  <wd-cell-group border>
    <wd-cell title="用户头像">
      <button class="cell-wrapper" open-type="chooseAvatar" @chooseavatar="getUserProfile">
        <wd-img
          width="60rpx"
          height="60rpx"
          round
          mode="aspectFill"
          :src="avatarUrl || defaultAvatarImg"
        />
        <wd-icon custom-class="ml-10rpx!" name="arrow-right1" size="28rpx"></wd-icon>
      </button>
    </wd-cell>
  </wd-cell-group>
  <wd-cell-group border>
    <wd-cell custom-class="nick-name" title="用户昵称" :value="nickName">
      <view class="flex justify-end items-center w380rpx">
        <input
          type="nickname"
          maxlength="20"
          class="cell-wrapper color-#777777 text-28rpx mr8rpx text-right"
          v-model="nickName"
          placeholder="请输入用户昵称"
          @change="handleChange"
        />
        <wd-img width="28rpx" height="28rpx" mode="aspectFill" :src="editDown" />
      </view>
    </wd-cell>
  </wd-cell-group>
</view>

• 脚本代码

/** 用户头像 */
const avatarUrl = ref('https://xxx.png')

/** 获取用户头像 */
const getUserProfile = async (e) => {
  // 注意：这里是微信给我们返回图片的临时地址，实际开发中还需要上传图片到服务器
  avatarUrl.value = e.detail.avatarUrl
  // 业务操作：如更新头像到服务器
  console.log('操作成功...')
}

/** 用户昵称的正则表达式验证：1-20个字符 */
const nickNameExp = /^(?! *$)[\s\S]{1,20}$/

/** 用户昵称 */
const nickName = ref('')

/** 用户昵称输入框改变 */
const handleChange = debounce((e) => {
  const nickNameInput = e.detail.value.trim()
  if (nickNameInput === userStore.userInfo.nickName) return
  if (!nickNameExp.test(nickNameInput)) {
    console.log('用户昵称格式有误')
    return
  }
  // 业务操作：如更新昵称到服务器
  console.log('操作成功...')
}, 300)

• CSS样式

.cell-group {
  padding: 32rpx;
  margin-top: 224rpx;

  .cell-wrapper {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0;
    line-height: 1;
    background: none;

    &::after {
      border: none;
    }
  }

  .nick-name {
    color: #2f3032;
    :deep(.wd-cell__right) {
      flex: none !important;
    }
  }

  :deep(.wd-cell-group) {
    margin-top: 32rpx;
    overflow: hidden;
    border: 2rpx solid #d9e1e9;
    border-radius: 20rpx;
  }

  :deep(.wd-cell__wrapper) {
    align-items: center;
    height: 96rpx;
    padding: 28rpx 0;
  }

  :deep(.wd-cell__right) {
    padding-right: 32rpx;
  }

  :deep(.wd-cell__title) {
    --wot-cell-title-fs: 28rpx;
    color: #2f3032;
  }

  :deep(.wd-cell__value) {
    --wot-cell-value-fs: 27rpx;

    color: rgb(0 0 0 / 60%);
  }

  :deep(.wd-cell__arrow-right) {
    --wot-cell-arrow-size: 30rpx;

    color: rgb(0 0 0 / 60%);
  }
}

实现效果

获取头像：

​编辑

获取/修改昵称：

 ​编辑

细节注意

• 微信小程序获取的头像是临时地址，需要调用一次uni.uploadFile上传文件到服务器，再编写业务代码。
• 微信小程序更新头像/昵称会有一个loading的效果，属于官方自带，看起来像调了一次后端接口，么得办法。┓( ´∀` )┏
• 输入框输入昵称时需要 debounce 防止多次频繁操作。

以上就是微信小程序获取头像、昵称的实现啦^-^

​