微信小程序获取 用户昵称和头像

微信小程序获取 用户昵称和头像

使用uni-app vue3 写法如下

<template>
  <!-- 点击获取--头像 -->
  <view class="avatar">
    <button open-type="chooseAvatar" class="avatarButton" @chooseavatar="getavatar">
      <image class="picture" :src="headerAvatar ? headerAvatar : ' ../../../static/login/logo.png'" mode=""></image>
    </button>
  </view>

  <!-- 点击获取--昵称 -->
  <view class="nick_name">
    <text class="infoName">用户昵称:&nbsp;&nbsp;&nbsp;&nbsp;</text>
    <input type="nickname" class="infoNickName" v-model="getName" placeholder="请输入名字" @change="getname" />
  </view>
  </template>

<script setup>
const getavatar = (e) => {
  console.log('-e---', e);
  headerAvatar.value = e.detail.avatarUrl;
  uni.setStorageSync('avatar', e.detail.avatarUrl);
};

const getname = (e) => {
  console.log('获取昵称', e);
  getName.value = e.detail.value;
  uni.setStorageSync('nickname', e.detail.value);
};
</script>

运行效果如下