01. QCefView简介

官方网址：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

 

编译报错处理：

1. 如果QT版本与源码中版本使用的一些代码不匹配，可能会导致报错，这时需要修改源码。我本地用的5.6，关于QMetaObject::invokeMethod和一些Lamda的一些用法不同，按标准语法改下就行了。
2. 另外我下的版本中，源码中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));
}