在个人中心页面添加一个更改头像的button

Question

在这里添加一个更改头像的button,我设置的上传不了

const app = getApp();
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)
    });
  },
//   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

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

要实现在个人中心页面添加更改头像的功能，你需要在页面的wxml文件中加入一个按钮，并在js文件中实现相应的事件处理。以下是详细的步骤和代码示例：

步骤 1: 在 WXML 文件中添加按钮

在你的wxml文件中，找到合适的位置插入以下代码来创建一个更改头像的按钮：

<view class="avatar-section">
  <image class="avatar" src="{{login.avatar}}" mode="aspectFill"></image>
  <view class="change-avatar-button">
    <button bindtap="chooseAvatar">更换头像</button>
  </view>
</view>

这里，{{login.avatar}}是头像的URL，它应该与你在js文件中设置的数据绑定。

步骤 2: 修改 JS 文件中的代码

接下来，在你的js文件中修改chooseAvatar方法，以便正确地处理用户选择的头像。首先，你需要确保你的data对象中有avatar这个属性。然后，调整chooseAvatar方法如下：

const app = getApp();
Page({
  data: {
    login: {
      show: false,
      nickName: '昵称',
      avatar: '' // 添加这个属性用于保存头像URL
    }
  },
  chooseAvatar(e) {
    let avatarUrl = e.detail.avatarUrl;
    wx.showActionSheet({
      itemList: ['从相册选择', '拍照'],
      success: (res) => {
        if (res.tapIndex === 0) {
          wx.chooseImage({
            count: 1,
            sizeType: ['original', 'compressed'],
            sourceType: ['album'],
            success: (res) => {
              this.setData({
                'login.avatar': res.tempFilePaths[0]
              });
              // 这里可以添加上传头像到服务器的逻辑
            }
          });
        } else if (res.tapIndex === 1) {
          wx.chooseImage({
            count: 1,
            sizeType: ['original', 'compressed'],
            sourceType: ['camera'],
            success: (res) => {
              this.setData({
                'login.avatar': res.tempFilePaths[0]
              });
              // 这里可以添加上传头像到服务器的逻辑
            }
          });
        }
      }
    });
  },
  // 其他代码...
});

在这个例子中，chooseAvatar方法首先显示一个操作菜单让用户选择是从相册选择还是拍照。根据用户的选项，它会调用wx.chooseImage方法来选择或拍摄图片，然后更新login.avatar属性以显示新选择的头像。

注意事项

• 确保你的小程序已经获取了用户的授权，否则wx.chooseImage和wx.getUserInfo等API可能无法正常工作。
• 如果你想将选择的头像上传到服务器，你需要在相应的地方添加上传逻辑，这通常涉及到使用wx.uploadFile方法。
• 不要忘记在wxml文件中为按钮和图像添加适当的样式，以适应你的界面设计。

以上步骤应该能帮助你实现在个人中心页面添加更改头像的功能。如果有任何疑问或遇到问题，欢迎继续询问。