Qt CEF融合技QCefView使用教程(推薦)
如果從事C++客戶端開發,對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編譯準備
我的編譯環境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工程,如果沒有比較好的網絡環境,可能無法下載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路徑
然後去環境變量裡看看是否有Qt相關的設置,有的話最好先刪掉,然後添加如下系統配置
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是動態庫項目,其它的是靜態庫,QCefView靜態鏈接其它庫;
(2)QCefViewTest是個exe項目,比如打開百度首頁,顯示結果如下:
如何使用QCefView進行開發
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打開網頁的用法,該項目新創建瞭一個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鏈接,創建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使用內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!
推薦閱讀:
- 詳解Qt中QStackedWidget控件的使用
- Qt開發實現跨窗口信號槽通信
- C++ Qt QColorDialog使用方法
- Qt timerEvent實現簡單秒表功能
- Qt實現繪制網格背景的示例代碼