Uniapp 微信小程序获取微信昵称、头像

技术栈：Uniapp + Vue3 + uview-plus

简介

因实际需求，需要本小程序支持用户修改默认的头像、用户名，其中还需支持获取微信账号的头像、昵称。

原本可直接获取昵称、头像的 wx.getUserInfo与 open-type=“getUserInfo” 获取用户个人信息（头像、昵称、性别与地区），权限已经被微信收回。

具体可查看微信官方文档：

1. wx.getUserInfo(Object object)
2. 小程序登录、用户信息相关接口调整说明

但是微信单独提供了接口来支持替换此功能

1. getUserProfile
2. button 配置 open-type=“chooseAvatar” @chooseavatar=“onChooseavatar”
3. input 配置 type=“nickname”

实现

获取微信头像

为了页面显示效果和功能实现，需要使用 button包裹住头像，button 配置 相关属性，chooseavatar 内接收、处理图片路径。

<up-cell-group>
  <up-cell :isLink="false">
    <template #title> <view class="title">头像</view> </template>
    <template #value>
      <button
        class="avatar-btn"
        style="border-radius: 50%"
        open-type="chooseAvatar"
        @chooseavatar="onChooseavatar"
      >
        <up-avatar :src="infoForm.avatar" :size="64"></up-avatar>
      </button>
    </template>
  </up-cell>
</up-cell-group>

import {
   
    reactive } from "vue";

const infoForm = reactive({
   
    avatar: "" });

// 选择头像｜手机内其他图片
const onChooseavatar = (e) => {
   
   
  new Promise((resolve, reject) => {
   
   
  // 获取图片信息（临时路径）
    uni.getImageInfo({
   
   
      src: e.detail.avatarUrl,
      success: (res) => {
   
   
        // console.log("图片信息", res)
        resolve(res);
      },
      fail: (err) => {
   
   
        // console.error("获取图片信息失败了", err)
        reject(err);
      },
    });
  })
    .then((res) => {
   
   
      return Promise.resolve({
   
   
        tempFilePath: e.detail.avatarUrl,
      });
    })
    .then((res) => {
   
   
      infoForm.avatar = e.detail.avatarUrl;
      // 上传头像到服务器
      // return uploadAvatar(res).then((res) => {
   
   
      //   infoForm.avatar = res.url; 
      // });
    })
    .catch((err) => {
   
   
    	// 获取失败时使用store内默认头像
    	// infoForm.avatar = userStore.userInfo.avatar
    });
};

获取微信昵称

获取微信昵称就相对比较简单，只需要input配置type=“nickname” 即可，其他按照正常逻辑。

<up-form
  labelPosition="left"
  :labelWidth="100"
  :model="infoForm"
  ref="formRef"
>
  <up-form-item
    label="用户名"
    prop="nickName"
    ref