【微信小程序】2022最新用户信息授权方式

先看一波调整公告

 用户信息授权方式变更为”头像昵称填写“

 最新授权方式 可自定义 也可使用微信信息

代码：

<button class="avatar-wrapper" open-type="chooseAvatar" bind:chooseavatar="onChooseAvatar">
  <image class="avatar" src="{{avatarUrl}}"></image>
</button> 
<input type="nickname" class="weui-input" placeholder="请输入昵称"/>

根据调整修改交互方式UI设计效果如下

 点击头像进行授权微信头像或自定义上传图片

 

提示bind:chooseavatar返回的图片数据是临时图片 可通过wx.uploadFile 上传至自己的服务器 代码如下

 // 头像
  onChooseAvatar(e: any){
    const that = this
    wx.showLoading({title:'上传中...'})
    wx.uploadFile({
      url: config.configUrl + '/mini/upLoadFile',
      filePath: e.detail.avatarUrl,
      name: 'file',
      header: {},
      success (res){
        wx.hideLoading()
        console.log(res)
        if(res.statusCode == 200) {
          let obj = JSON.parse(res.data)
          that.setData({
            avatarUrl: obj.data
          })
        }
      }
    })
  },