CEF避坑指南(一)——編譯並自制瀏覽器


CEF即Chromium Embedded Framework,Chrome瀏覽器嵌入式框架。我們可以從自制瀏覽器入手,深入學習它。它提供了接口供程序員們把Chrome放到自己的程序中。許多大型公司,如網易、騰訊都開始使用CEF進行前端開發,小如網易的Minecraft啟動器,大如微信電腦版,都可以使用前端技術進行開發。把C++或者其他編程語言於HTML相結合的CEF,能夠實現更好的效果。但一旦你決定開始學CEF,就不可避免地會掉到坑里:中文文檔參差不齊,官方文檔着重於Linux,很多時候甚至不能自己成功編譯CEF!經過2-3天的來回查閱,終於成功編譯了cefsimple示例。希望這篇文檔能幫你躲過一些坑!在文章的最后,你會得到一個屬於你自己的瀏覽器!

1.下載CEF

使用cef有兩種辦法:自己編譯源碼,或者使用編譯好內核的半成品,除非你是老練的Linux高手,否則還是建議使用后者,直接下載半成品是最快速,簡潔的辦法了。這個半成品叫做libcef。下載libcef的官方網址是http://cefbuilds.com/,這個網站已經被牆。你也可以嘗試在:http://opensource.spotify.com/cefbuilds/index.html這個映像站下載,不過可能要等上1-2天了。建議掛在遠程服務器上下載,或者開代理下載。打開網站后,在頁面最底部找到Windows 32-bit Build或Windows 64-bit Build,然后下載。

注意:如果你考慮兼容32位計算機,那可以選擇Windows 32-bit Build。但Windows 64-bit Build可以提供超過4GB的內存支持,多頁面的話能提升性能(畢竟Chrome很吃內存的)。用Visual Studio在64位計算機編譯32位程序會出現一些問題,比如CEF會導致編譯失敗。如果你打算兼容32位,那就需要找一台32位計算機來編譯了。這里使用64位版本。

2.Cmake生成解決方案

下載並解壓之后,你應該會得到這些文件:

這時你肯定會疑惑:我的sln和vcproj呢?答案是——你需要使用Cmake。Cmake是一款跨平台的編譯輔助工具,如果你在Windows,他可以生成sln和vcproj這樣兼容Visual Studio的項目,如果你在Linux,那他也可以生成make這樣兼容gcc編譯器的項目。這樣項目管理者可以一勞永逸,不用分別為Windows、Linux、Mac分別編寫項目文件。

Cmake官網也被牆了,你可以掛代理或者從下載站下載它。你需要下載最新版本,可以兼容Visual Studio 2019。打開Cmake:

在Where is the source code框中選擇下載下來的cef文件夾,接着再在cef文件夾中創建一個文件夾“build”,在Where to build binaries框中選擇這個build文件夾,依次點擊Configure——Generate生成文件,不出意料,你的程序就——出錯了!

這是由於你選錯了Visual Studio版本或者系統位數導致的,試着點擊File——Delete Chche清除配置,重來一遍。

如果你生成成功,那你會看到這兩條日志:

恭喜你,已經完成大半了!

3.使用Visual Studio編譯

打開剛才創建的build文件夾,你會找到cef.sln這個solution(解決方案)文件:

打開它,可以看到這個解決方案下有幾個項目:

點擊“本地Windows調試器”按鈕,不出意料,你的程序就——出錯了!

什么也沒有打開。不知道你留意到ALL_BUILD項目的名字是粗體字了嗎?這表示Visual Studio只會編譯和執行這一個項目。而我們希望搭建的是cefsimple項目,怎么辦呢?右鍵cefsimple項目,找到“設為啟動項目”。之后你會發現cefsimple變成了粗體,這就表明設置成功了。

點擊“本地Windows調試器”按鈕,不出意料,你的程序就——出錯了!

又來?別擔心,這應該是最后一次了,但這也是最頭疼的一次。程序成功生成並運行了,但卻提示“無法定位程序輸入點PowerDeterminePlatformRoleEx於POWRPROF.dll上”!這讓人十分抓狂。Debug?幾十萬行的Chrome怎么Debug,更何況還是半成品。作者只好先放在了一邊。過了幾天,在B站上偶然看到一篇Visual Studio的科普,提到了Debug和Release版本的區別。Debug是調試用版本,沒有進行速度優化,而Release速度更快,但沒辦法使用斷點等調試功能。試着把Debug換成Release:

在等待了幾分鍾后,編譯成功了!這次成功生成了一個名為cefsimple的窗口,但卻不顯示任何內容。我們打開cefsimple->cefsimple->simpleapp.cc,找到第89行,可以看到他默認訪問http://www.google.com/,難怪訪問不了!

更改成baidu.com,再進行編譯:

可以看到他成功訪問了baidu.com!現在,我們也是可以開發瀏覽器的人了!

Enjoy it!

喜歡的話就點個贊吧!


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM