1. QT WebEnging介紹

Qt WebEngine 模塊提供了一個 Web 瀏覽器引擎，可以輕松地將萬維網中的內容嵌入到沒有本機 Web 引擎的平臺上的 Qt 應用程序中。

Qt WebEngine 提供了C++類和 QML類型(是一種用于描述用戶界面的腳本編程語言)，用于渲染 HTML、XHTML 和 SVG 文檔，使用級聯樣式表(CSS)進行樣式設置，并使用 JavaScript 編寫腳本。

從QT 5.6版本開始，QT已經正式從webkit組件切換到webengine 組件，新的webengine組件是基于chromium內核引擎，更穩定且更好的支持新的如HTML5(構建和呈現Web內容的一種語言描述方式)等特性，同時具備更好的跨平臺性。本文基于嵌入式Linux平臺演示部署Qt提供的webengine 示例應用。

2. QT WebEnging架構

QT WebEngine整體架構圖如下所示：

Qt WebEngine中的功能分為以下模塊：

1.Qt WebEngineWidgets模塊，用來創建C++ Widgets部件的Web程序；
2.Qt WebEngine模塊，用于創建基于Qt Quick的Web應用程序
3.Qt WebEngine core模塊，用于與Chromium交互
4.Qt WebEngine Process模塊，用于頁面渲染和JavaScript執行(從GUI流程分離到Qt WebEngine Process中)。 如果將Qt庫捆綁到應用程序中，則該庫必須隨應用程序一起提供。

3. Qt Webengine環境部署配置

3.1 換源提速

執行以下口令查看當前操作系統版本發行版代號：

lsb_release -a

注意：輸出結果中的Codename字段就是當前系統版本代號。

通過以下網站進行換源：

 https://mirrors.tuna.tsinghua.edu.cn/help/ubuntu/
或https://mirrors.tuna.tsinghua.edu.cn/help/ubuntu-ports/
或其它站點

注意：系統版本發行版代號不要選錯了。

執行以下指令切換目錄并把鏡像源替換到源文件:

cd /etc/apt/
vim sources.list

配置完以執行以下命令進行更新：

sudo apt-get update

3.2 查找webengine軟件包名，用于后面安裝

輸入以下指令查找安裝包名字：

apt-cache search webengine | grep dev

注意：開發包名字是qtwebengine5-dev。

3.3 下載安裝包

通過以下口令下載安裝包：

sudo apt-get install qtwebengine5-dev 
sudo apt-get install qtwebengine5-examples

(時間可能有點長，請耐心等待)

執行以下命令再次更新, 并啟用源碼源：

sudo apt-get update
sudo apt-get source qtwebengine5-dev

如下圖所示，里面的examples就是demo源碼了：

3.4 例程運行及效果

輸入以下指令，把examples目錄復制到/userdata再編譯：

cp examples/ -r /userdata/

輸入以下指令，進入/userdata/examples/webengine/選擇其中一個app進行編譯：

cd userdata/examples/webengine/minimal/  
qmake minimal.pro 
make

輸入以下指令，執行該程序：

./minimal --no-sandbox

效果展示圖如下所示：

審核編輯 黃宇