Qt WebEngine 实战 |
您所在的位置：网站首页 › iapp浏览器加载进度 › Qt WebEngine 实战 |
Qt WebEngine 实战
|
目录 一、成果展示 二、功能拆解： 0、网页加载逻辑 1、在标题栏，显示加载进度 2、 放大、缩小、重置 3、 前进、后退、刷新 4、 获取网站图标 5、显示历史记录，提供显示与跳转功能 6、界面内查找： 三、完整工程代码： 一、成果展示QT 仿制浏览器，实现功能如下： 1、获取网址时，在标题栏，显示加载进度 2、查看：界面的 放大、缩小、重置 功能 3、界面导航功能：前进、后退、刷新 功能 4、获取网站图标 5、显示历史记录，并提供跳转功能 6、界面内查找：在当前界面用高亮模式，显示查找内容 图示：
1、当 QWebEngineView 开始加载时，会发射 loadStarted() 信号； 2、而每当一个网页元素（如一张图 一个脚本）加载完成时，都会发射 loadProgress() 信号 - 用于显示加载进度 3、最后加载全部完成后，会发射 loadFinished() 信号，如果加载成功，该信号的参数为 true，否则为 false 4、用 title() 获取 HTML 文档的标题，如果标题发生了改变，则会发射 titleChanged() 信号 5、如果需要自定义上下文（鼠标右键功能），则可以重新实现 contextMenuEvent()，然后用 pageAction() 获得的动作来填充菜单。 1、在标题栏，显示加载进度 说明： 每当一个网页元素（如一张图 一个脚本）加载完成时，都会发射 loadProgress() 信号 结果展示：
代码展示： view = new QWebEngineView(this); view->load(QUrl("http://www.qter.org/")); // 从 0 到 100，表示进度; progress = 0; connect(view, &QWebEngineView::loadProgress, this, &MyWebEngine::setProgress); void MyWebEngine::setProgress(int p) { // 从 0 到 100，表示进度; progress = p; adjustTitle(); } // 调整标题槽 void MyWebEngine::adjustTitle() { if ( progress = 100) { setWindowTitle(view->title()); } else { setWindowTitle(QString("%1 (%2%)").arg(view->title()).arg(progress)); } } 2、 放大、缩小、重置说明： QWebEngineView 的 setZoomFactor(qreal factor) 函数可以实现网页内容的缩放 factor 是缩放因子，取值范围 0.25~5.0，也就是说最多放大到 500%，缩小到 25% 可以使用 zoomFactor() 函数获取现在的缩放因子 代码展示： view->setZoomFactor(view->zoomFactor() + 0.1); 3、 前进、后退、刷新说明： QWebEnginePage 中通过枚举类型 QWebEnginePage::WebAction 定义了 几十个 常用的功能动作 如：前进、后退等导航动作。 这里展示 前进、后退的导航动作，其他可查看 QT 帮助文档 代码展示： // 向工具栏添加动作和部件 ui->mainToolBar->addAction(view->pageAction(QWebEnginePage::Back)); ui->mainToolBar->addAction(view->pageAction(QWebEnginePage::Forward)); ui->mainToolBar->addAction(view->pageAction(QWebEnginePage::Reload)); ui->mainToolBar->addAction(view->pageAction(QWebEnginePage::Stop)); 4、 获取网站图标说明 每当加载的网站图标发生变化时，QWebEngineView 都会发射 iconUrlChanged(QUrl) 信号 通过这个信号获取图标的 QUrl，然后使用 QNetworkAccessManager 的 get() 函数获取图标文件 代码展示： // 连接 图标变更信号槽; connect(view, &QWebEngineView::iconUrlChanged,this, &MyWebEngine::handleIconUrlChanged); // 用于下载图标; manager = new QNetworkAccessManager(this); // 获取图标文件; void MyWebEngine::handleIconUrlChanged(const QUrl &url) { QNetworkRequest iconRequest(url); QNetworkReply *iconReply = manager->get(iconRequest); iconReply->setParent(this); connect(iconReply, &QNetworkReply::finished, this, &MyWebEngine::handleIconLoaded); } // 对获取的图标文件进行处理 void MyWebEngine::handleIconLoaded() { QIcon icon; QNetworkReply *iconReply = qobject_cast(sender()); if (iconReply && iconReply->error() == QNetworkReply::NoError) { QByteArray data = iconReply->readAll(); QPixmap pixmap; pixmap.loadFromData(data); icon.addPixmap(pixmap); iconReply->deleteLater(); } else { icon = QIcon(QStringLiteral("../mywebengine/defaulticon.png")); } setWindowIcon(icon); } 5、显示历史记录，提供显示与跳转功能说明： 1、使用 QWebEngineHistory 类来表示 QWebEnginePage 的浏览历史 2、items() 函数获取所有历史项目的列表 3、backItems() 函数获取所有可以向后浏览的项目列表 4、forwardItems() 函数获取所有可以向前浏览的项目的列表 5、count() 获取所有历史项目的总数 6、clear() 用于清空历史 7、历史的一条项目用 QWebEngineHistoryItem 来表示，包含了：页面标题 title()；页面地址 url()；最后一次访问时间 lastVisited() 和 网站图标地址 iconUrl() 等属性。 代码展示： // 用于显示历史网址 QListWidget *historyList; ui->mainToolBar->addAction(tr("历史"), this, SLOT(showHistory())); historyList = new QListWidget; historyList->setWindowTitle(tr("历史记录")); historyList->setMinimumWidth(300); connect(historyList, &QListWidget::clicked, this, &MyWebEngine::gotoHistory); // 显示历史记录窗口 void MyWebEngine::showHistory() { historyList->clear(); foreach (QWebEngineHistoryItem item, view->history()->items()) { QListWidgetItem *history = new QListWidgetItem(item.title()); historyList->addItem(history); } historyList->show(); } // 跳转到记录 void MyWebEngine::gotoHistory(const QModelIndex &index) { QWebEngineHistoryItem item = view->history()->itemAt(index.row()); view->history()->goToItem(item); } 6、界面内查找：说明： QWebEngineView 提供 findText() 函数来实现网页中字符串的查找和高亮显示 默认向前查找而且不区分大小写，可通过设置第二个参数 QWebEnginePage::FindFlags 修改为向后或者区分大小写。 代码展示： QLineEdit *findEdit; findEdit = new QLineEdit(this); findEdit->setMaximumWidth(150); ui->mainToolBar->addWidget(findEdit); // 这里使用匿名函数; ui->mainToolBar->addAction(tr("查找"), [this]() { view->findText(findEdit->text()); }); 三、完整工程代码：https://download.csdn.net/download/LearnLHC/16264513
|
【本文地址】
今日新闻 |
推荐新闻 |