文章目录
前言
同事有个需求 授权获取用户头像 和 昵称 。之前做过线上小程序发版上线流程 就实现了下 最新的方法和 api 有些变化 记录下
代码实现
先直接上代码
vue
<template>
<view class="container">
<button
class="choose-avatar-button"
open-type="chooseAvatar"
@chooseavatar="onChooseavatar"
>
获取头像
</button>
<view class="user-info">
<image
class="avatar"
:src="userInfo.avatarUrl"
v-if="userInfo.avatarUrl"
mode="aspectFill"
></image>
<input
class="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; /* 设置背景颜色 */
height: 100vh; /* 设置容器高度为100%视口高度 */
}
.choose-avatar-button {
background-color: #007bff; /* 按钮背景色 */
color: white; /* 字体颜色 */
border: none; /* 去掉边框 */
border-radius: 5px; /* 按钮圆角 */
padding: 10px 20px; /* 按钮内边距 */
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; /* 内边距 */
width: 80%; /* 宽度 */
}
.avatar {
width: 100px; /* 头像宽度 */
height: 100px; /* 头像高度 */
border-radius: 50%; /* 圆形 */
margin-bottom: 10px; /* 下边距 */
}
.nickname-input {
width: 100%; /* 输入框宽度 */
padding: 10px; /* 内边距 */
border: 1px solid #ccc; /* 边框 */
border-radius: 5px; /* 圆角 */
font-size: 16px; /* 字体大小 */
margin-bottom: 10px; /* 下边距 */
}
.display-username {
margin-top: 10px; /* 上边距 */
font-size: 20px; /* 字体大小 */
color: #333; /* 字体颜色 */
}
</style>
运行效果
技术分析
旧版本的 getUserProfile和getUserInfo接口不再能获取用户信息
-
chooseAvatar
这个方法用于处理用户选择头像的操作。当用户点击按钮并选择头像时,open-type="chooseAvatar" 会触发这个事件。
事件参数 e 中包含了用户选择的头像信息。具体来说,e.detail.avatarUrl 会返回用户选择的头像的 URL。
方法体内使用 this.userInfo.avatarUrl = e.detail.avatarUrl; 将获取到的头像 URL 保存到组件的 userInfo 数据对象中,更新头像的显示。
-
getNickname
这个方法用于处理用户输入昵称时的操作。当用户在昵称输入框中输入内容并失去焦点时,@blur="getNickname" 会触发这个事件。
同样,事件参数 e 中含有用户输入的相关信息,e.detail.value 将返回用户在输入框中输入的昵称内容。
方法体内使用 this.userInfo.userName = e.detail.value; 将获取到的昵称保存到 userInfo 数据对象中,更新显示的昵称内容。
总结来说,onChooseavatar 方法用于更新用户头像,getNickname 方法用于更新用户昵称,这两者都通过事件处理和数据绑定来实现用户信息的动态更新。
有用的 不妨 点个赞评论下