一、小程序配置
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接口,我们可以轻松地实现用户信息的获取和展示。为了保证用户信息安全,在传输和存储过程中,我们需要采用严格的数据加密和解密方式。