微信小程序用户信息更新指南：头像与昵称篇

微信小程序用户信息更新指南：头像与昵称篇

在微信小程序中，用户信息的更新是一个常见需求，尤其是头像和昵称的更新。本文将详细介绍如何在微信小程序中实现用户头像和昵称的更新，包括获取头像临时路径、上传头像到服务器、完成头像更新以及更新用户昵称的步骤和代码实现。

1. 更新用户头像

思路分析

当用户点击头像时，可以利用微信提供的头像昵称填写能力快速完善用户信息。实现这一功能需要两步：

1. 将button组件的open-type属性设置为chooseAvatar。
2. 通过bindchooseavatar事件回调获取头像信息的临时路径。

落地代码

profile.wxml

<view class="avatar">
  <button
    class="avatar-btn"
    hover-class="none"
    open-type="chooseAvatar"
    bindchooseavatar="chooseAvatar"
  >
    <image src="{{ userInfo.headimgurl || '/assets/images/avatar.png' }}" />
  </button>

</view>

profile.js

// 更新用户头像
chooseAvatar(event) {
  const { avatarUrl } = event.detail;
  this.setData({
    'userInfo.headimgurl': avatarUrl
  });
},

2. 头像上传到服务器

思路分析

临时文件可能会随时失效，因此需要将头像信息的临时路径上传到服务器。

有两种方法，一个是使用封装好的upload 方法，另一个是使用小程序提供的wx.uploadFile API方法进行上传。

法一：

api/user.js

/**
 * @description 上传文件
 * @param {*} FilePath 要上传的资源路径
 * @param {*} name 要上传的资源key

 */
export const reqUploadFile=(FilePath,name)=>{
  return http.upload(
    '/fileUpload',
    FilePath,
    name
  )
}

profile.js

//顶部引入，在getAvatar调用。
import {reqUploadFile}from '../../../../api/user'
const res=await reqUploadFile(avatarUrl,'avatar')

法二：

profile.js

getAvatar(e) {
  const { avatarUrl } = e.detail;
  wx.uploadFile({
    url: 'https://gmall-prod.atguigu.cn/mall-api/fileUpload',
    filePath: avatarUrl,
    name: 'file',
    header: {
      token: wx.getStorageSync('token'),
    },
    success: (res) => {
      const uploadRes = JSON.parse(res.data);
      this.setData({
        'userInfo.headimgurl': uploadRes.data
      });
    },
    fail(err) {
      wx.showToast({
        title: '头像更新失败，请稍后再试',
        icon: 'none'
      });
    }
  });
}

3. 完成头像更新

思路分析

用户点击保存时，需要同步到服务器。根据接口文档封装接口API函数，然后调用该函数更新用户信息。

落地代码

user.js

export const reqUpdateUserInfo = (updateUser) => {
  return http.post('/mall-api/weixin/updateUser', updateUser);
}

profile.js

async updateUserInfo() {
  await reqUpdateUserInfo(this.data.userInfo);
  wx.setStorageSync('userInfo', this.data.userInfo);
  this.setUserInfo(this.data.userInfo);
  wx.showToast({
    title: '头像更新成功',
    icon: 'none'
  });
}

4. 更新用户昵称

思路分析

更新用户昵称的接口与更新头像相同，可以直接复用。用户可以通过输入框输入新的昵称或使用微信昵称。

落地代码

profile.wxml

<van-dialog
  custom-style="position: relative"
  use-slot
  title="修改昵称"
  show="{{ isShowPopup }}"
  showConfirmButton="{{ false }}"
  showCancelButton="{{ false }}"
  transition="fade"
>
  <form bindsubmit="getNewName">
    <input
      class="input-name"
      type="nickname"
      bindinput="getNewName"
      name="nickname"
      value="{{ userInfo.nickname }}"
    />
    <view class="dialog-content">
      <button class="cancel" bindtap="cancelForm">取消</button>

      <button class="confirm" type="primary" formType="submit">确定</button>

    </view>

  </form>

</van-dialog>

profile.js

getNewName(e) {
  const { nickname } = e.detail.value;
  this.setData({
    'userInfo.nickname': nickname,
    isShowPopup: false
  });
},

结论

通过上述步骤，我们可以在微信小程序中实现用户头像和昵称的更新。确保在实现过程中，路径和参数设置正确，以避免运行时错误。同时，注意测试每个功能点，确保用户体验流畅。