微信小程序获取用户头像和姓名

获取头像：

html：

  <button open-type="chooseAvatar" bind:chooseavatar="chooseAvatar">获取头像</button>
  <view style="width: 100%;display: flex;justify-content: center;">
    <image src="{{HeadUrl}}" mode="" style="width: 100px;height: 100px; border-radius: 100%;" />
  </view>

js：

Page({

  /**
   * 页面的初始数据
   */
  data: {
    HeadUrl: 'https://pic.imgdb.cn/item/64367f2c0d2dde5777557749.png'   //默认头像(登录前)
  },
    // 头像
    chooseAvatar(e) {
      const {
        avatarUrl
      } = e.detail
      console.log(avatarUrl);   //本地图片
      wx.uploadFile({
        url: 'https://travel.kuxia.top/api/science/upload',
        filePath: avatarUrl,
        name: 'file',
        success: (res) => {
          var data = JSON.parse(res.data);
          console.log('https://travel.kuxia.top'+data.front_file);    //服务器图片
          this.setData({
            HeadUrl: 'https://travel.kuxia.top' + data.front_file,
            // HeadUrl: data.front_file
          })
          wx.showToast({
            title: '上传成功',
            icon: 'success',
            duration: 2000 //持续的时间
          })
        },
        fail: (err) => {
          console.log(err);
        }
      })
    },
})

 

获取名称：

  <!-- 获取微信名称 -->
  <input type="nickname" placeholder="点击获取名称"/>

 

 

 可直接复制。