微信小程序使用头像昵称填写完成头像上传

去年微信调整了用户信息获取的api后，现在获取用户头像和昵称只能通过用户自己触发组件拿到用户信息，那到底怎么做呢，下面跟大家分享一下我是怎么做的（新手，请多多包涵，有问题欢迎指出）

wxml：

<view class="top">
    <button class="avatar-wrapper" 
	    open-type="chooseAvatar" 
	    bind:chooseavatar="onChooseAvatar"
    >
      <image class="avatar" src="{
    
    {avatarUrl}}"></image>
    </button> 
    <van-icon name="edit"  class="edit" />
    <input type="nickname" 
	    class="weui-input"  
	    placeholder="微信用户"  
	    bind:change="getNickname" 
	    maxlength="10" 
	    value="{
    
    {username}}"/>
  </view>

js：

// 后端接口
import {
    
    getUserInfo,updateUserInfo,uploadPhoto} from '../api/profile/profile.js'

// 默认头像
const defaultAvatarUrl = 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0'

Page({
    
    
  /**
   * 页面的初始数据
   */
  data: {
    
    
    // 默认头像
    avatarUrl: defaultAvatarUrl,
    // 用户昵称
    username:null,
    openId:null,
    userId:null
  },
  // 头像上传
  onChooseAvatar(e){
    
    
  	// 回调事件返回的是图片的临时地址，会失效，我们需要调自己的上传接口拿到图片信息渲染到页面
    console.log(e.detail);
	    let avatarUrl  = e.detail.avatarUrl
	    let openId = this.data.openId;
	    this.setData({
    
    
	      avatarUrl,
	    })
    wx.uploadFile({
    
    
      url: "http://192.168.x.xx.xxxx:/users/uploadImage",  // 这里换成你们后端的上传接口即可
      method: 'POST',
      filePath: avatarUrl,
      name: 'file',
      formData: {
    
    
        openId: openId  // 这里放你们接口所需要的参数
      },
      // 成功回调
      success:(res)=>{
    
    
        let result = JSON.parse(res.data); // JSON.parse()方法是将JSON格式字符串转换为JSON对象
        let newAvatarUrl = result.data[0].url; // 返回的图片url
        let userId = this.data.userId;
        // 将返回的url替换调默认的url，渲染在页面上
        this.setData({
    
    
          avatarUrl:newAvatarUrl  
        })
        /*
        	* 下面调保存头像信息的接口(具体实现根据你们实际开发的需求)
        */
          let fileInfo = {
    
    
            userId:userId,
            fileName:result.data[0].name,
            fileUrl:result.data[0].url,
            filePath:result.data[0].path,
          }
          uploadPhoto(fileInfo).then(res=>{
    
    
            console.log(res);
          })
      },
  });
  },
  // 用户昵称
  getNickname: function (e){
    
    
    let input = e.detail.value
    this.setData({
    
    
      username: input 
    })
    // 修改用户昵称
    let user = {
    
    
      openId: this.data.openId,
      userName: this.data.username
    }
    updateUserInfo(user).then(res=>{
    
    
      this.queryInfo();
    })
  },
  // 查询用户信息
  queryInfo(){
    
    
    let openId = wx.getStorageSync('login_info').openid
    this.setData({
    
    
      openId : openId
    })
    getUserInfo(openId).then(res=>{
    
    
      console.log('查询用户信息',res);
      if (res.data.code == 200) {
    
    
      // 将查询到用户头像、昵称等信息覆盖默认值，然后渲染到页面即可
        this.setData({
    
    
        username: res.data.data.userName,
        userId:res.data.data.userId,
        avatarUrl:res.data.data.fileUrl
      })
      }
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    
    
  // 页面加载完毕之后查询用户信息
   this.queryInfo();
  },
})