官方网址:http://tishion.github.io/QCefView/
Github地址:https://github.com/tishion/QCefView
目录
1. 什么是QCefView
QCefView是一个与Chrome嵌入式框架(Chromium Embedded Framework)集成的Qt小部件。 您可以使用QCefView而无需编写任何与CEF代码相关的代码。 这个Qt小部件是分布在二进制模块和LGPL许可的。
2. 为什么使用QCefView
有一些用CEF开发的UI框架,比如Electron等。 但Electron与CEF封装在一起,您只能通过编写JavaScript代码来开发您的应用程序。 如果您需要在应用程序中使用本机代码,同时还需要CEF,那么Electron在这种情况下并不是一个好的选择。 你完全可以自己完成整合,因为你需要做很多关于网页代码和本地代码之间通信的工作。 大多数时候这是重复的工作。
现在您可以尝试使用QCefView来开发您的应用程序。 像使用其他QWidgets一样使用它。 QCefView小部件提供了几种方法来在本地C ++代码和Web代码之间进行通信。 您不需要编写通信业务逻辑。
3. 构建QCefView
3.1 检出QCefView的源码;
- github: https://github.com/tishion/QCefView
- 目录结构如下:
└─QCefView-master
│ CMakeLists.txt
│ config.cmake
│ License
│ readme.md
├─.github
├─dep
├─src
│ ├─QCefProto
│ ├─QCefView
│ │ ├─CefViewBrowserApp
│ │ │ ├─BrowserDelegates
│ │ │ └─SchemeHandlers
│ │ └─Include
│ └─QCefWing
│ └─CefViewRenderApp
│ └─RenderDelegates
└─test
└─QCefViewTest
3.2 部署Qt SDK
qt download: https://download.qt.io/archive/qt/
由于Qt和Visual Studio有不同的版本,因此您需要确定要在开发中使用的Qt和Visual Studio的版本。 如您所知,一旦您使用指定版本的Visual Studio安顿下来,您必须使用相应版本的Qt SDK。
3.3 下载CEF二进制发行文件 (可选)
下载的源码中默认会有一个构造依据的版本,如果没有自己的特殊需求,可以忽略本步骤,如果有,需要将dep目录中加入对应文件
root
├─dep
│ └─cef_binary_76.1.13+gf19c584+chromium-76.0.3809.132_windows64
├─src
└─test
3.4 修改 config.cmake 中对应的配置项
主要是这个QTDIR的配置,配置到自己的实际路径中
3.5 使用CMake构建项目
mkdir build.win && cd build.win
cmake .. && cmake --build .
构建成功后,会在项目根目录下,生成out文件夹,结构如下:
D:\QCEF\QCEFVIEW-MASTER\OUT
├─QCefView
│ ├─bin # 运行时文件,动态库,exe
│ │ ├─Debug
│ │ └─Release
│ ├─include # 头文件
│ └─lib # 静态库
│ ├─Debug
│ └─Release
└─QCefViewTest # 测试项目
├─Debug
└─Release
编译报错处理:
- 如果QT版本与源码中版本使用的一些代码不匹配,可能会导致报错,这时需要修改源码。我本地用的5.6,关于QMetaObject::invokeMethod和一些Lamda的一些用法不同,按标准语法改下就行了。
- 另外我下的版本中,源码中QCefEvent的使用有点问题,按源码修改下编译即可。
04. 运行QCefViewTest,初识QCefView
运行QCefViewTest,效果如下:
左侧是Qt Widget,右侧是Web页面。
点击左侧ChangeColor,右侧背景色会变,实现了从Qt到Web的通讯
点击右侧Invoke Method,会调起Qt的对应函数,实现Web到Qt的通讯。
具体方式按Test源码即可。
05. 通讯核心代码
QCefView通讯核心是依赖Web页面中注入的QCefClient对象与QCefView界面之间的调用实现的。
5.1 Qt 调用 JS
Qt端:
通过broadcastEvent(const QCefEvent& event)触发一个事件消息到所有Frame。
查看源码可知,除了广播外,也支持触发事件到特定Frame,这里不过多介绍。
QCefEvent封装了事件名,属性等信息。
调用方式如下:
void CustomCefView::changeColor()
{
QColor color(255,0,0);
QCefEvent event("colorChange");
event.setStringProperty("color", color.name());
broadcastEvent(event);
}
JS端:
通过QCefClient.addEventListener(eventName, callfunction)对事件进行监听调用。
代码如下:
function onColorChanged (event) {
document.getElementById("main").style.backgroundColor = event["color"];
}
function onLoad() {
if (typeof(QCefClient) == 'undefined') {
return;
}
QCefClient.addEventListener("colorChange", onColorChanged)
}
5.2 JS调用Qt
QCefView官方提供调用方式有三种,重点关注下面这个即可。
JS端:
JS调用Qt通过QCefClient.invokeMethod反射调用Qt的对应监听函数。
代码如下:
function onInvokeMethodClicked() {
QCefClient.invokeMethod("TestMethod", 1, false, "arg3");
}
Qt端:
统一通过onInvokeMethodNotify函数接收实践,并根据method和QMetaObject::invokeMethod反射调用到对应函数。
代码如下:
void CustomCefView::onInvokeMethodNotify(int browserId, int frameId, const QString& method, const QVariantList& arguments)
{
QMetaObject::invokeMethod(this, "testOnInvokeMethodNotify", Qt::QueuedConnection, Q_ARG(QString, method));
}