firemail

标题: QCefView简介 [打印本页]

作者: Qter 时间: 2023-3-25 15:17
标题: 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

编译报错处理：

如果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

欢迎光临 firemail (http://firemail.wang:8088/)