使用CEF（四）— 在QT中集成CEF（1）：基本集成

QT作为C++下著名的跨平台软件开发框架，实现了一套代码可以在所有的操作系统、平台和屏幕类型上部署。我们前几篇文章讲解了如何构建一款基于CEF的简单的样例，但这些样例的GUI都是使用的原生的或者是控件功能不强大的CEF视图框架。本文将会重新开始，使用VS2019编写一款基于QT的并嵌入原生窗体的文章。

环境搭建

在本文中，我没有使用QtCreator进行项目搭建的工作，而是使用VS配合QT VS Tools类来完成项目的环境。在本文，假设你已经安装了QT，并且了解QT的相关知识。

安装Qt VS Tools插件

在VS中，我们通过在扩展（Extension）搜索对应的QT插件，完成安装工作，安装完成后，需要重启VS。

配置Qt环境

找到Extensions - Qt VS Tools - Options：

找到Qt - Versions，进行QT - VS编译的配置：

Qt项目创建

在经过配置以后，此时使用VS进行项目创建的时候，会发现创建的向导页面会出现Qt的相关项目模板：

接下来创建一个名为QtCefDemo的样例，此时会弹出Qt的创建向导：

然后，Qt会自动帮我们配置好Debug和Release：

最后，我们再调整下项目的文件：

点击Finish，我么就得到了如下的在VS IDE下的QT项目大致结构：

当我们运行该项目以后，就可以看到目前的一个简单的QT窗体：

当然，本文的目的不仅仅是创建一个Qt窗体那样的简单，还需要进行CEF的简单集成。所以，接下来我们继续配置CEF的环境。

配置CEF环境

在前一篇文章，我们已经了解如何编译libcef_dll_wrapper这个库，所以，本文假设你已经编译出了libcef_dll_wrapper.lib（Debug和Release版本，并且对应版本的程序集类型分别是：MDd和MD）：

接下来，我们需要在我们的解决方案下，创建对应的文件夹，用来存放CEF在编译和运行时会使用到的头文件、库文件以及资源文件。

拷贝头文件以及资源文件

首先，我们在解决方案同级目录下创建一个名为CefFiles的文件夹，将cef文件中的Release和Include拷贝进来：

拷贝二进制库文件

接下来，我们在CefFiles文件夹中创建一个bin目录，用于存放libcef.lib相关文件以及ibcef_dll_wrapper.lib库文件，但需要注意的是，我们需要按照Debug和Release进行分类：

对于拷贝libcef_dll_wrapper.lib文件，我们也拷贝到对应的bin/版本目录下：

Release的同理：

此时，我们的CefFiles文件结构如下：

CefFiles
├─bin
│  ├─Debug
│  │  │  ...
│  │  │  libcef.dll
│  │  │  libcef.lib
│  │  │  libcef_dll_wrapper.lib
│  │  │  ...
│  │  │
│  │  └─swiftshader
│  │          ...
│  │
│  └─Release
│      │  ...
│      │  libcef.dll
│      │  libcef.lib
│      │  libcef_dll_wrapper.lib
│      │  ...
│      │
│      └─swiftshader
│              ...
│
├─include
│  各种.h头文件
│  ...
└─Resources
    │  cef.pak
    │  ..
    └─locales
            ...
            zh-CN.pak
            zh-TW.pak

编写manifest文件

在Windows上使用CEF的时候，需要配置将manifest文件打入exe可执行程序中，这个manifest文件我们直接手工创建，在项目目录下创建一个名为app.manifest的文件：

内容如下：

<?xml version="1.0" encoding="utf-8"?>
<assembly xmlns="urn:schemas-microsoft-com:asm.v1" manifestVersion="1.0">
  <compatibility xmlns="urn:schemas-microsoft-com:compatibility.v1">
    <application>
      <!--The ID below indicates application support for Windows 8.1 -->
      <supportedOS Id="{1f676c76-80e1-4239-95bb-83d0f6d0da78}"/>
      <!-- 10.0 -->
      <supportedOS Id="{8e0f7a12-bfb3-4fe8-b9a5-48fd50a15a9a}"/>
    </application>
  </compatibility>
</assembly>

配置VS中的头文件以及库文件的加载地址

首先是配置头文件include的目录：

由于头文件不存在Debug和Release的差别，所以Release相同配置，不再赘述。

接下来是配置链接库的文件路径，由于Debug和Release下，库文件内容存在不同，所以需要分别配置，但我们看可以使用$(Configuration)宏来完成根据环境自动配置。

在Release下，只需要同样的配置，但是会自动定位。

配置manifest文件

当然，由于manifest文件不涉及Debug还是Release，所以配置一致即可。

至此，我们的使用VS作为IDE，基于QT的框架的，集成CEF的环境完全搭建完成了，在文章的末尾，我会附上在环境搭建完成下的初始状态的项目。

集成CEF的编码

在CEF编码的时候，我们直接将cefsimple中的相关代码迁移到我们的项目中，但是会进行一定的删改。

编写simple_handler

simple_handler.h

#pragma once

#include "include/cef_client.h"

#include <list>

class SimpleHandler : public CefClient,
                      public CefLifeSpanHandler,
                      public CefLoadHandler
{
public:
    explicit SimpleHandler();
    ~SimpleHandler();

    // Provide access to the single global instance of this object.
    static SimpleHandler* GetInstance();

    virtual CefRefPtr<CefLifeSpanHandler> GetLifeSpanHandler() OVERRIDE
    {
        return this;
    }

    virtual CefRefPtr<CefLoadHandler> GetLoadHandler() OVERRIDE { return this; }

    // CefLifeSpanHandler methods:
    virtual void OnAfterCreated(CefRefPtr<CefBrowser> browser) OVERRIDE;
    virtual bool DoClose(CefRefPtr<CefBrowser> browser) OVERRIDE;
    virtual void OnBeforeClose(CefRefPtr<CefBrowser> browser) OVERRIDE;

    // CefLoadHandler methods:
    virtual void OnLoadError(CefRefPtr<CefBrowser> browser,
                             CefRefPtr<CefFrame> frame,
                             ErrorCode errorCode,
                             const CefString& errorText,
                             const CefString& failedUrl) OVERRIDE;

    // Request that all existing browser windows close.
    void CloseAllBrowsers(bool force_close);

    bool IsClosing() const { return is_closing_; }

private:
    // List of existing browser windows. Only accessed on the CEF UI thread.
    typedef std::list<CefRefPtr<CefBrowser>> BrowserList;
    BrowserList browser_list_;

    bool is_closing_;

    // Include the default reference counting implementation.
IMPLEMENT_REFCOUNTING(SimpleHandler);
};

simple_handler.cpp

// Copyright (c) 2013 The Chromium Embedded Framework Authors. All rights
// reserved. Use of this source code is governed by a BSD-style license that
// can be found in the LICENSE file.

#include "simple_handler.h"

#include <sstream>
#include <string>

#include "include/base/cef_bind.h"
#include "include/cef_app.h"
#include "include/cef_parser.h"
#include "include/views/cef_browser_view.h"
#include "include/views/cef_window.h"
#include "include/wrapper/cef_closure_task.h"
#include "include/wrapper/cef_helpers.h"

namespace
{
    SimpleHandler* g_instance = nullptr;

    // Returns a data: URI with the specified contents.
    std::string GetDataURI(const std::string& data, const std::string& mime_type)
    {
        return "data:" + mime_type + ";base64," +
            CefURIEncode(CefBase64Encode(data.data(), data.size()), false)
            .ToString();
    }
} // namespace

SimpleHandler::SimpleHandler(): is_closing_(false)
{
    DCHECK(!g_instance);
    g_instance = this;
}

SimpleHandler::~SimpleHandler()
{
    g_instance = nullptr;
}

// static
SimpleHandler* SimpleHandler::GetInstance()
{
    return g_instance;
}

void SimpleHandler::OnAfterCreated(CefRefPtr<CefBrowser> browser)
{
    CEF_REQUIRE_UI_THREAD();

    // Add to the list of existing browsers.
    browser_list_.push_back(browser);
}

bool SimpleHandler::DoClose(CefRefPtr<CefBrowser> browser)
{
    CEF_REQUIRE_UI_THREAD();

    // Closing the main window requires special handling. See the DoClose()
    // documentation in the CEF header for a detailed destription of this
    // process.
    if (browser_list_.size() == 1)
    {
        // Set a flag to indicate that the window close should be allowed.
        is_closing_ = true;
    }

    // Allow the close. For windowed browsers this will result in the OS close
    // event being sent.
    return false;
}

void SimpleHandler::OnBeforeClose(CefRefPtr<CefBrowser> browser)
{
    CEF_REQUIRE_UI_THREAD();

    // Remove from the list of existing browsers.
    BrowserList::iterator bit = browser_list_.begin();
    for (; bit != browser_list_.end(); ++bit)
    {
        if ((*bit)->IsSame(browser))
        {
            browser_list_.erase(bit);
            break;
        }
    }

    if (browser_list_.empty())
    {
        // All browser windows have closed. Quit the application message loop.
        CefQuitMessageLoop();
    }
}

void SimpleHandler::OnLoadError(CefRefPtr<CefBrowser> browser,
    CefRefPtr<CefFrame> frame,
    ErrorCode errorCode,
    const CefString& errorText,
    const CefString& failedUrl)
{
    CEF_REQUIRE_UI_THREAD();

    // Don't display an error for downloaded files.
    if (errorCode == ERR_ABORTED)
        return;

    // Display a load error message using a data: URI.
    std::stringstream ss;
    ss << "<html><body bgcolor=\"white\">"
        "<h2>Failed to load URL "
        << std::string(failedUrl) << " with error " << std::string(errorText)
        << " (" << errorCode << ").</h2></body></html>";

    frame->LoadURL(GetDataURI(ss.str(), "text/html"));
}

void SimpleHandler::CloseAllBrowsers(bool force_close)
{
    if (!CefCurrentlyOn(TID_UI))
    {
        // Execute on the UI thread.
        CefPostTask(TID_UI, base::Bind(&SimpleHandler::CloseAllBrowsers, this,
            force_close));
        return;
    }

    if (browser_list_.empty())
        return;

    BrowserList::const_iterator it = browser_list_.begin();
    for (; it != browser_list_.end(); ++it)
        (*it)->GetHost()->CloseBrowser(force_close);
}

编写simple_app

simple_app.h

#pragma once
// Copyright (c) 2013 The Chromium Embedded Framework Authors. All rights
// reserved. Use of this source code is governed by a BSD-style license that
// can be found in the LICENSE file.

#include "include/cef_app.h"

// Implement application-level callbacks for the browser process.
class SimpleApp : public CefApp, public CefBrowserProcessHandler
{
public:
    SimpleApp();

    // CefApp methods:
    virtual CefRefPtr<CefBrowserProcessHandler> GetBrowserProcessHandler()
    OVERRIDE
    {
        return this;
    }

    // CefBrowserProcessHandler methods:
    virtual void OnContextInitialized() OVERRIDE;

private:
    // Include the default reference counting implementation.
IMPLEMENT_REFCOUNTING(SimpleApp);
};

simple_app.cpp

// Copyright (c) 2013 The Chromium Embedded Framework Authors. All rights
// reserved. Use of this source code is governed by a BSD-style license that
// can be found in the LICENSE file.

#include "simple_app.h"

#include <string>
#include "include/views/cef_window.h"
#include "include/wrapper/cef_helpers.h"
#include "simple_handler.h"

SimpleApp::SimpleApp()
{
}

void SimpleApp::OnContextInitialized()
{
    CEF_REQUIRE_UI_THREAD();
}

编写入口代码处理函数集成CEF

main.cpp

对于入口函数，目前只是进行QT相关代码的编写，我们还需要对CEF进行初始化操作，对于该文件整体如下：

#include <cef_app.h>

#include "qtcefwindow.h"
#include "stdafx.h"
#include <QtWidgets/QApplication>

#include "simple_app.h"

/**
 * 初始化QT以及CEF相关
 */
int init_qt_cef(int& argc, char** argv)
{
    const HINSTANCE h_instance = static_cast<HINSTANCE>(GetModuleHandle(nullptr));

    const CefMainArgs main_args(h_instance);
    const CefRefPtr<SimpleApp> app(new SimpleApp); //CefApp实现，用于处理进程相关的回调。

    const int exit_code = CefExecuteProcess(main_args, app.get(), nullptr);
    if (exit_code >= 0)
    {
        return exit_code;
    }

    // 设置配置
    CefSettings settings;
    settings.multi_threaded_message_loop = true; //多线程消息循环
    settings.log_severity = LOGSEVERITY_DISABLE; //日志
    settings.no_sandbox = true; //沙盒

    CefInitialize(main_args, settings, app, nullptr);

    return -1;
}

int main(int argc, char* argv[])
{
    QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling); // 解决高DPI下，界面比例问题
    QApplication a(argc, argv);
    const int result = init_qt_cef(argc, argv);
    if (result >= 0)
    {
        return result;
    }

    QtCefWindow w;
    w.show();
    a.exec();

    CefShutdown(); // 关闭CEF，释放资源

    return 0;
}

修改qtcefwindow窗体代码

qtcefwindow.h

为窗体添加私有成员：CefRefPtr<SimpleHandler>

#pragma once

#include <QtWidgets/QMainWindow>

#include "simple_handler.h"
#include "ui_qtcefwindow.h"

class QtCefWindow : public QMainWindow
{
    Q_OBJECT

public:
    QtCefWindow(QWidget *parent = Q_NULLPTR);

private:
    Ui::QtCefWindowClass ui;
    CefRefPtr<SimpleHandler> simple_handler_; // 这里是新增的CefRefPtr<SimpleHandler>成员
};

qtcefwindow.cpp

在构造函数中，处理关联qtcefwindow和SimpleHandler：

#include "qtcefwindow.h"

#include <cef_request_context.h>

#include "simple_handler.h"
#include "stdafx.h"

QtCefWindow::QtCefWindow(QWidget *parent)
    : QMainWindow(parent)
{
    ui.setupUi(this);

    // 以下是将 SimpleHandler 与窗体进行关联的代码
    CefWindowInfo cef_wnd_info;
    QString str_url = "https://www.cnblogs.com/w4ngzhen";
    RECT win_rect;
    QRect rect = this->geometry();
    win_rect.left = rect.left();
    win_rect.right = rect.right();
    win_rect.top = rect.top();
    win_rect.bottom = rect.bottom();

    cef_wnd_info.SetAsChild((HWND)this->winId(), win_rect); //将cef界面嵌入qt界面中
    CefBrowserSettings cef_browser_settings;
    simple_handler_ = CefRefPtr<SimpleHandler>(new SimpleHandler());
    CefBrowserHost::CreateBrowser(cef_wnd_info,
        simple_handler_,
        str_url.toStdString(),
        cef_browser_settings,
        nullptr,
        CefRequestContext::GetGlobalContext());
}

运行代码

终于，项目搭建完成以后，我们走到了最后一步，看看我们在Qt中集成CEF的效果吧。

运行程序，会发现报错：

---------------------------
QtCefDemo.exe - 系统错误
---------------------------
由于找不到 libcef.dll，无法继续执行代码。重新安装程序可能会解决此问题。
---------------------------
确定
---------------------------

对于这个问题，其实我们就是缺少运行时候的相关库文件，这里我们暂时先手动进行拷贝工作，以Debug环境为例，我们将资源文件拷贝到输出目录中：

然后将CefFiles\bin\Debug中所有的文件拷贝到输出目录中：

当然，我们可以通过配置自动化脚本的方式，让IDE帮助我们拷贝这些文件，但本文不讨论这个问题。在手动拷贝了文件以后，我们再次尝试运行。

终于，我们看到了我们想要的页面，不过似乎渲染显示还有点问题，不过在本文我们暂且不讨论。在后续，我会单独写一篇文章，来谈一谈使用CEF以及QT集成CEF的过程中会遇到的各种问题以及解决方案。

附录：源码以及相关文件

本文所涉及的项目源码在：w4ngzhen/QtCefDemo (github.com)

其中，会有两个提交：

1. project init
2. integrate CEF code

读者可以自行创建分支，回退到指定的提交查看对应状态的代码。

此外，本Demo还需要我们创建的CefFiles文件夹以及其中的文件。由于Github对于大文件的处理不太方便。本人将其上传到了网盘，读者只需要从网盘下载CefFiles.zip文件，并将其解压到解决方案同级目录即可。

网盘地址：链接：https://pan.baidu.com/s/1BylLcETsFAJ5-TnmzpRxeA

提取码：bydn