前言

《Qt與Web混合開發(fā)》系列文章，主要討論Qt與Web混合開發(fā)相關(guān)技術(shù)。

這類技術(shù)存在適用場景，例如：Qt項目使用Web大量現(xiàn)成的組件/方案做功能擴(kuò)展，

Qt項目中性能無關(guān)/頻繁更新迭代的頁面用html單獨實現(xiàn)，Qt項目提供Web形式的SDK給

用戶做二次開發(fā)等等，或者是Web開發(fā)人員齊全而Qt/C++人手不足，此類非技術(shù)問題，

都可以使用Qt + Web混合開發(fā)。

(不適用的請忽略本文)

簡介

第一篇文章，會先整體介紹一下Qt的各種Web方案,再提供簡單的Demo，并做一些簡要的說明。

Qt的Web方案

Qt提供的Web方案主要包括 WebEngine/WebView、Quick WebGL Stream、QtWebAssembly三種。

Quick WebGL Stream

可以參考Qt官方的WebGL Stream介紹文檔

https://resources.qt.io/cn/qt-quick-webgl-release-512resources.qt.io

WebGL Stream在5.12中正式發(fā)布，其本質(zhì)是一種通信技術(shù)，將已有的QtQuick程序中渲染指令和數(shù)據(jù)，通過socket傳輸給Web端，由WebGL實現(xiàn)界面渲染。

其使用方式非常的簡單，無需修改源碼，應(yīng)用程序啟動時，帶上端口參數(shù)，例如：

./your-qt-application -platform webgl:port=8998

(相當(dāng)于應(yīng)用程序變成了一個服務(wù)器端程序)

這樣程序就在后端運行，看不到界面了，之后瀏覽器打開本地網(wǎng)址 localhost:8998 或者內(nèi)網(wǎng)地址/映射后的公網(wǎng)地址，就能在瀏覽器中看到程序頁面。

WebGL Stream的應(yīng)用不多，Qt官方給的案例是：歐洲某工廠的大量傳感器監(jiān)測設(shè)備，都以WebGL Stream的方式運行Qt 程序，本身都不帶顯卡和顯示器，而在控制中心的顯卡/顯示器上，通過Web打開網(wǎng)頁的方式，查看每個設(shè)備的運行狀況。因此節(jié)約了大量顯卡/顯示器的成本。類比于網(wǎng)吧的無硬盤系統(tǒng)。

2. WebAssembly

Qt WebAssembly技術(shù)，在5.13中正式發(fā)布。本質(zhì)是把Qt程序編譯成瀏覽器支持的二進(jìn)制文件，由瀏覽器加載運行。

一方面可以將現(xiàn)有的Qt程序編譯成Web，另一方面可以用Qt/C++來彌補Web程序的性能短板。

Qt WebAssembly在使用細(xì)節(jié)上還有一些坑的地方，需要踩一踩。后續(xù)我再寫文章吧。

3. WebEngine/WebView

Qt提供了WebEngine模塊以支持Web功能。

Qt WebEngine基于google的開源瀏覽器chromium實現(xiàn)，類似的項目還有cef、miniblink等等。

QtWebEngine可以看作是一個完整的chromium瀏覽器。

(WebView是同類的方案，稍微有些區(qū)別。后文再說。)

QtWebEngine的更新情況

瀏覽器技術(shù)十分的龐大，這里先不深入展開，先來關(guān)注一下Qt WebEngine對chromium的跟進(jìn)情況。

數(shù)據(jù)來源于Qt wiki，Qt每個版本的change log

可以看到Qt在WebEngine模塊，一直持續(xù)跟進(jìn)Chromium的更新。

當(dāng)前(2020/3/4)最新的chromium版本是80。

WebEngine的架構(gòu)

QtWebEngine提供了C++和Qml的接口，可以在Widget/Qml中渲染HTML、XHTML、SVG，也支持CSS樣式表和JavaScript腳本。

QtWebEngine的架構(gòu)圖如下

基于Chromium封裝了一個WebEngineCore模塊，在此之上，

WebEngine Widgets模塊專門用于Widget項目，

WebEngine 模塊用于Qml項目，

WebEngineProcess則是一個單獨的進(jìn)程，用來渲染頁面、運行js腳本。

Web在單獨的進(jìn)程里，我們開發(fā)的時候知道這一點就好了，不需要額外關(guān)注，

只要在發(fā)布的時候，帶上QTDIR目錄下的可執(zhí)行程序QtWebEngineProcess即可。

(這里提一下底層實現(xiàn)原理，使用了進(jìn)程間共享OpenGL上下文的方式,

實現(xiàn)多個進(jìn)程的UI混合在一起)

WebEngine的平臺要求

(以Qt5.12為參考)

首先一條是：不支持靜態(tài)編譯 (因為依賴的chromium、chromium本身的依賴庫 不能靜態(tài)編譯)

接下來再看看各平臺的要求和限制：

Windows

編譯器要 Visual Studio 2017 version 15.8 以上

系統(tǒng)環(huán)境要 Windows 10 SDK

默認(rèn)只支持X64版本，如果要x86版本，要自己編譯qt源碼。

MacOS

• MacOS 10.12以上

• XCode 8.3.3以上

• MacOS 10.12以上 SDK

不支持32-bit

不兼容 Mac App Store (chromium使用了私有api，App Sandbox和chromium Sandbox優(yōu)先級問題)

Linux

編譯器要 clang， 或者 gcc 5以上

需要pkg-config來探測依賴庫，dbus-1和 fontconfig是必須的。

如果配置了xcb，還要額外配置相關(guān)庫。

WebView

Qt還提供了一個WebView組件，可以用來將Web內(nèi)容嵌入到Qml程序中。(這個沒有提供Widget的接口)

WebView組件的實現(xiàn)，使用了平臺原生api，在移動端意義重大，特別是在ios平臺，使用原生的web view，這樣就能兼容App Store了。

在Windows/MacOS/Linux平臺，則是渲染部分還是使用了WebEngine。

WebView的使用可以參考官方例子Minibrowser

WebEngine的使用

WebEngine Widget最簡Demo

源代碼

這里示例一個最簡單的demo, 使用WebEngine Widget模塊提供的QWebEngineView：

//Demo.proQT += core gui webenginewidgets

CONFIG += c++11

SOURCES += \
main.cpp

注意pro文件中包含的Qt模塊

//main.cpp
#include
#include
int main(int argc, char **argv)
{
QApplication app(argc, argv);
QWebEngineView view;
view.load(QUrl("https://www.zhihu.com/"));
view.show();
return app.exec();
}

運行結(jié)果

上面代碼以打開知乎首頁為例，運行結(jié)果如下

最小發(fā)布包

濤哥嘗試了在Windows平臺，做出可用的最小發(fā)布包:

尺寸在160M左右。這些依賴項中，除了常見的Qt必備項platforms、Qt5Core、Qt5Gui等，

Qt5WebEngineCore是最大的一個，有70M。QtWebEngineProcess.exe是新增加的一個exe程序，

前文說架構(gòu)圖時提到的單獨進(jìn)程就是這個程序?qū)崿F(xiàn)。

resources/icudtl.dat在其它瀏覽器引擎中也常看到。

translations/qtwebengine_locales是WebEngine的翻譯項，不帶可能會發(fā)生翻譯問題。

Qt5Positioning、Qt5PrintSupport一般不怎么用，但是不帶這兩個程序起不來。

同時發(fā)現(xiàn)Qml和Quick模塊也是必須的，Qt5QuickWidgets也用上了。

濤哥查看源碼后發(fā)現(xiàn)WebEngineCore模塊依賴Quick和Qml模塊。

WebEngine Qml最簡Demo

再做一個純Qml的Demo

源碼

pro中增加webengine模塊即可

//WebQml.pro
QT += core gui quick qml webengine

CONFIG += c++11

SOURCES += \
main.cpp

RESOURCES += \
Qrc.qrc

注意初始化。

//main.cpp
#include
#include
#include
int main(int argc, char *argv[])
{
QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
QGuiApplication a(argc, argv);
//初始化。時機在QApp之后，Window/View構(gòu)造之前。
QtWebEngine::initialize();
QQuickView view;
view.setSource(QUrl("qrc:/main.qml"));
view.show();
return a.exec();
}

qml導(dǎo)入模塊，填入url

//main.qml
import QtQuick 2.0
import QtWebEngine 1.8
Item {
width: 800
height: 600
WebEngineView {
anchors.fill: parent
url: "https://www.zhihu.com"
}
}

運行結(jié)果

運行結(jié)果和上一個Demo一樣

最小發(fā)布包

這回可以去掉Widget模塊

同時也去掉不必要的翻譯文件。

多了一些Quick的模塊文件。

包大小160M左右，和前面的差別不大。

總結(jié)

以上是生活随笔為你收集整理的linux里qt画直线_Qt与Web混合开发(一)简单使用的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。