小程序用户头像昵称获取不到解决办法-Toy模板网

这篇具有很好参考价值的文章主要介绍了小程序用户头像昵称获取不到解决办法。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

1. 根据官方要求，不会要求强制性授权，头像和昵称也将被收回，给的是统一的头像和昵称，需要我们调用接口去获取微信头像和昵称。

小程序用户头像昵称获取不到解决办法

2. 通过原生的标签调用来获取微信头像和微信昵称。注意：这里的标签不能够修改，修改会导致头像回显问题和昵称获取问题。头像获取的是本地，需要我们调用上传接口上传到服务器。

3. 因为我这里头像显示调用的是登录接口，将头像存到全局，所以我直接调用修改登录接口将头像和昵称进行修改将数据重新存到全局，这样就导致我的头像和昵称不能为空，不然修改后的头像和昵称会被修改为空。

<template>
  <view>
    <Navbar titleText="个人信息" @goBack="goBack"></Navbar>
    <view class="box">
      <view class="title">头像</view>
      <button
        class="box"
        open-type="chooseAvatar"
        @chooseavatar="onChooseAvatar"
      >
        <image class="avatar" :src="avatarUrl"></image>
      </button>
    </view>
    <view class="box">
      <view class="title">昵称</view>
      <input
        type="nickname"
        @blur="userNameInput"
        class="name"
        placeholder="请输入昵称"
      />
    </view>
    <view class="pushBtn">
      <u-button
        @click="login"
        shape="circle"
        :custom-style="customStyle"
        :ripple="true"
        ripple-bg-color="#909399"
      >
        确定</u-button
      >
    </view>
  </view>
</template>


<script>
import Navbar from "@/components/navBar/index.vue";
import store from "@/store/index.js";
const defaultAvatarUrl =
  "https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0";
export default {
  components: {
    Navbar,
  },
  data() {
    return {
      avatarUrl: defaultAvatarUrl,
      nickname: undefined,
      customStyle: {
        width: "100%",
        height: "100%",
        color: "white",
        fontWhite: "600",
        backgroundImage: "linear-gradient(to right, #648CEA , #285EDA);",
        border: "2rpx soild #285EDA",
        fontSize: "36rpx",
      },
      header: {},
      action: "",
      images: undefined,
    };
  },
  onLoad() {
    this.header = {
      Authorization: "Bearer " + this.$store.state.user.userinfo.wxToken,
    };
    this.action = this.$BASE_URL + "/property/home/upload";
  },
  methods: {
    onChooseAvatar(e) {
      const { avatarUrl } = e.detail;
      this.avatarUrl = avatarUrl;
      uni.uploadFile({
        url: this.$BASE_URL + "/property/home/upload",
        filePath: avatarUrl,
        header: this.header,
        name: "file",
        formData: {
          user: "test",
        },
        success: (uploadFileRes) => {
          let obj = JSON.parse(uploadFileRes.data);
          this.images = obj.url;
        },
      });
    },

    //获取昵称输入内容
    userNameInput(e) {
      this.nickname = e.detail.value;
    },
    login() {
      if (this.images == "" || this.images == undefined) {
        this.$u.toast("头像不能为空");
        return;
      }
	  if (this.nickname == "" || this.nickname == undefined) {
        this.$u.toast("昵称不能为空");
        return;
      }
      let wechatId = this.$store.state.user.userinfo.wechatId;
      let nickname = this.nickname;
      let headimgUrl = this.images;
      let wxToken = this.$store.state.user.userinfo.wxToken;
      let params = {
        wechatId: wechatId,
        nickname: nickname,
        headimgUrl: headimgUrl,
        wxToken: wxToken,
      };
      this.$u.api.updateWechatUser(params).then((res) => {
        store.commit("SET_USERINFO", res.data);
        this.goBack();
      });
    },

    goBack() {
      let pages = getCurrentPages();
      let prevPage = pages[pages.length - 2];
      prevPage.$vm.refresh = Math.random() * 100;
      this.$u.route({
        type: "navigateBack",
        delta: 1,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.box {
  display: flex;
  background: white;
  justify-content: space-between;
  padding: 10rpx 20rpx;
  margin-top: 10rpx;
  .title {
    line-height: 100rpx;
  }
  .avatar {
    width: 100rpx;
    height: 100rpx;
  }
  .name {
    padding: 30rpx 80rpx;
    border-color: #dcdfe6;
    text-align: left;
  }
}
.pushBtn {
  margin: 32rpx;
  letter-spacing: 2rpx;
  height: 100rpx;
  width: calc(100% - 64rpx);
}
</style>

4. 最后看看效果

小程序用户头像昵称获取不到解决办法