Qt?CEF融合技QCefView使用教程(推薦)
??如果從事C++客戶端開發(fā)，對CEF應該不陌生，當C++界面需要和web交互時，CEF是很好的解決方案，當然Qt也提供了QWebEngineView來進行web交互，最近在萬興喵影的安裝目錄看到了QCefView.dll，之前也聽說過這個庫，沒在意，沒想到還真有人用到項目里面，于是決定自己編譯寫個demo看看，下圖時萬興喵影的安裝文件截圖：
QCefView介紹
??官方網址：http://tishion.github.io/QCefView/
Github地址：https://github.com/CefView/QCefView
??QCefView是一個與Chromium Embedded Framework集成的Qt第三方開源庫，LGPL許可，可以在項目中免費使用，功能類似CEF、QWebEngineView，提供C++和web交互的能力。
QCefView編譯準備
??我的編譯環(huán)境win11、vs2019、Qt5.15.2，本次編譯采用x64編譯方式，最終生成vs2019的解決方案，因此Qt需要使用msvc2019_64。
1 下載代碼
??clone QCefView
git clone https://github.com/CefView/QCefView.git
??clone CefViewCore
git clone https://github.com/CefView/CefViewCore.git
??雖然QCefView工程里有CefViewCore目錄，但是是空的，需要手動clone CefViewCore的代碼，然后放到QCefView工程里。
2 修改CEF配置
??在編譯前，需要做些配置修改，由于QCefView依賴于CEF，在用CMake配置項目時，會下載CEF工程，如果沒有比較好的網絡環(huán)境，可能無法下載CEF, 不過可以手動下載CEF, 放到指定目錄即可。打開QCefView\CefViewCore\CefConfig.cmake我是windows編譯, 注釋掉CEF的下載鏈接，也就是第7行，例如我的注釋：
??注釋之后，我們根據CEF鏈接，用迅雷手動下載CEF, 解壓放到QCefView\CefViewCore\dep目錄即可，不需要改文件名，根據cmake的提示，解壓后文件得以cef_binary_為前綴。
3 修改Qt版本
??打開QCefView根目錄的QtConfig.cmake, 將第16行指定為你的Qt路徑，例如我的Qt路徑
??然后去環(huán)境變量里看看是否有Qt相關的設置，有的話最好先刪掉，然后添加如下系統(tǒng)配置
??vs2019里的Qt配置
??這些完成后，最好重啟電腦，不然CMake可能無法識別。導致如下錯誤：
開始編譯QCefView
??1 在QCefView根目錄建一個目錄，例如build_vs2019_x64, 到時候CMake產生的vs sln解決方案放到該目錄；
??2 打開CMake GUI, 找到QCefViwe目錄，指定源碼目錄和解決方案目錄build_vs2019_x64，，例如我的設置：
??3 點擊Configure開始配置項目，結果如下：
??再點擊Generate生成vs2019解決方案，如下圖：
??4 打開項目用vs2019編譯，我的編譯結果
生成的dll路徑
??QCefView編譯的庫路徑在源碼根目錄，例如我的生成結果
lib路徑
頭文件
QCefView項目說明
??（1）QCefView是動態(tài)庫項目，其它的是靜態(tài)庫，QCefView靜態(tài)鏈接其它庫；
（2）QCefViewTest是個exe項目，比如打開百度首頁，顯示結果如下：
如何使用QCefView進行開發(fā)
QCefView源碼瀏覽
??在寫demo前，來看看QCefView的源碼
頭文件
class QCEFVIEW_EXPORT QCefView : public QWidget
{
/// <summary>
///
/// </summary>
Q_OBJECT
public:
/// <summary>
///
/// </summary>
QCefView(const QString url, QWidget* parent = 0);
??從頭文件可知，QCefView是一個窗口，只是作者把它封裝成了dll，使用者則需要把QCefView添加到界面布局里。
來看一下構造函數的實現
QCefView::QCefView(const QString url, QWidget* parent /*= 0*/)
: QWidget(parent)
, pImpl_(nullptr)
{
// initialize the layout
QVBoxLayout* layout = new QVBoxLayout(this);
layout->setContentsMargins(0, 0, 0, 0);
setLayout(layout);
// create the window
QCefWindow* pCefWindow = new QCefWindow(windowHandle(), this);
pCefWindow->create();
// create window container
QWidget* windowContainer = createWindowContainer(pCefWindow, this);
layout->addWidget(windowContainer);
// create the implementation
// url傳到這里打開
pImpl_ = std::unique_ptr<Implementation>(new Implementation(url, this, pCefWindow));
// If we're already part of a window, we'll install our event handler
// If our parent changes later, this will be handled in QCefView::changeEvent()
if (this->window())
this->window()->installEventFilter(this);
}
??web的操作，最終還是調用CEF來完成
///
// Create a new browser window using the window parameters specified by
// |windowInfo|. All values will be copied internally and the actual window will
// be created on the UI thread. If |request_context| is NULL the global request
// context will be used. This function can be called on any browser process
// thread and will not block. The optional |extra_info| parameter provides an
// opportunity to specify extra information specific to the created browser that
// will be passed to cef_render_process_handler_t::on_browser_created() in the
// render process.
///
CEF_EXPORT int cef_browser_host_create_browser(
const cef_window_info_t* windowInfo,
struct _cef_client_t* client,
const cef_string_t* url,
const struct _cef_browser_settings_t* settings,
struct _cef_dictionary_value_t* extra_info,
struct _cef_request_context_t* request_context);
QCefView的窗口
??在QCefView構造函數可以看到QCefWindow，該類構造函數如下：
QCefWindow::QCefWindow(QWindow* parent, QCefView* hostView /*= 0*/)
: QWindow(parent)
, hwndCefBrowser_(nullptr)
{
setFlags(Qt::FramelessWindowHint);
CCefManager::getInstance().initializeCef();
}
??去掉了窗口邊框，初始化CEF管理類，在析構函數里deinit.
??窗口大小變化時的處理
void
QCefWindow::resizeEvent(QResizeEvent* e)
{
syncCefBrowserWindow();
QWindow::resizeEvent(e);
}
??參考QCefViewTest打開網頁的用法，該項目新創(chuàng)建了一個CustomCefView類，派生于QCefView，代碼如下：
#ifndef CUSTOMCEFVIEW_H
#define CUSTOMCEFVIEW_H
#include <QCefView.h>
class CustomCefView : public QCefView
{
Q_OBJECT
public:
using QCefView::QCefView;
~CustomCefView();
void changeColor();
protected:
virtual void onDraggableRegionChanged(const QRegion& region) override;
virtual void onQCefUrlRequest(const QString& url) override;
virtual void onQCefQueryRequest(const QCefQuery& query) override;
virtual void onInvokeMethodNotify(int browserId,
int frameId,
const QString& method,
const QVariantList& arguments) override;
private:
};
#endif // CUSTOMCEFVIEW_H
??該類重寫了QCefView的一些方法，用于進行相關的通知回調。顯示網頁，只需要傳入url即可，代碼如下：
cefview = new CustomCefView("https://www.baidu.com/", this);
ui.cefContainer->layout()->addWidget(cefview);
demo實現
??首先需要把編譯后的.lib .dll和include正一塊兒，方便vs2019鏈接，創(chuàng)建Qt GUI項目，把QCefViewTest項目里的customcefview.h和customcefview.cpp添加到項目中，讓后把CefView添加到界面布局中，我的界面代碼如下：
MyTest.h
#pragma once
#include <QtWidgets/QWidget>
#include "ui_MyTest.h"
#include "customcefview.h"
class MyTest : public QWidget
{
Q_OBJECT
public:
MyTest(QWidget *parent = Q_NULLPTR);
private:
Ui::MyTestClass ui;
CustomCefView* m_pCefView = nullptr;
};
MyTest.cpp
#include "MyTest.h"
#include <QVBoxLayout>
#include <QLabel>
MyTest::MyTest(QWidget *parent)
: QWidget(parent)
{
ui.setupUi(this);
QVBoxLayout* pVlay = new QVBoxLayout(this);
QLabel* label = new QLabel(u8"Qt CEF Demo");
label->setFixedHeight(30);
m_pCefView = new CustomCefView("https://www.baidu.com/", this);
pVlay->addWidget(label);
pVlay->addWidget(m_pCefView);
setLayout(pVlay);
}
??上述代碼是顯示百度首頁，按F5運行時，會提示沒有dll, 把bin目錄里編譯好的文件全部放到exe所在的目錄接口，MyTest運行結果如下：
??QCefView的入門比較簡單，但是還有很多復雜操作需要探討。
萬興喵影用QCefView來做什么
??既然，萬興喵影使用了QCefView，那么在哪里用到了QCefView呢？
??來看看這張圖
??會員開通頁面，這個應該是web頁面，在mac和windows都可以訪問，用QCefView顯示該頁面，還有下面的活動頁面：
??
不用說這個頁面用Qt做不了吧，實時更新，資源
從哪里來，必然是加載服務器頁面，用QCefView加載服務端頁面即可顯示，Qt只需要做很少的工作。
??一點說明：我不是萬興的員工，我也不是他們的托，雖然買了兩個萬興的軟件，但是感覺有點虧，和大廠Adobe還是有不少差距，但是萬興在國內應該也算是個辦公軟件大廠，PDF編輯、視頻編輯、腦圖等軟件做的還是很不錯，和國際大廠差距是有，但是并不是不可彌補。
??另外給深圳的C++ Qt程序員打個廣告，有機會可以去萬興科技面試的話，我的博客應該可以幫你一把。
到此這篇關于Qt CEF融合技QCefView使用教程的文章就介紹到這了,更多相關Qt QCefView使用內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這里我們不涉及容器的基本操作之類，只是要討論一下各個容器其各自的特點STL中的常用容器包括：順序性容器（vector、deque、list）、關聯容器（map、set）、容器適配器（queue、stac）2013-09-09
這篇文章主要介紹了C++中的間接宏函數,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-04-04
這篇文章主要為大家詳細介紹了OpenGL實現3D空間中移動圖像，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-08-08
這篇文章主要介紹了C語言移除元素的三種思路，總的來說這并不是一道難題，那為什么要拿出這道題介紹？拿出這道題真正想要傳達的是解題的思路，以及不斷優(yōu)化探尋最優(yōu)解的過程。希望通過這道題能給你帶來一種解題優(yōu)化的思路2022-10-10
這篇文章主要為大家詳細介紹了C語言的分支和循環(huán)語句，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-02-02
這篇文章主要為大家詳細介紹了C++實現簡單走迷宮的代碼，利用回溯法求解，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-05-05
這篇文章主要為大家詳細介紹了Qt中線程的使用方法，文中的示例代碼講解詳細，對我們學習Qt有一定的幫助，感興趣的小伙伴可以跟隨小編一起了解一下2022-12-12
設計一個上層的IPC接口,這個接口將在未來封裝底層的通信機制,這樣的設計要求接口足夠抽象,以便于底層實現的細節(jié)對上層用戶透明,本文給大家介紹了如何使用C++創(chuàng)建多個IPC機制的上層接口,文中通過代碼示例介紹的非常詳細,需要的朋友可以參考下2023-12-12
const引用是指向const對象的引用,可以讀取ref，但不能修改所以也就有將const變量賦值給非const引用是非法的,感興趣的朋友可以了解下，或許本文對你有所幫助2013-01-01
這篇文章主要介紹了C語言中讀取時間日期的基本方法,分別是time()函數和gmtime()函數的使用,注意返回值的區(qū)別,需要的朋友可以參考下2015-08-08