0
点赞
收藏
分享

微信扫一扫

2023新版小程序头像昵称显示 代码示例如下 可复制使用

新版用户授权 名字和头像 官网

2023新版小程序头像昵称显示 代码示例如下 可复制使用_输入框

2023新版小程序头像昵称显示 代码示例如下 可复制使用_输入框_02

点击触发

2023新版小程序头像昵称显示 代码示例如下 可复制使用_页面加载_03

  1. 用户头像部分:

<block wx:if="{{!avatarUrl}}"> 检查用户头像是否存在。如果头像不存在,显示默认头像。<block wx:else="{{avatarUrl}}"> 如果头像存在,显示用户头像。<button open-type="chooseAvatar" bind:chooseavatar="onChooseAvatar" class="avatar-wrapper"> 是一个按钮,点击后触发选择头像的操作。onChooseAvatar(e) 是选择头像的事件处理函数。在选择头像后,更新 avatarUrl 的值,并将用户头像保存到本地存储。

  1. 昵称部分:

<input type="nickname" wx:if="{{!nickName}}" class="userinfo-nickname" placeholder="请输入昵称" bindblur="changeNickName"/> 显示一个输入框,如果昵称不存在,则显示提示文字。<view class="userinfo-nickname" wx:else="{{nickName}}"> 如果昵称存在,显示用户昵称。changeNickName(e) 是昵称输入框失焦事件处理函数。在输入框失焦后,获取输入的昵称并更新 nickName 的值,并将昵称保存到本地存储。

最后用onLoad 函数是页面加载时的处理逻辑。在页面加载时,先从本地存储中读取已保存的头像和昵称,如果存在则更新组件的数据,如果不存在则显示默认头像。

//用户头像
<block wx:if="{{!avatarUrl}}">
    <button open-type="chooseAvatar" bind:chooseavatar="onChooseAvatar"  class="avatar-wrapper">
      <image class="avatar" src="{{avatarUrl ? avatarUrl : avaimg}}"></image>
     </button>
  </block>
  <block wx:else="{{avatarUrl}}">
    <button open-type="chooseAvatar" bind:chooseavatar="onChooseAvatar"  class="avatar-wrapper">
      <image class="avatar" src="{{avatarUrl}}"></image>
     </button>
</block>
//昵称
<input type="nickname" wx:if="{{!nickName}}" class="userinfo-nickname" placeholder="请输入昵称" bindblur="changeNickName"/>
<view class="userinfo-nickname" wx:else="{{nickName}}">
    <text >{{nickName}}</text>
</view>

const defaultAvatarUrl = 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0'

data: {
    avatarUrl: defaultAvatarUrl,
    avaimg:'https://cline-api.jquee.com/imgs/xuhuiwenlv/face-default.png',
    nickName:null,
}
//用户头像
onChooseAvatar(e) {
    const {  avatarUrl } = e.detail
    this.setData({
    avatarUrl: avatarUrl,
    })
    // 保存用户头像到本地存储
    wx.setStorageSync('avatarUrl', avatarUrl);
    // let userInfo = app.globalData.userInfo;
    // userInfo\["coverPic"] = avatarUrl
    // app.globalData.userInfo = userInfo
},
//昵称
changeNickName(e) {
 console.log(e);
  let name = e.detail.value;
  if (name.length === 0) return;
  this.setData({
    nickName: name
  })
   // 保存用户输入的昵称到本地存储
  wx.setStorageSync('nickName', name);
},

async onLoad(options) {
    // 在页面加载时从本地存储读取
    const savedAvatarUrl = wx.getStorageSync('avatarUrl');
    const savedNickName = wx.getStorageSync('nickName');
    if (savedAvatarUrl || savedNickName) {
      this.setData({
        avatarUrl: savedAvatarUrl,
        nickName: savedNickName,
      });
    } else {
      this.setData({
        avatarUrl: defaultAvatarUrl,
      });
    }
}

举报

相关推荐

0 条评论