? ? ? ?1.?根據(jù)官方要求，不會(huì)要求強(qiáng)制性授權(quán)，頭像和昵稱也將被收回，給的是統(tǒng)一的頭像和昵稱，需要我們調(diào)用接口去獲取微信頭像和昵稱。

?????????2. 通過(guò)原生的標(biāo)簽調(diào)用來(lái)獲取微信頭像和微信昵稱。注意：這里的標(biāo)簽不能夠修改，修改會(huì)導(dǎo)致頭像回顯問(wèn)題和昵稱獲取問(wèn)題。頭像獲取的是本地，需要我們調(diào)用上傳接口上傳到服務(wù)器。

? ? ? ? 3. 因?yàn)槲疫@里頭像顯示調(diào)用的是登錄接口，將頭像存到全局，所以我直接調(diào)用修改登錄接口將頭像和昵稱進(jìn)行修改將數(shù)據(jù)重新存到全局，這樣就導(dǎo)致我的頭像和昵稱不能為空，不然修改后的頭像和昵稱會(huì)被修改為空。

<template>
  <view>
    <Navbar titleText="個(gè)人信息" @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="請(qǐng)輸入昵稱"
      />
    </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;
        },
      });
    },

    //獲取昵稱輸入內(nèi)容
    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. 最后看看效果

?????????5. 如果有更好的建議，或者問(wèn)題，歡迎小伙伴評(píng)論提出。文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-505811.html

到了這里，關(guān)于小程序用戶頭像昵稱獲取不到解決辦法的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！