微信小程序获取微信头像及昵称

为了进一步保护用户隐私，微信小程序收回原来的wx.getUserProfile接口，只能通过头像昵称填写能力来获得临时头像。

建议创建新的page，单独获得用户头像及昵称进行保存，wxml代码如下

<button class="avatar-wrapper" open-type="chooseAvatar" bindchooseavatar="onChooseAvatar">
    <image class="avatar" src="{{avatarUrl}}"></image>
</button> 
<form catchsubmit="formSubmit">
    <view class="row">
        <view class="text1">昵称：</view>
        <input type="nickname" class="weui-input" name="nickname" placeholder="请输入昵称"/>
    </view>
    <button type="primary" style="margin-top: 40rpx;margin-bottom: 20rpx;" form-type="submit">提交</button>
</form>

js代码如下

const defaultAvatarUrl = 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0'
Page({
/**
   * 页面的初始数据
   */
  data: {
    avatarUrl: '',
    theme: wx.getSystemInfoSync().theme,
  },
  // 选择头像后的触发方法
  onChooseAvatar(e) {
    // 这里获得的是临时头像，下面做下载存储到服务器，如果不存服务器，那么在小程序重新启动等操作后，将无法访问该临时地址
    const { avatarUrl } = e.detail 
    this.setData({
      avatarUrl,
    })
    let _that = this;
    // 下载临时图片
    wx.downloadFile({
      url: avatarUrl,
      success(res){
        if (res.statusCode === 200) {
          const tempFilePath = res.tempFilePath
          // 提交到服务器接口，保存头像
          wx.uploadFile({
            url: baseUrl+'/upload/img',// 自己的上传接口地址
            filePath: tempFilePath,
            name: 'file',
            success(ress){
              const data = JSON.parse(ress.data)
              console.log(data)
              _that.doProfile({avatar: data.data.url});
            }
          })
        }
      }
    })
    
  },
  formSubmit(e){
      // 保存昵称
      this.doProfile({name: e.detail.value.nickname});
      wx.switchTab({
        url: '/pages/user/user',
      })
  },
  // 此方法用来单独存储用户头像、昵称到服务器的接口方法
  doProfile(data){
    profile(data).then(res => {

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

根据微信小程序提供的能力，需要先根据 wx.downloadFile 接口下载头像文件，然后再通过wx.uploadFile接口上传到自己的服务器接口，这样获取头像功能才形成闭环。

以下是本人做的demo，感兴趣的可以看下效果，移至我的页面，点击头像可查看