微信小程序在个人中心页面添加用户昵称

Question

这是现在的样子，想在这个页面加一个可以获取用户昵称的一行

<view class="top-bg"></view>
<view class="box">
  <!-- 头像 -->
  <view class="head-box">
    <button open-type="chooseAvatar" class="avatar" bindchooseavatar="chooseAvatar">
      <image class="head-img" src="{{login.avatar}}" mode="widthFix"></image>
    </button>
    <view class="tip">{{login.show?'欢迎使用':'当前未登录，请登录！'}}</view>
  </view>
  <!-- 第一部分列表 -->
<!-- <view class="menu">
  <view class="item">姓名：</view>
  <view class="item">年龄：</view>
  <view class="item">学号：</view>
</view> -->
  <view>
    <button class="row" style="width: 100%;" bindtap="basicClick">
      <view class="left">
        <icon class="icon-small" type="success" size="16"></icon>
        <text class="text">基本信息</text>
      </view>
      <view class="right">></view>
    </button>
    <button class="row" style="width: 100%;" bindtap="feedbackClick">
      <view class="left">
        <icon class="icon-small" type="success" size="16"></icon>
        <text class="text">反馈</text>
      </view>
      <view class="right">></view>
    </button>
    <button class="row" style="width: 100%;border-bottom: none;" bindtap="aboutClick">
      <view class="left">
        <icon class="icon-small" type="success" size="16"></icon>
        <text class="text">关于我们</text>
      </view>
      <view class="right">></view>
    </button>
  </view>
</view>
<!-- 第二部分列表 -->
<view class="end">
  <button open-type="contact" class="row" style="width: 100%;border-bottom: none;">
    <view class="left">
      <icon class="icon-small" type="success" size="16"></icon>
      <text class="text">在线客服</text>
    </view>
    <view class="right">></view>
  </button>
</view>

page {
  background-color: #f1f1f1;
}
/* 设置背景颜色 */
.top-bg {
  height: 260rpx;
  background-color: #ce42af;
}
/* 头像部分 */
.head-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-bottom: 1rpx solid #fbdbdc;
  padding-bottom: 20rpx;
}
.avatar {
  margin-top: -80rpx;
  font-weight: inherit;
  display: flex;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0);
}
.avatar::after {
  border: none;
}
.head-img {
  width: 140rpx;
  height: 140rpx;
  overflow: hidden;
  border-radius: 50%;
  background-color: #fbdbdc;
}
.tip {
  font-size: 26rpx;
  color: gray;
  margin: 15rpx 0;
}
/* 列表部分 */
.row {
  display: flex;
  align-items: center;
  padding: 36rpx 10rpx;
  font-size: 30rpx;
  font-weight: inherit;
  background-color: rgba(0, 0, 0, 0);
  border-bottom: 1rpx solid #fbdbdc;
}

.row::after {
  border: none;
}

.text {
  margin-left: 15rpx;
  color: #636262;
}

.left {
  width: 90%;
  text-align: left;
  display: flex;
  align-items: center;
}

.right {
  width: 10%;
  text-align: right;
  color: rgb(148, 147, 147);
}

.end {
  background-color: white;
  margin-top: 20rpx;
  padding: 0 20rpx;
}

.menu .item {
  height: 96rpx;
  line-height: 96rpx;
  border-bottom: #636262;
  padding: 0% 40rpx;
}

const app = getApp();
Page({
  /**
   * 页面的初始数据
   */
  data: {
    login: {
      show: false
    }
  },
  // 登录监听
  chooseAvatar(e) {
    this.setData({
      login: {
        show: true,
        avatar: e.detail.avatarUrl,
      }
    })
  },
  onInputChange(e) {
        const nickName = e.detail.value
        const { avatarUrl } = this.data.userInfo
        this.setData({
          "userInfo.nickName": nickName,
          hasUserInfo: nickName && avatarUrl && avatarUrl !== defaultAvatarUrl,
        })
      },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})

Answer 1

引自免费微信小程序：皆我百晓生

为了在微信小程序的个人中心页面添加并展示用户的昵称，我们可以在页面的data对象中增加一个变量用于存储昵称信息，并在页面布局中添加一个新的元素来显示这个昵称。下面是一个详细的步骤指南和相应的代码修改建议。

1. 修改data对象

在页面的data对象中，添加一个新的属性nickName，用于存储用户的昵称。如果用户没有设置昵称，我们可以默认显示为“未设置”。

data: {
  login: {
    show: false,
    nickName: '未设置', // 默认值
  }
},

2. 添加昵称显示区域

在<view class="head-box">内添加一个新的<view>元素，用于显示用户的昵称。确保这个元素在头像下方，提示文本上方。

<view class="head-box">
  <!-- 头像 -->
  <button open-type="chooseAvatar" class="avatar" bindchooseavatar="chooseAvatar">
    <image class="head-img" src="{{login.avatar}}" mode="widthFix"></image>
  </button>
  <!-- 昵称 -->
  <view class="nick-name">{{login.nickName}}</view>
  <view class="tip">{{login.show?'欢迎使用':'当前未登录，请登录！'}}</view>
</view>

3. 修改样式

为了让昵称显示得更美观，我们需要稍微调整CSS样式。这里添加一个新的类.nick-name，并设置其样式。

.nick-name {
  font-size: 32rpx;
  color: white;
  margin: 10rpx 0;
}

4. 获取用户昵称

当用户登录时，可以通过微信的API获取用户的昵称，并更新data中的nickName值。这通常在chooseAvatar事件处理函数中完成，或者在用户登录后调用。

chooseAvatar(e) {
  this.setData({
    login: {
      show: true,
      avatar: e.detail.avatarUrl,
      nickName: '用户昵称' // 这里应该替换为实际获取到的昵称
    }
  });
}

实际获取昵称的代码可能涉及到调用微信的wx.getUserInfo方法，并在回调中更新nickName。这是一个示例：

// 假设在页面的某个地方调用
wx.getUserInfo({
  success: function(res) {
    const userInfo = res.userInfo;
    const nickName = userInfo.nickName;
    this.setData({
      'login.nickName': nickName
    });
  }.bind(this)
});

最终代码

以下是修改后的完整代码片段，包括样式和逻辑部分：

<view class="head-box">
  <button open-type="chooseAvatar" class="avatar" bindchooseavatar="chooseAvatar">
    <image class="head-img" src="{{login.avatar}}" mode="widthFix"></image>
  </button>
  <view class="nick-name">{{login.nickName}}</view>
  <view class="tip">{{login.show?'欢迎使用':'当前未登录，请登录！'}}</view>
</view>

<style>
.nick-name {
  font-size: 32rpx;
  color: white;
  margin: 10rpx 0;
}
</style>

<script>
Page({
  data: {
    login: {
      show: false,
      nickName: '未设置',
    }
  },
  
  chooseAvatar(e) {
    wx.getUserInfo({
      success: function(res) {
        const userInfo = res.userInfo;
        const nickName = userInfo.nickName;
        this.setData({
          login: {
            show: true,
            avatar: e.detail.avatarUrl,
            nickName: nickName
          }
        });
      }.bind(this)
    });
  }
});
</script>

这样，用户登录后，其昵称就会显示在个人中心页面的头像下方了。