首先在小程序中获取使用用户的微信信息(此处需要用户授权)
获取用户微信信息并存入云数据库中
onGotUserInfo: function (e) {
var n = e.detail.userInfo.nickName
var c = e.detail.userInfo.province + e.detail.userInfo.city
var u = e.detail.userInfo.avatarUrl
this.saveUser()
},
saveUser:function(){
wx.cloud.init()
const db = wx.cloud.database()
const table = db.collection('userInfo')
var vm = this.data
var time = Time.formatTime(new Date());
table.add({
data: {
name: vm.name,
city: vm.city,
url: vm.url,
dataTime:time,
login:true,
},
})
}
其中name为用户微信名,url为用户头像url地址。使用我们使用QNetworkAccessManager完成访问数据,获取方法看我之前的博客https://blog.csdn.net/zjgo007/article/details/104581623
这里主要介绍如何在QLabel中显示URL头像(如果使用QML开发,直接在Image控件的source属性中添加URL即可)
实现思路为使用QNetworkAccessManager从头像URL获取数据并使用QPixmap存储图片数据,获取数据后发送信号传输图片信息,此处因为QNetworkAccessManager采用异步获取数据,为防止频繁获取图片时发生错误,我使用QNetworkReply的setProperty设置响应属性,保证图片一致性:
void NetDataConnect::getNetImage(QString imageName, QString imageUrl){
//imageName是传入的图片名称(此处为微信用户名)
QNetworkAccessManager *managerImage = new QNetworkAccessManager(this);
connect(managerImage, SIGNAL(finished(QNetworkReply *)), this, SLOT(slotGetImage(QNetworkReply *)));
managerImage->get(QNetworkRequest(QUrl(imageUrl)))->setProperty("imageName",imageName);
}
void NetDataConnect::slotGetImage(QNetworkReply* r){
QString nameStr = r->property("imageName").toString();
if (r->error() == QNetworkReply::NoError)
{
QByteArray bytes = r->readAll();
QPixmap pixmap;
pixmap.loadFromData(bytes);
emit imageLoaded(pixmap,nameStr);//发送头像图片pixmap,图片名称nameStr
}
r->deleteLater();
}
在QWidget中,接收信号并显示头像
void Widget::imageLoaded(QPixmap pixmap, QString imageName){
if(imageName == loginName)
ui->label_url->setPixmap(pixmap);
}
效果如图:
如果需要头像圆角效果,使用setMask()设置圆角遮罩
void Widget::imageLoaded(QPixmap pixmap, QString imageName){
if(imageName == loginName){
QSize size(pixmap.size());
QBitmap mask(size);
QPainter painter(&mask);
painter.setRenderHint(QPainter::Antialiasing);
painter.setRenderHint(QPainter::SmoothPixmapTransform);
painter.fillRect(mask.rect(), Qt::white);
painter.setBrush(QColor(0, 0, 0));
painter.drawRoundedRect(mask.rect(), 20, 20);
QPixmap image = pixmap;// .scaled(size);
image.setMask(mask);
ui->label_url->setPixmap(image);
}
}
效果图: