QCefView初步使用

本文主要是介绍QCefView初步使用，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

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"QCefViewQt${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++ codewindow.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);

这篇关于QCefView初步使用的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---