广东工程承包网站软文广告例子

前言

同事有个需求 授权获取用户头像 和 昵称 。之前做过线上小程序发版上线流程 就实现了下 最新的方法和 api 有些变化 记录下

代码实现

先直接上代码

<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; /* 设置背景颜色 */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 方法用于更新用户昵称，这两者都通过事件处理和数据绑定来实现用户信息的动态更新。

有用的 不妨 点个赞评论下