前言

同事有個需求 授權(quán)獲取用戶頭像 和 昵稱 。之前做過線上小程序發(fā)版上線流程 就實現(xiàn)了下 最新的方法和 api 有些變化 記錄下

代碼實現(xiàn)

先直接上代碼

<template><view class="container"><buttonclass="choose-avatar-button"open-type="chooseAvatar"@chooseavatar="onChooseavatar">獲取頭像</button><view class="user-info"><imageclass="avatar":src="userInfo.avatarUrl"v-if="userInfo.avatarUrl"mode="aspectFill"></image><inputclass="nickname-input"type="nickname"placeholder="請輸入昵稱"v-model="userInfo.userName"@blur="getNickname"/><text class="display-username">{{ userInfo.userName }}</text></view></view>
</template><script>
export default {data() {return {userInfo: {avatarUrl: "",userName: "",},};},methods: {onChooseavatar(e) {console.log("e", e);this.userInfo.avatarUrl = e.detail.avatarUrl;},getNickname(e) {console.log("e", e);this.userInfo.userName = e.detail.value;},},
};
</script><style lang="scss">
.container {display: flex;flex-direction: column;align-items: center;justify-content: center;padding: 20px;background-color: #f5f5f5; /* 設(shè)置背景顏色 */height: 100vh; /* 設(shè)置容器高度為100%視口高度 */
}.choose-avatar-button {background-color: #007bff; /* 按鈕背景色 */color: white; /* 字體顏色 */border: none; /* 去掉邊框 */border-radius: 5px; /* 按鈕圓角 */padding: 10px 20px; /* 按鈕內(nèi)邊距 */font-size: 18px; /* 字體大小 */margin-bottom: 20px; /* 下邊距 */
}.user-info {display: flex;flex-direction: column;align-items: center;background-color: white; /* 用戶信息背景 */border-radius: 10px; /* 圓角 */box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* 陰影效果 */padding: 20px; /* 內(nèi)邊距 */width: 80%; /* 寬度 */
}.avatar {width: 100px; /* 頭像寬度 */height: 100px; /* 頭像高度 */border-radius: 50%; /* 圓形 */margin-bottom: 10px; /* 下邊距 */
}.nickname-input {width: 100%; /* 輸入框?qū)挾?*/padding: 10px; /* 內(nèi)邊距 */border: 1px solid #ccc; /* 邊框 */border-radius: 5px; /* 圓角 */font-size: 16px; /* 字體大小 */margin-bottom: 10px; /* 下邊距 */
}.display-username {margin-top: 10px; /* 上邊距 */font-size: 20px; /* 字體大小 */color: #333; /* 字體顏色 */
}
</style>

運行效果

技術(shù)分析

舊版本的 getUserProfile和getUserInfo接口不再能獲取用戶信息

• chooseAvatar
  這個方法用于處理用戶選擇頭像的操作。當用戶點擊按鈕并選擇頭像時，open-type=“chooseAvatar” 會觸發(fā)這個事件。
  事件參數(shù) e 中包含了用戶選擇的頭像信息。具體來說，e.detail.avatarUrl 會返回用戶選擇的頭像的 URL。
  方法體內(nèi)使用 this.userInfo.avatarUrl = e.detail.avatarUrl; 將獲取到的頭像 URL 保存到組件的 userInfo 數(shù)據(jù)對象中，更新頭像的顯示。

• getNickname
  這個方法用于處理用戶輸入昵稱時的操作。當用戶在昵稱輸入框中輸入內(nèi)容并失去焦點時，@blur=“getNickname” 會觸發(fā)這個事件。
  同樣，事件參數(shù) e 中含有用戶輸入的相關(guān)信息，e.detail.value 將返回用戶在輸入框中輸入的昵稱內(nèi)容。
  方法體內(nèi)使用 this.userInfo.userName = e.detail.value; 將獲取到的昵稱保存到 userInfo 數(shù)據(jù)對象中，更新顯示的昵稱內(nèi)容。
  總結(jié)來說，onChooseavatar 方法用于更新用戶頭像，getNickname 方法用于更新用戶昵稱，這兩者都通過事件處理和數(shù)據(jù)綁定來實現(xiàn)用戶信息的動態(tài)更新。

有用的 不妨 點個贊評論下