在微信小程序中，获取用户头像和昵称需要使用新的 wx.getUserProfile 接口（适用于微信版本 >= 7.0.10）。以下是使用 UniApp 实现最新微信小程序获取用户头像和昵称功能的方法：

1. 前端实现

基本用法

<template>
  <view class="container">
    <button 
      v-if="!hasUserInfo" 
      class="getUserInfoBtn" 
      @click="getUserProfile"
    >
      获取头像昵称
    </button>
    
    <view v-else class="userInfo">
      <image 
        :src="userInfo.avatarUrl" 
        class="avatar" 
        mode="aspectFill"
      ></image>
      <text class="nickname">{{ userInfo.nickName }}</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      userInfo: {},
      hasUserInfo: false
    }
  },
  methods: {
    getUserProfile() {
      // 检查是否为微信小程序环境
      // #ifdef MP-WEIXIN
      wx.getUserProfile({
        desc: '用于完善用户资料', // 声明获取用户个人信息后的用途
        success: (res) => {
          console.log('获取用户信息成功', res);
          this.userInfo = res.userInfo;
          this.hasUserInfo = true;
          
          // 可以将用户信息存储到本地
          uni.setStorageSync('userInfo', res.userInfo);
          
          // 如果需要，可以将用户信息发送到服务器
          this.saveUserInfoToServer(res.userInfo);
        },
        fail: (err) => {
          console.error('获取用户信息失败', err);
          uni.showToast({
            title: '获取用户信息失败',
            icon: 'none'
          });
        }
      });
      // #endif
      
      // #ifndef MP-WEIXIN
      uni.showToast({
        title: '请在微信小程序中使用此功能',
        icon: 'none'
      });
      // #endif
    },
    
    saveUserInfoToServer(userInfo) {
      // 发送用户信息到服务器
      // 这里根据你的后端接口进行调整
      uni.request({
        url: 'your-server-api/saveUserInfo',
        method: 'POST',
        data: userInfo,
        success: (res) => {
          console.log('用户信息保存成功', res);
        },
        fail: (err) => {
          console.error('用户信息保存失败', err);
        }
      });
    }
  },
  
  mounted() {
    // 页面加载时检查是否已有用户信息
    const storedUserInfo = uni.getStorageSync('userInfo');
    if (storedUserInfo) {
      this.userInfo = storedUserInfo;
      this.hasUserInfo = true;
    }
  }
}
</script>

<style scoped>
.container {
  padding: 20rpx;
  text-align: center;
}

.getUserInfoBtn {
  background-color: #07c160;
  color: white;
  border: none;
  padding: 20rpx 40rpx;
  border-radius: 10rpx;
  font-size: 32rpx;
}

.userInfo {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.avatar {
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
  margin-bottom: 20rpx;
}

.nickname {
  font-size: 36rpx;
  color: #333;
}
</style>

2. 结合登录功能的完整实现

<template>
  <view class="container">
    <view v-if="!isLogin" class="login-section">
      <button class="login-btn" @click="wxLogin">微信登录</button>
    </view>
    
    <view v-else class="user-section">
      <button 
        v-if="!hasUserInfo" 
        class="get-info-btn" 
        @click="getUserProfile"
      >
        获取头像昵称
      </button>
      
      <view v-else class="user-info">
        <image 
          :src="userInfo.avatarUrl" 
          class="avatar" 
          mode="aspectFill"
        ></image>
        <text class="nickname">{{ userInfo.nickName }}</text>
      </view>
      
      <button class="logout-btn" @click="logout">退出登录</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      isLogin: false,
      hasUserInfo: false,
      userInfo: {},
      code: ''
    }
  },
  
  methods: {
    // 微信登录
    wxLogin() {
      // #ifdef MP-WEIXIN
      uni.login({
        provider: 'weixin',
        success: (res) => {
          console.log('登录成功', res);
          this.code = res.code;
          this.isLogin = true;
          
          // 可以将code发送到服务器换取session_key等信息
          this.exchangeCodeForSession(res.code);
        },
        fail: (err) => {
          console.error('登录失败', err);
          uni.showToast({
            title: '登录失败',
            icon: 'none'
          });
        }
      });
      // #endif
    },
    
    // 用code换取session
    exchangeCodeForSession(code) {
      // 这里调用你的后端接口
      // uni.request({
      //   url: 'your-server-api/login',
      //   method: 'POST',
      //   data: { code },
      //   success: (res) => {
      //     // 处理登录结果
      //   }
      // });
    },
    
    // 获取用户头像昵称
    getUserProfile() {
      // #ifdef MP-WEIXIN
      wx.getUserProfile({
        desc: '用于完善用户资料',
        success: (res) => {
          console.log('获取用户信息成功', res);
          this.userInfo = res.userInfo;
          this.hasUserInfo = true;
          
          // 保存到本地
          uni.setStorageSync('userInfo', res.userInfo);
          
          // 发送到服务器
          this.syncUserInfoToServer(res.userInfo);
        },
        fail: (err) => {
          console.error('获取用户信息失败', err);
          uni.showToast({
            title: '获取用户信息失败',
            icon: 'none'
          });
        }
      });
      // #endif
    },
    
    // 同步用户信息到服务器
    syncUserInfoToServer(userInfo) {
      // 添加code以便服务器验证用户身份
      const data = {
        ...userInfo,
        code: this.code
      };
      
      // uni.request({
      //   url: 'your-server-api/saveUserInfo',
      //   method: 'POST',
      //   data: data,
      //   success: (res) => {
      //     console.log('用户信息同步成功', res);
      //   }
      // });
    },
    
    // 退出登录
    logout() {
      this.isLogin = false;
      this.hasUserInfo = false;
      this.userInfo = {};
      this.code = '';
      uni.removeStorageSync('userInfo');
      
      uni.showToast({
        title: '已退出登录',
        icon: 'none'
      });
    }
  },
  
  mounted() {
    // 检查本地是否有用户信息
    const storedUserInfo = uni.getStorageSync('userInfo');
    if (storedUserInfo) {
      this.userInfo = storedUserInfo;
      this.hasUserInfo = true;
      this.isLogin = true;
    }
  }
}
</script>

<style scoped>
.container {
  padding: 40rpx;
  text-align: center;
}

.login-btn, .get-info-btn, .logout-btn {
  background-color: #07c160;
  color: white;
  border: none;
  padding: 20rpx 40rpx;
  border-radius: 10rpx;
  font-size: 32rpx;
  margin: 20rpx 0;
}

.logout-btn {
  background-color: #fa5151;
}

.user-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 40rpx 0;
}

.avatar {
  width: 160rpx;
  height: 160rpx;
  border-radius: 50%;
  margin-bottom: 20rpx;
}

.nickname {
  font-size: 36rpx;
  color: #333;
}
</style>

3. 注意事项

1. 接口限制：wx.getUserProfile 接口只能在用户主动触发的事件中调用，不能在页面加载时自动调用。
2. desc参数：必须填写 desc 参数，用于向用户说明获取用户信息的用途。
3. 兼容性：该接口仅在微信版本 >= 7.0.10 中可用，低版本需要使用旧接口 wx.getUserInfo。
4. 用户授权：用户每次都需要主动授权，不能静默获取用户信息。
5. 存储策略：获取到的用户信息建议存储在本地，并在适当时候同步到服务器。

这样就可以在 UniApp 中实现微信小程序最新的获取用户头像和昵称功能了。