QCefView简介

Qter

官方网址：http://tishion.github.io/QCefView/

Github地址：https://github.com/tishion/QCefView

目录

1. 什么是QCefView

2. 为什么使用QCefView

3. 构建QCefView

3.1 检出QCefView的源码；

3.2 部署Qt SDK

3.3 下载CEF二进制发行文件 （可选）

04. 运行QCefViewTest，初识QCefView

05. 通讯核心代码

5.1 Qt 调用 JS

5.2 JS调用Qt

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:nInvokeMethodNotify(int browserId, int frameId, const QString& method, const QVariantList& arguments)
{
  QMetaObject::invokeMethod(this, "testOnInvokeMethodNotify", Qt:ueuedConnection, Q_ARG(QString, method));
}

————————————————
版权声明：本文为CSDN博主「码拉小农虾」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/d_chunyu/article/details/117117825