1. QT WebEnging介紹

Qt WebEngine 模塊提供了一個(gè) Web 瀏覽器引擎，可以輕松地將萬維網(wǎng)中的內(nèi)容嵌入到?jīng)]有本機(jī) Web 引擎的平臺(tái)上的 Qt 應(yīng)用程序中。

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

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

2. QT WebEnging架構(gòu)

QT WebEngine整體架構(gòu)圖如下所示：

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

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

3. Qt Webengine環(huán)境部署配置

3.1 換源提速

執(zhí)行以下口令查看當(dāng)前操作系統(tǒng)版本發(fā)行版代號(hào)：

lsb_release -a

注意：輸出結(jié)果中的Codename字段就是當(dāng)前系統(tǒng)版本代號(hào)。

通過以下網(wǎng)站進(jìn)行換源：

 https://mirrors.tuna.tsinghua.edu.cn/help/ubuntu/
或https://mirrors.tuna.tsinghua.edu.cn/help/ubuntu-ports/
或其它站點(diǎn)

注意：系統(tǒng)版本發(fā)行版代號(hào)不要選錯(cuò)了。

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

cd /etc/apt/
vim sources.list

配置完以執(zhí)行以下命令進(jìn)行更新：

sudo apt-get update

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

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

apt-cache search webengine | grep dev

注意：開發(fā)包名字是qtwebengine5-dev。

3.3 下載安裝包

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

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

(時(shí)間可能有點(diǎn)長(zhǎng)，請(qǐng)耐心等待)

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

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

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

3.4 例程運(yùn)行及效果

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

cp examples/ -r /userdata/

輸入以下指令，進(jìn)入/userdata/examples/webengine/選擇其中一個(gè)app進(jìn)行編譯：

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

輸入以下指令，執(zhí)行該程序：

./minimal --no-sandbox

效果展示圖如下所示：

審核編輯 黃宇