QCefView的简介
QCefView是使用Qt对cef3的简单包装，以使用Qt的开发。具体的参考见:
https://cefview.github.io/QCefView/zh/docs/intros/buiding
https://blog.csdn.net/m0_37251750/article/details/126508912
编译过成依赖Cef的包，Cef有二进制发行包: https://cef-builds.spotifycdn.com/index.html
Cef在linux上使用的时候需要特别注意的是库的加载，libcef.so需要最先加载，cmake设置如下:
target_link_libraries(CefMain PRIVATE "-Wl,--no-as-needed -lcef" QCefView Qt${QT_VERSION_MAJOR}::Widgets )
JavaScript调用C++
JS调用C++有两种方式, 一种是用invokeMethod，另一种是用CefViewQuery的方式。
invokeMethod的方式调用C++
js使用invokeMethod调用C++，主要是使用window上的桥接对象. 首先需要在C++中连接信号槽, 如下:
MainWindow::MainWindow(QWidget *parent) : QMainWindow(parent) , ui(new Ui::MainWindow) { ui->setupUi(this); QCefSetting setting; setting.setBackgroundColor(QColor::fromRgb(200, 200, 200)); // QDir dir = QCoreApplication::applicationDirPath(); // QString webResourceDir = QDir::toNativeSeparators(dir.filePath("HTML")); // qDebug() << webResourceDir; QString webResourceDir = "/home/yinl/CefMain/HTML"; QCefContext::instance()->addLocalFolderResource(webResourceDir, URL_ROOT); QString indexUrl = QString("%1/%2").arg(URL_ROOT, "index.html"); _pCefView = new QCefView(indexUrl, &setting, this); this->setCentralWidget(_pCefView); connect(_pCefView, &QCefView::invokeMethod, this, &MainWindow::onInvokeMethod); connect(_pCefView, &QCefView::cefQueryRequest, this, &MainWindow::onCefQueryRequest); connect(_pCefView, &QCefView::consoleMessage, this, [&](const QString& message, int level) { qDebug() << "js log, level: " << level << ", msg: " << message; }); }
function onInvokeMethodClicked(name, ...arg) { // invoke C++ code window.CallBridge.invokeMethod(name, ...arg); }
在js中调用invokeMethod的接口, 然后触发C++的槽函数:
void MainWindow::onInvokeMethod(int browserId, qint64 frameId, const QString& method, const QVariantList& arguments) { if (0 == method.compare("minWindow")) { this->showMinimized(); } else if (0 == method.compare("maxWindow")) { this->showMaximized(); } else if (0 == method.compare("normalWindow")) { this->showNormal(); } else if (0 == method.compare("closeWindow")) { this->close(); } else if (0 == method.compare("cppLog")) { qDebug() << "js: " << arguments; } else if (0 == method.compare("requestData")) { QCefEvent event("reqData"); event.arguments().append("Hello world! CPP DATA."); _pCefView->broadcastEvent(event); } else { } }
注意js中的console.log可以使用QCefView的consoleMessage的信号处理。
CefViewQuery的方式调用C++
也可以使用QCefQuery类进行请求和应答模式的调用C++的接口，此方式也是异步的操作方式，通过提供回调函数来处理返回结果。
首先需要连接cefQueryRequest的信号，然后在js中触发信号就可以调用C++接口。
function onCallQuery() { let query = { // id: 1, request: "Hello CPP", // 可以是复杂的json数据 onSuccess: function (response) { cppLog("onCallQuery onSuccess: " + response); // window.alert(response); console.log(response); }, onFailure: function (error_code, error_message) { cppLog("onCallQuery onFailure error_code: " + error_code + ", error_message: " + error_message); // window.alert(error_message); console.log(response); } }; window.CefViewQuery(query); }
在C++这边可以通过QCefQuery类中的id和请求来判断请求类别，然后进行处理:
void MainWindow::onCefQueryRequest(int browserId, qint64 frameId, const QCefQuery& query) { QString request = query.request(); qDebug() << "js request: " << request; quint64 id = query.id(); if (id == 1) { // query.setResponseResult(true, "Hello Js"); query.setResponseResult(false, "Hello Js", -1); _pCefView->responseQCefQuery(query); } }
C++调用JavaScript
QCefView调用javaScript是使用事件的方式封装，在js中添加事件监听:
function onLoad() { cppLog("js onLoad init."); window.CallBridge.addEventListener( "reqData", function (data) { onReqData(data); cppLog(data); } ); }
C++可以通过事件触发来触发js的接口:
- public bool triggerEvent(const QCefEvent & event)
- public bool triggerEvent(const QCefEvent & event,int frameId)
- public bool broadcastEvent(const QCefEvent & event)
以上三个都是异步的操作，如下：
QCefEvent event("reqData"); event.arguments().append("Hello world! CPP DATA."); _pCefView->broadcastEvent(event);
