CEF：MFC 对话框 Demo（VS2013）
原文鏈接：https://blog.csdn.net/blackwoodcliff/article/details/74276848
?
隨著 HTML5 的崛起和 IE 的淘汰，微軟 Web Browser 控件越來越不合時宜，CEF (Chromium Embedded Framework) 越來越受歡迎。但 CEF 使用起來比 Web Browser 復雜的多，而且它的官方例子 cefsimple 和 cefclient 都是使用 Win32 API 開發的，這給大家學習使用 CEF 帶來了很大不便，很多人更需要一個使用 MFC 開發的例子。
CEF 版本：cef_binary_3.2623.1395.g3034273_windows32
開發工具：Visual Studio 2013
下載 CEF
獲得 CEF 有兩種方法，一種是下載源碼自己編譯，另一種是直接下載編譯好的二進制文件。自己編譯 CEF 源碼太麻煩了，可謂困難重重，有興趣的同學可以看這里：BranchesAndBuilding。?
毫不猶豫的放棄自己編譯的念頭后，就只剩第二種方法了。網上常見的下載 CEF Binary 的地方是 http://cefbuilds.com 和 http://opensource.spotify.com/cefbuilds/index.html，但這兩個地方現在都連不上了。最后只好求助 CSDN：?
cef_binary_3.2623.1395.g3034273_windows32.part1?
cef_binary_3.2623.1395.g3034273_windows32.part2
編譯 libcef_dll_wrapper
libcef.dll 提供的是 C 接口。我們既然都已經使用 MFC 了，當然更想用 C++ 接口，不幸的是，這需要自己編譯。編譯方法如下：?
首先，下載一個 CMake，下載地址在這里：cmake-3.8.2-win32-x86.msi?
下載之后安裝，安裝之后運行 CMake (cmake-gui)。?
把剛才下載的 cef_binary_3.2623.1395.g3034273_windows32 解壓到 D: 盤根目錄。?
在 CMake 界面上分別點擊 [Browse Source…] 和 [Browse Build…] 按鈕，選擇剛才解壓 CEF 的目錄，如下圖：?
?
再點擊 [Generate] 按鈕，在彈出的窗口上選擇“Visual Studio 12 2013”，如下圖：?
?
然后點擊窗口下面的 [Finish] 按鈕，生成 VS2013 解決方案。?
等待一小會兒，生成完畢后的窗口如下所示，在窗口底部顯示出了“Generating done”字樣。?
?
這時，在 D:\cef_binary_3.2623.1395.g3034273_windows32 文件夾里生成了 cef.sln 文件。?
啟動 Visual Studio 2013，打開剛才生成的 cef.sln 文件。打開 cef.sln 后的 VS2013 界面如下圖：?
?
在“解決方案資源管理器”里，在“libcef_dll_wrapper”項目上點擊鼠標右鍵，然后在彈出菜單上點擊“生成(U)”項，編譯生成 libcef_dll_wrapper。?
等一會兒后（等待時間長短依電腦性能而不同），就生成了 Debug 版的 libcef_dll_wrapper.lib。?
然后，在工具欄里，把“解決方案配置”改為“Release”，再在“libcef_dll_wrapper”項目上點擊鼠標右鍵，在彈出菜單上點擊“生成(U)”項，編譯生成 Release 版的 libcef_dll_wrapper。?
最后，生成的 Debug 版和 Release 版的 libcef_dll_wrapper 分別位于 D:\cef_binary_3.2623.1395.g3034273_windows32\libcef_dll\Debug\libcef_dll_wrapper.lib 和 D:\cef_binary_3.2623.1395.g3034273_windows32\libcef_dll\Release\libcef_dll_wrapper.lib。?
至此，準備工作就已經完成了。
創建 MFC 對話框項目
關閉剛才的 Visual Studio 2013，再重新啟動一個 Visual Studio 2013。?
點擊菜單 [文件(F)->新建(N)->項目(P)…]，打開“新建項目”對話框，在左側選擇 [已安裝->模板->Visual C++->MFC]，然后選擇中間的“MFC 應用程序”，項目名稱輸入 CefMfcDemo，位置選擇 D:\，如下圖：?
?
點擊 [確定] 按鈕，進入 MFC 應用程序向導，再點擊 [下一步] 按鈕，進入“應用程序類型”選擇界面。選擇“基于對話框”和“在靜態庫中使用 MFC”，如下圖：?
?
點擊 [下一步]，進入“用戶界面功能”選擇頁，選擇項目如下圖：?
?
點擊 [下一步]，進入“高級功能”界面，只選擇“公共控件清單”就好，如下圖：?
?
點擊 [下一步]，進入“生成的類”界面，這里面不需要改什么，直接點擊 [完成] 按鈕，生成 CefMfcDemo 項目。?
生成項目后，對話框界面編輯器會自動打開，如下圖：?
把界面上的“TODO: ”標簽、“確定”、“取消”按鈕都刪掉。（刪完之后記得保存）
修改項目屬性
在“解決方案資源管理器”里，在項目名稱“CefMfcDemo”上點擊鼠標右鍵，然后在彈出菜單上點擊“屬性(R)”項，打開“CefMfcDemo 屬性頁”窗口。改變“配置”為“所有配置”，選擇 [配置屬性->VC++ 目錄]，把 D:\cef_binary_3.2623.1395.g3034273_windows32 添加到“包含目錄”，然后點擊 [確定] 按鈕關閉窗口。?
?
重新打開屬性頁窗口，改變“配置”為“Debug”，選擇 [配置屬性->VC++ 目錄]，把 D:\cef_binary_3.2623.1395.g3034273_windows32\Debug 添加到“庫目錄”，然后點擊 [確定] 按鈕關閉窗口。?
?
重新打開屬性頁窗口，改變“配置”為“Release”，選擇 [配置屬性->VC++ 目錄]，把 D:\cef_binary_3.2623.1395.g3034273_windows32\Release 添加到“庫目錄”，然后點擊 [確定] 按鈕關閉窗口。?
?
重新打開屬性頁窗口，改變“配置”為“所有配置”，選擇 [配置屬性->C/C++->預編譯頭]，將“預編譯頭”改為“不使用預編譯頭”，然后點擊 [確定] 按鈕關閉窗口。?
?
重新打開屬性頁窗口，改變“配置”為“所有配置”，選擇 [配置屬性->鏈接器->輸入]，把 libcef.lib 和 libcef_dll_wrapper.lib 添加到“附加依賴項”，然后點擊 [確定] 按鈕關閉窗口。?
添加 CefClient 派生類
在“解決方案資源管理器”里，在項目名稱“CefMfcDemo”上點擊鼠標右鍵，然后在彈出菜單上選擇“添加(D)->類(C)…”項，打開“添加類”窗口，在左側選擇“已安裝->Visual C++ ->C++”，再選擇中間的“C++ 類”，然后點擊 [添加(A)] 按鈕，進入“一般 C++ 類向導”窗口。在“類名(L)”里輸入 CSimpleClient，然后點擊 [完成] 按鈕，生成 CSimpleClient 類。?
?
修改 SimpleClient.h 文件內容如下：
#pragma once
#include "include/cef_client.h"
class CSimpleClient : public CefClient, public CefLifeSpanHandler
{
public:
? ? CSimpleClient();
? ? ~CSimpleClient();
? ? virtual CefRefPtr<CefLifeSpanHandler> GetLifeSpanHandler() OVERRIDE
? ? { return this; }
? ? // CefLifeSpanHandler methods:
? ? virtual void OnAfterCreated(CefRefPtr<CefBrowser> browser) OVERRIDE;
? ? CefRefPtr<CefBrowser> GetBrowser() { return m_cefBrowser; }
private:
? ? CefRefPtr<CefBrowser> m_cefBrowser;
? ? IMPLEMENT_REFCOUNTING(CSimpleClient);
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
在 SimpleClient.cpp 文件里添加如下函數：
void CSimpleClient::OnAfterCreated(CefRefPtr<CefBrowser> browser)
{
? ? m_cefBrowser = browser;
}
1
2
3
4
修改 CCefMfcDemoDlg 類，創建瀏覽器
首先打開 CefMfcDemoDlg.h 文件，在 #pragma once 下面添加 #include "SimpleClient.h"。然后再添加 public 成員變量：CefRefPtr<CSimpleClient> m_simpleClient;。?
接著打開 CefMfcDemoDlg.cpp 文件，先在頂部添加 #include "include/cef_app.h"，再在 OnInitDialog() 函數里添加如下代碼：
? ? CefRefPtr<CSimpleClient> client(new CSimpleClient());
? ? m_simpleClient = client;
? ? CefSettings settings;
? ? CefSettingsTraits::init(&settings);
? ? settings.multi_threaded_message_loop = true;
? ? CefMainArgs mainArgs;
? ? CefRefPtr<CefApp> cefApp;
? ? CefInitialize(mainArgs, settings, cefApp, NULL);
? ? RECT rect;
? ? GetClientRect(&rect);
? ? RECT rectnew = rect;
? ? rectnew.top = rect.top + 50;
? ? rectnew.bottom = rect.bottom;
? ? rectnew.left = rect.left;
? ? rectnew.right = rect.right;
? ? CefWindowInfo winInfo;
? ? winInfo.SetAsChild(GetSafeHwnd(), rectnew);
? ? CefBrowserSettings browserSettings;
? ? CefBrowserHost::CreateBrowser(winInfo, client, _T("http://www.baidu.com"), browserSettings, NULL);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
處理對話框的 WM_CLOSE 消息，關閉瀏覽器
點擊菜單 [視圖(V)->類視圖(A)]，打開“類視圖”窗口，展開“CefMfcDemo”節點，在類 CCefMfcDemoDlg 上點擊鼠標右鍵，然后在彈出菜單上點擊“屬性(R)”項，打開“屬性”窗口。在“屬性”窗口工具欄上，點擊“消息”圖標，切換到對話框消息界面。選中 WM_CLOSE 消息，點擊右側箭頭打開下拉框，點擊 <add> OnClose 添加 WM_CLOSE 消息處理函數。然后光標會自動定位到剛添加的 OnClose() 函數上，在函數里添加 CefShutdown();。?
?
至此，在 MFC 對話框里嵌入 CEF 所需的代碼就基本完成了。
編譯程序
點擊菜單 [調試(D)->開始執行(不調試)(H)]，編譯并運行程序，這時會出現錯誤信息 無法打開文件“libcef_dll_wrapper.lib”，其實這個文件我們在第二步早已經生成了。?
把 D:\cef_binary_3.2623.1395.g3034273_windows32\libcef_dll\Debug\libcef_dll_wrapper.lib 復制到 D:\cef_binary_3.2623.1395.g3034273_windows32\Debug 下面，把 D:\cef_binary_3.2623.1395.g3034273_windows32\libcef_dll\Release\libcef_dll_wrapper.lib 復制到 D:\cef_binary_3.2623.1395.g3034273_windows32\Release 下面，然后再次點擊 [調試(D)->開始執行(不調試)(H)]，這次不會出現找不到 libcef_dll_wrapper.lib 文件的錯誤了，但又出現了新的錯誤，如下圖：?
?
實際到這一步，程序已經編譯成功了，只是還缺少一些文件無法運行。
運行程序
把 D:\cef_binary_3.2623.1395.g3034273_windows32\Debug 里的所有文件（*.lib 文件除外）復制到 D:\CefMfcDemo\Debug 下面；
把 D:\cef_binary_3.2623.1395.g3034273_windows32\Release 里的所有文件（*.lib 文件除外）復制到 D:\CefMfcDemo\Release 下面；
把 D:\cef_binary_3.2623.1395.g3034273_windows32\Resources 里面的所有子文件夾及文件全部復制到 D:\CefMfcDemo\Debug 下面；
把 D:\cef_binary_3.2623.1395.g3034273_windows32\Resources 里面的所有子文件夾及文件全部復制到 D:\CefMfcDemo\Release 下面。?
然后再次點擊 [調試(D)->開始執行(不調試)(H)]，程序運行如下圖：?
?
至此，就實現了一個完整的使用 MFC 開發的 CEF 程序。
可是這個程序有點兒太粗糙了，對于完美主義者是無法接受的。好吧，就再多做點兒吧。
處理 WM_SIZE 消息
像添加 WM_CLOSE 消息處理函數一樣，添加 WM_SIZE 消息處理函數 OnSize()。然后在 OnSize() 函數里添加如下代碼：
? ? RECT rect;
? ? GetClientRect(&rect);
? ? if (m_simpleClient.get())
? ? {
? ? ? ? CefRefPtr<CefBrowser> browser = m_simpleClient->GetBrowser();
? ? ? ? if (browser)
? ? ? ? {
? ? ? ? ? ? CefWindowHandle hwnd = browser->GetHost()->GetWindowHandle();
? ? ? ? ? ? ::MoveWindow(hwnd, 0, 50, rect.right - rect.left, rect.bottom - 50, true);
? ? ? ? }
? ? }
1
2
3
4
5
6
7
8
9
10
11
12
添加網址輸入框
點擊菜單 [視圖(V)->其他窗口(E)->資源視圖(R)]，打開“資源視圖”窗口，依次展開“CefMfcDemo->CefMfcDemo.rc->Dialog”節點，雙擊 IDD_CEFMFCDEMO_DIALOG，打開對話框界面編輯窗口。?
在對話框頂部添加一個 Edit Control 和一個 Button，修改 Edit Control 的 ID 為 IDC_EDIT_URL，修改 Button 的 ID 為 IDC_BTN_GO，修改 Button 的 Caption 為 Go，完成后的界面如下圖：?
?
在 Go 按鈕上點擊鼠標右鍵，然后在彈出菜單上點擊“添加事件處理程序(A)…”項，打開“事件處理程序向導”窗口。?
?
不做任何改動，直接點擊 [添加編輯(A)] 按鈕，然后光標會自動定位到剛添加的 OnBnClickedBtnGo() 函數上，在函數里添加如下代碼：
? ? CString strUrl;
? ? GetDlgItem(IDC_EDIT_URL)->GetWindowText(strUrl);
? ? if (strUrl.Trim().IsEmpty())
? ? {
? ? ? ? AfxMessageBox(_T("請輸入網址"));
? ? ? ? return;
? ? }
? ? const CefString cefStrUrl(strUrl);
? ? m_simpleClient->GetBrowser()->GetMainFrame()->LoadURL(cefStrUrl);
1
2
3
4
5
6
7
8
9
好了，運行程序吧，PERFECT！?
?
參考：MFC對話框應用程序中谷歌CEF瀏覽器內核的使用?
關于MFC中如何使用CEF內核?
cefsimple 源碼
源碼下載：http://download.csdn.net/download/blackwoodcliff/9898152
---------------------?
作者：blackwood-cliff?
來源：CSDN?
原文：https://blog.csdn.net/blackwoodcliff/article/details/74276848?
版權聲明：本文為博主原創文章，轉載請附上博文鏈接！
?
?
?
?
?
?
?
?
?
?
總結
以上是生活随笔為你收集整理的CEF：MFC 对话框 Demo（VS2013）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： python3 Async/Await
- 下一篇： qss样式表笔记大全(一)：qss名词解