Qt?CEF融合技QCefView使用教程(推薦)
??如果從事C++客戶端開發(fā),對(duì)CEF應(yīng)該不陌生,當(dāng)C++界面需要和web交互時(shí),CEF是很好的解決方案,當(dāng)然Qt也提供了QWebEngineView來進(jìn)行web交互,最近在萬(wàn)興喵影的安裝目錄看到了QCefView.dll,之前也聽說過這個(gè)庫(kù),沒在意,沒想到還真有人用到項(xiàng)目里面,于是決定自己編譯寫個(gè)demo看看,下圖時(shí)萬(wàn)興喵影的安裝文件截圖:
QCefView介紹
??官方網(wǎng)址:http://tishion.github.io/QCefView/
Github地址:https://github.com/CefView/QCefView
??QCefView是一個(gè)與Chromium Embedded Framework集成的Qt第三方開源庫(kù),LGPL許可,可以在項(xiàng)目中免費(fèi)使用,功能類似CEF、QWebEngineView,提供C++和web交互的能力。
QCefView編譯準(zhǔn)備
??我的編譯環(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目錄,但是是空的,需要手動(dòng)clone CefViewCore的代碼,然后放到QCefView工程里。
2 修改CEF配置
??在編譯前,需要做些配置修改,由于QCefView依賴于CEF,在用CMake配置項(xiàng)目時(shí),會(huì)下載CEF工程,如果沒有比較好的網(wǎng)絡(luò)環(huán)境,可能無法下載CEF, 不過可以手動(dòng)下載CEF, 放到指定目錄即可。打開QCefView\CefViewCore\CefConfig.cmake我是windows編譯, 注釋掉CEF的下載鏈接,也就是第7行,例如我的注釋:
??注釋之后,我們根據(jù)CEF鏈接,用迅雷手動(dòng)下載CEF, 解壓放到QCefView\CefViewCore\dep目錄即可,不需要改文件名,根據(jù)cmake的提示,解壓后文件得以cef_binary_為前綴。
3 修改Qt版本
??打開QCefView根目錄的QtConfig.cmake, 將第16行指定為你的Qt路徑,例如我的Qt路徑
??然后去環(huán)境變量里看看是否有Qt相關(guān)的設(shè)置,有的話最好先刪掉,然后添加如下系統(tǒng)配置
??vs2019里的Qt配置
??這些完成后,最好重啟電腦,不然CMake可能無法識(shí)別。導(dǎo)致如下錯(cuò)誤:
開始編譯QCefView
??1 在QCefView根目錄建一個(gè)目錄,例如build_vs2019_x64, 到時(shí)候CMake產(chǎn)生的vs sln解決方案放到該目錄;
??2 打開CMake GUI, 找到QCefViwe目錄,指定源碼目錄和解決方案目錄build_vs2019_x64,,例如我的設(shè)置:
??3 點(diǎn)擊Configure開始配置項(xiàng)目,結(jié)果如下:
??再點(diǎn)擊Generate生成vs2019解決方案,如下圖:
??4 打開項(xiàng)目用vs2019編譯,我的編譯結(jié)果
生成的dll路徑
??QCefView編譯的庫(kù)路徑在源碼根目錄,例如我的生成結(jié)果
lib路徑
頭文件
QCefView項(xiàng)目說明
??(1)QCefView是動(dòng)態(tài)庫(kù)項(xiàng)目,其它的是靜態(tài)庫(kù),QCefView靜態(tài)鏈接其它庫(kù);
(2)QCefViewTest是個(gè)exe項(xiàng)目,比如打開百度首頁(yè),顯示結(jié)果如下:
如何使用QCefView進(jìn)行開發(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是一個(gè)窗口,只是作者把它封裝成了dll,使用者則需要把QCefView添加到界面布局里。
來看一下構(gòu)造函數(shù)的實(shí)現(xiàn)
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的操作,最終還是調(diào)用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構(gòu)造函數(shù)可以看到QCefWindow,該類構(gòu)造函數(shù)如下:
QCefWindow::QCefWindow(QWindow* parent, QCefView* hostView /*= 0*/) : QWindow(parent) , hwndCefBrowser_(nullptr) { setFlags(Qt::FramelessWindowHint); CCefManager::getInstance().initializeCef(); }
??去掉了窗口邊框,初始化CEF管理類,在析構(gòu)函數(shù)里deinit.
??窗口大小變化時(shí)的處理
void QCefWindow::resizeEvent(QResizeEvent* e) { syncCefBrowserWindow(); QWindow::resizeEvent(e); }
??參考QCefViewTest打開網(wǎng)頁(yè)的用法,該項(xiàng)目新創(chuàng)建了一個(gè)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的一些方法,用于進(jìn)行相關(guān)的通知回調(diào)。顯示網(wǎng)頁(yè),只需要傳入url即可,代碼如下:
cefview = new CustomCefView("https://www.baidu.com/", this); ui.cefContainer->layout()->addWidget(cefview);
demo實(shí)現(xiàn)
??首先需要把編譯后的.lib .dll和include正一塊兒,方便vs2019鏈接,創(chuàng)建Qt GUI項(xiàng)目,把QCefViewTest項(xiàng)目里的customcefview.h和customcefview.cpp添加到項(xiàng)目中,讓后把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); }
??上述代碼是顯示百度首頁(yè),按F5運(yùn)行時(shí),會(huì)提示沒有dll, 把bin目錄里編譯好的文件全部放到exe所在的目錄接口,MyTest運(yùn)行結(jié)果如下:
??QCefView的入門比較簡(jiǎn)單,但是還有很多復(fù)雜操作需要探討。
萬(wàn)興喵影用QCefView來做什么
??既然,萬(wàn)興喵影使用了QCefView,那么在哪里用到了QCefView呢?
??來看看這張圖
??會(huì)員開通頁(yè)面,這個(gè)應(yīng)該是web頁(yè)面,在mac和windows都可以訪問,用QCefView顯示該頁(yè)面,還有下面的活動(dòng)頁(yè)面:
??
不用說這個(gè)頁(yè)面用Qt做不了吧,實(shí)時(shí)更新,資源
從哪里來,必然是加載服務(wù)器頁(yè)面,用QCefView加載服務(wù)端頁(yè)面即可顯示,Qt只需要做很少的工作。
??一點(diǎn)說明:我不是萬(wàn)興的員工,我也不是他們的托,雖然買了兩個(gè)萬(wàn)興的軟件,但是感覺有點(diǎn)虧,和大廠Adobe還是有不少差距,但是萬(wàn)興在國(guó)內(nèi)應(yīng)該也算是個(gè)辦公軟件大廠,PDF編輯、視頻編輯、腦圖等軟件做的還是很不錯(cuò),和國(guó)際大廠差距是有,但是并不是不可彌補(bǔ)。
??另外給深圳的C++ Qt程序員打個(gè)廣告,有機(jī)會(huì)可以去萬(wàn)興科技面試的話,我的博客應(yīng)該可以幫你一把。
到此這篇關(guān)于Qt CEF融合技QCefView使用教程的文章就介紹到這了,更多相關(guān)Qt QCefView使用內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Qt創(chuàng)建SQlite數(shù)據(jù)庫(kù)的示例代碼
本文主要介紹了Qt創(chuàng)建SQlite數(shù)據(jù)庫(kù)的示例代碼,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-05-05老生常談C語(yǔ)言動(dòng)態(tài)函數(shù)庫(kù)的制作和使用(推薦)
下面小編就為大家?guī)硪黄仙U凜語(yǔ)言動(dòng)態(tài)函數(shù)庫(kù)的制作和使用(推薦)。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-08-08C語(yǔ)言模擬實(shí)現(xiàn)strstr函數(shù)的示例代碼
strstr是C語(yǔ)言中的函數(shù),作用是返回字符串中首次出現(xiàn)子串的地址。本文將用C語(yǔ)言模擬實(shí)現(xiàn)strstr函數(shù),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2022-07-07C/C++使用C語(yǔ)言實(shí)現(xiàn)多態(tài)
這篇文章主要介紹了C/C++多態(tài)的實(shí)現(xiàn)機(jī)制理解的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下,希望能給你帶來幫助2021-08-08C語(yǔ)言中settimeofday函數(shù)和gettimeofday函數(shù)的使用
這篇文章主要介紹了C語(yǔ)言中的settimeofday函數(shù)和gettimeofday函數(shù)的使用,注意settimeofday()函數(shù)只返回0和-1,需要的朋友可以參考下2015-08-08C語(yǔ)言實(shí)現(xiàn)直角坐標(biāo)轉(zhuǎn)換為極坐標(biāo)的方法
這篇文章主要介紹了C語(yǔ)言實(shí)現(xiàn)直角坐標(biāo)轉(zhuǎn)換為極坐標(biāo)的方法,涉及C語(yǔ)言進(jìn)行三角函數(shù)與數(shù)值運(yùn)算相關(guān)操作技巧,需要的朋友可以參考下2017-09-09Qt?timerEvent實(shí)現(xiàn)簡(jiǎn)單秒表功能
這篇文章主要為大家詳細(xì)介紹了Qt?timerEvent實(shí)現(xiàn)簡(jiǎn)單秒表功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-08-08