分享-2023年資深前端進階：前端登頂之巔-最全面的前端知識點梳理總結，前端之巔
*分享一個使用比較久的🪜
技術棧：taro框架 + vue3版本
解決在微信小程序獲取微信頭像時控制臺報錯：找不著wxfile://tmp 文件路徑,失敗，原因如下：因為微信提供給我開發者的是一個本地的臨時文件是會失效的所以存在服務器，時間失效就回顯失敗了；
1、微信小程序官方因保障用戶隱私及自選項，新版本的獲取用戶基礎信息發生變更；版本歷史變遷，自 2022 年 10 月 25 日 24 時后做出相關調整；可查看微信開放平臺社區；
1.1 獲取頭像的正確姿勢：
頭像獲取的是一個臨時路徑，千萬不要將直接獲取的地址存儲到數據庫中；eg: wxfile://tmp,開頭文件。
將 button 組件 open-type 的值設置為 chooseAvatar，當用戶選擇需要使用的頭像之后，可以通過 bindchooseavatar 事件回調獲取到頭像信息的臨時路徑。
從基礎庫2.24.4版本起，若用戶上傳的圖片未通過安全監測，不觸發bindchooseavatar 事件。
這里采用的是taro框架+taroUi + vue3 + ts 的寫法;以及Taro.uploadFile進行上傳臨時文件
<template><buttonclass="avatar-wrapper"open-type="chooseAvatar"@chooseavatar="handleOnChooseAvatar">獲取頭像</button>
</template><script lang="ts" setup>
import Taro from "@tarojs/taro";// 獲取頭像信息
const handleOnChooseAvatar = async (e) => {const { avatarUrl } = e.detail;// 將獲取的臨時文件上傳至公司服務器內獲取對應的地址信息Taro.uploadFile({url: "https://xxx.api/file/upload",filePath: avatarUrl,name: "file",formData: {},success(res) {const data: any = JSON.parse(res.data);formFeildVal.headPortrait = data.data;},});
};
</script>
1.2 獲取昵稱的正確姿勢：
1、因開發者工具問題或者ui組件庫的問題，獲取到的昵稱在經過form校驗會失效
2、解決input觸發onchange事件，將值獲取賦值在對應的輸入框內部
3、還是有問題，將在真機上進行操作；
<template><nut-input:border="false"type="nickname"v-model="formFeildVal.nickname"placeholder="請輸入昵稱信息"@change="handleChangeInput"/>
</template><script lang="ts" setup>
import { nextTick } from "vue";// 延遲給form賦值昵稱
const handleChangeInput = (e) => {nextTick(() => {formFeildVal.nickname = e.cacheTarget.value;});
};
</script>
