Qt與QWebEngineView交互完整參考示例代碼
前言
最近剛好需要做一個(gè)Qt與Webview的交互，順便寫下整個(gè)的交互流程，給需要的各位參考學(xué)習(xí)。后面會(huì)補(bǔ)充，Qt上應(yīng)用其他Web上的開(kāi)源圖標(biāo)類的組件js庫(kù)，例如EChart，vis.js等，通過(guò) Qt+ +JavaScript+ QWebChannel +QWebEngineView 的組合，很多酷炫的效果都可以很方便的做出來(lái)。
1：Qt的Web 引擎與 WebView交互歷史變更
Qt 5.6 引入了 Qt WebEngine 模塊：
在過(guò)去，Qt 使用的是 Qt WebKit 作為其 Web 引擎。但自 Qt 5.6 版本開(kāi)始，Qt 引入了基于 Chromium 的新的 Web 引擎，稱為 Qt WebEngine。這個(gè)改變帶來(lái)了更好的性能、更好的 HTML5 和 CSS3 支持以及更好的安全性。
QWebView 被 QWebEngineView 替代：
在使用 Qt WebKit 時(shí)，開(kāi)發(fā)者使用 QWebView 類來(lái)顯示 Web 內(nèi)容。但是隨著 Qt WebEngine 的引入，Qt 引入了 QWebEngineView 類來(lái)取代 QWebView。QWebEngineView 基于新的 Web 引擎，并提供了更現(xiàn)代化的 API 和功能。
引入了新的通信機(jī)制 - QWebChannel：
在 Qt WebEngine 中，引入了 QWebChannel 作為一種新的機(jī)制，用于在 C++ 代碼和 JavaScript 代碼之間進(jìn)行通信。通過(guò) QWebChannel，可以將 C++ 對(duì)象暴露給 JavaScript，使得它們可以相互調(diào)用和交互。
更好的擴(kuò)展性和性能：
由于 Qt WebEngine 基于 Chromium，因此具有更好的性能和擴(kuò)展性。它可以使用 Chromium 提供的各種功能和特性，包括先進(jìn)的渲染引擎、多線程支持、GPU 加速等。
更新的 HTML5 和 CSS3 支持：
Qt WebEngine 提供了更現(xiàn)代化的 HTML5 和 CSS3 支持，使得開(kāi)發(fā)者可以更輕松地創(chuàng)建豐富、交互性強(qiáng)的 Web 應(yīng)用程序。
這些是 Qt 的 Web 引擎與 WebView 交互方面的一些主要變化?？偟膩?lái)說(shuō)，隨著 Qt WebEngine 的引入，Qt 在 Web 開(kāi)發(fā)領(lǐng)域取得了重大進(jìn)步，為開(kāi)發(fā)者提供了更好的工具和功能來(lái)創(chuàng)建高性能的 Web 應(yīng)用程序。
2：示例展示
示例是完整Qt代碼和Html文件，可以直接測(cè)試，注釋也寫了一些
通過(guò)QWebChannel進(jìn)行注冊(cè)和調(diào)用：
這種方法是在Qt中注冊(cè)QObject對(duì)象，使其可以在JavaScript中調(diào)用。使用QWebChannel類來(lái)建立Qt與JavaScript之間的通信橋梁。
在Qt代碼中，通過(guò)registerObject方法將QObject對(duì)象注冊(cè)到QWebChannel中，然后在JavaScript中使用該對(duì)象?？梢远x槽函數(shù)和屬性，這些槽函數(shù)和屬性可以在JavaScript中直接調(diào)用和訪問(wèn)。在JavaScript中調(diào)用這些槽函數(shù)來(lái)執(zhí)行特定的操作，或者讀取和設(shè)置屬性。
這種方法適用于在Web頁(yè)面中需要與Qt代碼進(jìn)行交互的場(chǎng)景，需要從Web頁(yè)面中觸發(fā)特定操作，并且在Qt代碼中執(zhí)行相應(yīng)的處理時(shí)，或者需要在Web頁(yè)面中顯示Qt代碼中的數(shù)據(jù)時(shí)這樣做很方便。
如果想要簡(jiǎn)單的Qt調(diào)用JavaScript函數(shù)的話，就使用runJavaScript方法就行
總的來(lái)說(shuō)，如果需要頻繁地進(jìn)行 C++ 和 JavaScript 之間的通信，使用連接信號(hào)與槽會(huì)更加方便和高效。而如果只是偶爾需要執(zhí)行一些 JavaScript 代碼，使用 `runJavaScript` 也是一個(gè)不錯(cuò)的選擇。
#pragma once
#include <QWidget>
#include <QJsonObject>
class QWebEngineView;
class QWebChannel;
class frmgplot : public QWidget
{
Q_OBJECT
/*Q_PROPERTY 定義了一個(gè)名為 jsonData 的屬性，
其類型為 QJsonObject，并將其與一個(gè)名為 qtjsonData 的成員變量關(guān)聯(lián)起來(lái)。
當(dāng)qtjsonData改變時(shí)，會(huì)自動(dòng)觸發(fā)qtdataChanged信號(hào)
要在類中聲明好 信號(hào)(qtdataChanged) 和 成員（qtjsonData）
*/
Q_PROPERTY(QJsonObject jsonData MEMBER qtjsonData NOTIFY qtdataChanged)
public:
frmgplot(QWidget *parent);
~frmgplot();
void initfrm();
void setQtjsonData(const QJsonObject & jsonData);
public slots:
//js 調(diào)用qt函數(shù)，注意類型必須要是public slots:
void jscallQt(const QString &str);
private slots:
void onPageLoadFinished(bool success);
signals:
//當(dāng)qtjsonData改變時(shí)，會(huì)自動(dòng)觸發(fā)qtdataChanged信號(hào)
void qtdataChanged(const QJsonObject &jsonData);
private:
QWebEngineView *m_webView;
QWebChannel *m_webChannel;
QJsonObject qtjsonData;
};
#include "frmgplot.h"
#include <QWebEngineView>
#include <QWebChannel>
#include <QFileInfo>
#include <QDir>
#include <QApplication>
#include <QVBoxLayout>
#include <qmessagebox.h>
#include <QTimer>
frmgplot::frmgplot(QWidget *parent)
: QWidget(parent)
{
//拿到示例后，別忘了在合適的時(shí)候 初始化initfrm
}
frmgplot::~frmgplot()
{
}
void frmgplot::initfrm()
{
QVBoxLayout *layout = new QVBoxLayout(this);
setLayout(layout);
// 創(chuàng)建 Web 視圖
m_webView = new QWebEngineView(this);
layout->addWidget(m_webView);
// 創(chuàng)建 Web 通道
m_webChannel = new QWebChannel(this);
// 注冊(cè)到 Web 頁(yè)面，使 JavaScript 能夠調(diào)用 Qt類里面的 槽函數(shù)
m_webChannel->registerObject("frmplot", this);
m_webView->page()->setWebChannel(m_webChannel);//設(shè)備交互通道
// 加載 HTML 頁(yè)面
QString filePath = QFileInfo(QApplication::applicationDirPath() + "/web/gplot/js/index.html").absoluteFilePath();
m_webView->load(QUrl::fromLocalFile(filePath));
// 連接信號(hào)槽以在通道初始化后調(diào)用 JavaScript 函數(shù)
connect(m_webView, &QWebEngineView::loadFinished, this, &frmgplot::onPageLoadFinished);
}
void frmgplot::onPageLoadFinished(bool success)
{
if (success) {
// 頁(yè)面加載完成后調(diào)用 JavaScript 函數(shù)
// 創(chuàng)建定時(shí)器，延遲3秒后執(zhí)行
QTimer::singleShot(3000, this, [=]() {
// 頁(yè)面加載完成后調(diào)用 JavaScript 函數(shù)
m_webView->page()->runJavaScript(QString("qtcalljsfunc('%1');").arg("qt call to js"));
});
}
}
void frmgplot::jscallQt(const QString &str)
{
QMessageBox::warning(this, QString::fromLocal8Bit("title"), str);
/*示例：
js 調(diào)用 qt 后，
qt再次設(shè)置
屬性jsonData 的qtjsonData成員，
讓其改變 然后 觸發(fā)信號(hào)qtdataChanged，從而讓web 捕捉到qtdataChanged信號(hào)*/
QJsonObject json;
json["obj1"] = 1;
json["obj2"] = 666.666;
json["obj3"] = "this objstr";
this->setProperty("jsonData", json);
setQtjsonData(json);
}
void frmgplot::setQtjsonData(const QJsonObject &jsonData)
{
//if (qtjsonData != jsonData)
{
qtjsonData = jsonData;//會(huì)自動(dòng)觸發(fā)qtdataChanged
}
}<!doctype html>
<html>
<head>
<title>Network</title>
<script src="qwebchannel.js"></script>
<style type="text/css">
#mynetwork {
width: 80vw; /* 設(shè)置為全屏寬度的 80% */
height: 80vh; /* 設(shè)置為全屏高度的 80% */
border: 1px solid lightgray;
}
/* 設(shè)置 body 和 html 的寬度和高度為100%，以使 #mynetwork 占據(jù)整個(gè)屏幕 */
body, html {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<button id="jscallqtbutton">js call qt</button>
/*定義一個(gè)按鈕*/
<p>
</p>
<div id="mynetwork"></div>
<script type="text/javascript">
//----------- webchannel qt js 交互
var updatejson=function(text){
// 使用JSON.stringify將QJsonObject轉(zhuǎn)換為字符串，然后再輸出
alert(JSON.stringify(text));
}
var webObject;
// Connect to the QWebChannel
new QWebChannel(qt.webChannelTransport, function(channel) {
webObject = channel.objects.frmplot;
window.foo = webObject;//對(duì)象賦值給了全局對(duì)象 window 的屬性 foo
//qt信號(hào){qtdataChanged}與js函數(shù)連接,就像 qt的信號(hào)槽一樣
webObject.qtdataChanged.connect(updatejson);
// 1: web view -> qt ：web上按鈕（jscallqtbutton）按下后，調(diào)用qt函數(shù)jscallQt
document.getElementById("jscallqtbutton").onclick = function() {
webObject.jscallQt("jscall-qt");
alert("jscallQt");
};
//2:qt -> web js
// 示例：在頁(yè)面上顯示jsonData的內(nèi)容
/* jsonDataDisplay = document.getElementById("jsonDataDisplay");
jsonDataDisplay.innerHTML = JSON.stringify(jsonData);*/
});
//--------
function qtcalljsfunc(text) {
alert((text));
}
</script>
</body>
</html>
3：項(xiàng)目注意事項(xiàng)
3.1 ：Qt WebEngine locales directory not found at location 錯(cuò)誤
這個(gè)警告是因?yàn)?Qt WebEngine 在運(yùn)行時(shí)需要一些 ICU 數(shù)據(jù)文件，這些文件通常位于 Qt 的安裝目錄中。警告消息顯示 Qt WebEngine 在指定的目錄下找不到 ICU 數(shù)據(jù)文件，因此它會(huì)嘗試從其他位置加載
在 Qt WebEngine 中，ICU 數(shù)據(jù)文件主要用于處理文字排版、文字渲染、國(guó)際化以及本地化等任務(wù)。因此，運(yùn)行 Qt WebEngine 應(yīng)用程序時(shí)，它會(huì)嘗試加載這些 ICU 數(shù)據(jù)文件，以確保在不同地區(qū)和語(yǔ)言環(huán)境下能夠正確地顯示和處理文本。
icudtl.dat 是 Qt 框架使用的 ICU（International Components for Unicode）數(shù)據(jù)文件之一。
icudtl.dat 是在Qt的安裝目錄中的，在安裝目錄中搜索并且incudtl.dat和這些pak文件 復(fù)制到 執(zhí)行文件相同層級(jí)目錄下就可以了。*.pak 是 Qt WebEngine 中的資源文件，它們包含了用于支持開(kāi)發(fā)者工具和其他功能所需的資源。注意拷貝時(shí)，要區(qū)分 對(duì)應(yīng)版本 。
3.2 運(yùn)行時(shí) 崩潰例如：m_webView->page()->setWebChannel(m_webChannel);或者其他地方莫名崩潰
QtWebEngineProcess.exe 是 Qt WebEngine 模塊的一個(gè)子進(jìn)程，用于在 Qt 應(yīng)用程序中執(zhí)行 Web 頁(yè)面的渲染和相關(guān)任務(wù)。通常情況下，QtWebEngineProcess.exe 被設(shè)計(jì)為與主應(yīng)用程序（.exe 文件）放置在同一目錄下，這是為了便于它與主應(yīng)用程序之間共享資源和進(jìn)行通信，否則會(huì)出現(xiàn)各種莫名崩潰問(wèn)題
總結(jié)
到此這篇關(guān)于Qt與QWebEngineView交互的文章就介紹到這了,更多相關(guān)Qt與QWebEngineView交互內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
C語(yǔ)言簡(jiǎn)明講解隊(duì)列的實(shí)現(xiàn)方法
隊(duì)列（Queue）與棧一樣，是一種線性存儲(chǔ)結(jié)構(gòu)，它具有如下特點(diǎn)：隊(duì)列中的數(shù)據(jù)元素遵循“先進(jìn)先出”（First?In?First?Out）的原則，簡(jiǎn)稱FIFO結(jié)構(gòu)。在隊(duì)尾添加元素，在隊(duì)頭刪除元素2022-04-04
C++調(diào)用EasyX庫(kù)實(shí)現(xiàn)嫦娥奔月小游戲
這篇文章主要為大家詳細(xì)介紹了C++如何調(diào)用EasyX庫(kù)編寫一個(gè)簡(jiǎn)單的嫦娥奔月小游戲,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以參考一下2023-09-09
wince程序防止創(chuàng)建多個(gè)實(shí)例實(shí)現(xiàn)互斥作用
什么時(shí)候用的互斥？當(dāng)你的程序只允許同時(shí)打開(kāi)一個(gè)的時(shí)候，就可以通過(guò)互斥來(lái)實(shí)現(xiàn),下面說(shuō)的互斥，主要是針對(duì)防止程序創(chuàng)建多個(gè)實(shí)例這種情況來(lái)實(shí)現(xiàn)的2014-02-02
C/C++使用vcpkg管理跨平臺(tái)包的最佳實(shí)踐
本文介紹了vcpkg,一個(gè)微軟開(kāi)源的C/C++包管理器,支持跨平臺(tái)、源碼構(gòu)建、版本管理、構(gòu)建系統(tǒng)集成等功能,文中詳細(xì)闡述了vcpkg的安裝、使用方法、版本管理、集成到項(xiàng)目、常見(jiàn)問(wèn)題與解決方案等內(nèi)容,并提供了最佳實(shí)踐建議,需要的朋友可以參考下2026-05-05
在C++編程中,字符串處理是一個(gè)常見(jiàn)的任務(wù),尤其是在需要從字符串中提取特定數(shù)據(jù)時(shí),本文將詳細(xì)探討如何使用C++標(biāo)準(zhǔn)庫(kù)中的工具來(lái)提取和分割字符串,并分析不同方法的適用場(chǎng)景和優(yōu)缺點(diǎn),我們將通過(guò)多個(gè)示例代碼逐步講解,幫助讀者掌握字符串處理的技巧,需要的朋友可以參考下2025-03-03
Dom（Document Object Model，即文檔對(duì)象模型）能把XML文檔轉(zhuǎn)換成應(yīng)用程序可遍歷的樹(shù)形結(jié)構(gòu)，這樣便可以隨機(jī)訪問(wèn)其中的節(jié)點(diǎn)。本文將詳細(xì)講講實(shí)現(xiàn)的方法，需要的可以參考一下2022-06-06
Qt基于QScrollArea實(shí)現(xiàn)界面嵌套移動(dòng)
在實(shí)際的應(yīng)用場(chǎng)景中，經(jīng)常會(huì)出現(xiàn)軟件界面戰(zhàn)場(chǎng)圖大于實(shí)際窗體大小。本文將利用QScrollArea可以為widget窗體添加滾動(dòng)條，實(shí)現(xiàn)界面嵌套移動(dòng)，感興趣的可以了解一下2022-06-06
VC++獲得當(dāng)前進(jìn)程運(yùn)行目錄的方法
這篇文章主要介紹了VC++獲得當(dāng)前進(jìn)程運(yùn)行目錄的方法,可通過(guò)系統(tǒng)函數(shù)實(shí)現(xiàn)該功能,是非常實(shí)用的技巧,需要的朋友可以參考下2014-10-10
C++ for循環(huán)與nullptr的小知識(shí)點(diǎn)分享
這篇文章主要是來(lái)和大家介紹一些C++中的小知識(shí)點(diǎn)，本文分享的是for循環(huán)與nullptr，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以跟隨小編一起了解一下2023-05-05
大家好，本篇文章主要講的是c++ KMP字符串匹配算法，感興趣的同學(xué)趕快來(lái)看一看吧，對(duì)你有幫助的話記得收藏一下2022-01-01