小程序自定义头像昵称

yma16

发布于 2023-11-16 15:58:47

2160

发布于 2023-11-16 15:58:47

文章被收录于专栏：前端javascript前端javascript

背景

由于个人小程序获取用户授权getUserProfile的方法已失效，所以采用自定义昵称的方法。

界面效果

实现

视图

图片选择，使用button嵌套img

<button class="avatar-wrapper" 
 style="background: transparent;" 
 open-type="chooseAvatar" bind:chooseavatar="onChooseAvatar">
    <image class="avatar" class="user-image" src="{{userImageUrl}}"></image>
 </button>

昵称自定义

<view style="width: 50%;text-align: center;">
          <input type="nickname" class="weui-input" value="{{userName}}" bindinput="bindKeyInput"
          placeholder-style="color: #07c160" 
          style="width: 100%;border-bottom: 1px solid #ffffff;" placeholder="{{designPlaceholder}}" />
</view>

逻辑处理

  // 选择头像
  onChooseAvatar(e) {
    const { avatarUrl } = e.detail
    this.setData({
      userImageUrl: avatarUrl,
    })
  },
  // 输入昵称
  bindKeyInput(e) {
    const { value } = e.detail
    this.setData({
      userName: value
    })
  },

完整视图：

<view class="container">
  <view class="title">{{title}}</view>
  <view class="user-image-box">
    <view wx:if="{{isOldVersion}}">
      <image class="user-image" src="{{userImageUrl}}"></image>
      <view class="user-nick-name">{{userName}}</view>
    </view>
    <view wx:else>
      <button class="avatar-wrapper" style="background: transparent;" open-type="chooseAvatar" bind:chooseavatar="onChooseAvatar">
        <image class="avatar" class="user-image" src="{{userImageUrl}}"></image>
      </button>
      <view style="display: flex;width:100%">
        <view style="width: 30%;text-align: right;">
          {{userPrefix}}
        </view>
        <view style="width: 50%;text-align: center;">
          <input type="nickname" class="weui-input" value="{{userName}}" bindinput="bindKeyInput"
          placeholder-style="color: #07c160" 
          style="width: 100%;border-bottom: 1px solid #ffffff;" placeholder="{{designPlaceholder}}" />
        </view>
      </view>
    </view>

  </view>

  <view class="user-info">
  </view>

  <view class="login-container">
    <button type="primary" plain="true" bindtap="getUserProfile" class="user-login" bindgetuserinfo="getUserInfoBtn" wx:if="{{isOldVersion}}">{{loginTitle}}</button>
    <button type="primary" plain="true" bindtap="joinProfile" class="user-login" wx:else>{{joinTitle}}</button>
  </view>
</view>
<view class="loading-container">
  <view class="loading" wx:if="isloading">
    <view class="loader-child" />
    <view class="loader-child" />
    <view class="loader-child" />
  </view>
</view>
<view class="detail-info">{{detailInfo}}</view>

本文参与腾讯云自媒体分享计划，分享自微信公众号。

原始发表：2023-02-19，如有侵权请联系 cloudcommunity@tencent.com 删除

小程序