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

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

点击触发

1. 用户头像部分：

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

2. 昵称部分：

<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 onl oad(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,
      });
    }
}