用戶頭像昵稱獲取規(guī)則的調(diào)整

原來獲取用戶頭像和昵稱調(diào)用的是uni.getUserInfo(OBJECT)接口，但是2021年4月28日24時后發(fā)布的小程序新版本，無法通過uni.getUserInfo與<button open-type="getUserInfo"/>獲取用戶個人信息（頭像、昵稱、性別與地區(qū)）

詳細情況見官方文檔：小程序登錄、用戶信息相關(guān)接口調(diào)整說明 | 微信開放社區(qū) (qq.com)

目前獲取頭像的方法：chooseavatar

目前微信官方提供的獲取用戶頭像的方法只有如下這種

開放能力 / 用戶信息 / 獲取頭像昵稱 (qq.com)

獲取用戶頭像

在vue3構(gòu)建的uniapp微信小程序中，獲取用戶頭像的代碼如下

代碼解釋：button是包裹頭像的容器，默認顯示灰色頭像（即avatarUrl的初始值），用戶點擊button，觸發(fā)onChooseAvatar函數(shù)，可修改頭像。設(shè)函數(shù)onChooseAvatar的第一個參數(shù)e，e.detail.avatarUrl中儲存了用戶上傳的新頭像，將e.detail.avatarUrl賦值給avatarUrl.value即可完成新頭像的渲染

//script部分
const avatarUrl = ref('https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0')
const onChooseAvatar = e => {
  avatarUrl.value = e.detail.avatarUrl
}

//html部分
<button class="avatar" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
    <image class="avatarImg" :src=avatarUrl mode="aspectFill"></image>
</button>

//css部分
.avatar {
    position: relative;
    width: 120rpx;
    height: 120rpx;
    border-radius: 50%;
    background-color: #eee;
  }

  .avatarImg {
    position: absolute;
    left: 0;
    top: 0;
    width: 120rpx;
    height: 120rpx;
    border-radius: 50%;
    background-color: #eee;
  }

將頭像持久化存儲到后端

雖然e.detail.avatarUrl存儲了用戶的新頭像，比如：http://tmp_223cd440990786c338a5610060d4e96aeda77d2678920.jpg

但是這只是微信的一個臨時文件，如果直接將這段路徑以字符串的形式存儲到后端服務(wù)器，那下次獲取到頭像的時候可能該臨時文件已經(jīng)失效，導致頭像無法正常渲染，失效時返回的路徑是wxfile://tmp_223cd440990786c338a5610060d4e96aeda77d2678920.jpg，這樣的文件在渲染時會出現(xiàn)下圖所示的報錯

所以我們需要在文件失效之前，將文件保存到后端服務(wù)器

這就涉及到一個新的API：uni.uploadFile(OBJECT)

具體使用方法見官方文檔：uni.uploadFile(OBJECT) | uni-app官網(wǎng) (dcloud.net.cn)

所以在onChooseAvatar函數(shù)中，除了完成avatarUrl.value = e.detail.avatarUrl的賦值操作，我們還可以把圖片保存到后端服務(wù)器，具體代碼如下文章來源地址http://www.zghlxwxcb.cn/news/detail-850656.html

//設(shè)置用戶頭像
const onChooseAvatar = e => {
  avatarUrl.value = e.detail.avatarUrl
  //將頭像保存到后端
  uni.uploadFile({
    url: '后端服務(wù)器地址',
    filePath: avatarUrl.value, //頭像文件
    header: {
      請求Header
    },
    formData: {
	  請求中其他額外的formdata，不是必填項
	},
    name: '文件對應的 key,開發(fā)者在服務(wù)器端通過這個key可以獲取到文件二進制內(nèi)容',
    success: (uploadFileRes) => {
      console.log(uploadFileRes.data);
    }
  });
}

到了這里，關(guān)于uniapp微信小程序開發(fā)踩坑日記：獲取用戶頭像并持久化存儲到后端服務(wù)器的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！