您的位置:

在uniapp中如何获取微信头像? - 一步步教你获取微信头像,快速实现用户信息显示

一、小程序配置

1、在微信公众平台创建小程序,并获取小程序的AppID

2、在小程序的管理后台中,选择设置->开发设置,将服务器域名添加到request合法域名中,同时勾选“不校验合法域名、web-view(业务域名)、TLS版本以及HTTPS证书”

二、获取登录凭证

1、用户点击“登录”按钮后,调用微信官方提供的wx.login()接口获取用户登录凭证code

uni.login({
  provider: 'weixin',
  success: function (loginRes) {
    if (loginRes.code) {
      // code有效,调用后台接口进行用户身份验证和信息获取
    } else {
      console.log('登录失败!' + loginRes.errMsg)
    }
  },
  fail: function (error) {
    console.log('调用wx.login()接口失败!' + error.errMsg)
  }
})

三、根据code获取session_key和openid

1、使用wx.request()发送请求到微信服务器,获取session_key和openid,以便进一步获取用户信息

uni.request({
  url: 'https://api.weixin.qq.com/sns/jscode2session',
  data: {
    appid: '小程序的AppID',
    secret: '小程序的AppSecret',
    js_code: '微信登录凭证code',
    grant_type: 'authorization_code'
  },
  success: function(res) {
    if (res.statusCode === 200) {
      var session_key = res.data.session_key;
      var openid = res.data.openid;
      // 用于获取用户信息或敏感数据的加密数据解密需要的参数
      var encryptedData = '';
      var iv = '';
    } else {
      console.log('调用wx.request()接口失败!' + res.errMsg)
    }
  },
  fail: function (error) {
    console.log('调用wx.request()接口失败!' + error.errMsg)
  }
})

四、获取用户信息

1、根据文档,使用getSetting()进行用户信息授权判断

uni.getSetting({
  success: function (res) {
    if (res.authSetting['scope.userInfo']) {
      console.log('已授权获取用户信息!')
      // 调用用户信息接口获取用户信息
    } else {
      console.log('未授权获取用户信息!')
      // 提示用户授权获取用户信息
    }
  }
})

2、调用getUserProfile()获取用户信息

uni.getUserProfile({
  desc: '用于完善会员资料',  // 需要获取的用户信息描述
  success: function (res) {
    console.log(res.userInfo)
    var userInfo = res.userInfo;
    var nickName = userInfo.nickName;
    var avatarUrl = userInfo.avatarUrl;
    var gender = userInfo.gender; // 性别:0-未知,1-男,2-女
    var province = userInfo.province;
    var city = userInfo.city;
    var country = userInfo.country;
    // 将用户信息保存到数据库中
  },
  fail: function (error) {
    console.log('获取用户信息失败!' + error.errMsg)
  }
})

3、根据返回结果,将用户信息保存到数据库中,并在页面上展示

// Vue模板中展示用户信息:{{nickName}}

五、总结

以上是在uniapp中获取微信头像和用户信息的完整步骤。通过微信官方提供的API接口,我们可以轻松地实现用户信息的获取和展示。为了保证用户信息安全,在传输和存储过程中,我们需要采用严格的数据加密和解密方式。