QCefView怎么用

小編給大家分享一下QCefView怎么用，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

QCefView介紹

??官方網址：http://tishion.github.io/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怎么用”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！