前言

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

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

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

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

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

(不適用的請(qǐng)忽略本文)

簡(jiǎn)介

第一篇文章，會(huì)先整體介紹一下Qt的各種Web方案,再提供簡(jiǎn)單的Demo，并做一些簡(jiǎn)要的說(shuō)明。

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ù)，通過(guò)socket傳輸給Web端，由WebGL實(shí)現(xiàn)界面渲染。

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

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

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

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

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

2. WebAssembly

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

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

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

3. WebEngine/WebView

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

Qt WebEngine基于google的開(kāi)源瀏覽器chromium實(shí)現(xiàn)，類(lèi)似的項(xiàng)目還有cef、miniblink等等。

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

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

QtWebEngine的更新情況

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

數(shù)據(jù)來(lái)源于Qt wiki，Qt每個(gè)版本的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封裝了一個(gè)WebEngineCore模塊，在此之上，

WebEngine Widgets模塊專(zhuān)門(mén)用于Widget項(xiàng)目，

WebEngine 模塊用于Qml項(xiàng)目，

WebEngineProcess則是一個(gè)單獨(dú)的進(jìn)程，用來(lái)渲染頁(yè)面、運(yùn)行js腳本。

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

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

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

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

WebEngine的平臺(tái)要求

(以Qt5.12為參考)

首先一條是：不支持靜態(tài)編譯 (因?yàn)橐蕾嚨腸hromium、chromium本身的依賴庫(kù) 不能靜態(tài)編譯)

接下來(lái)再看看各平臺(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)先級(jí)問(wèn)題)

Linux

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

需要pkg-config來(lái)探測(cè)依賴庫(kù)，dbus-1和 fontconfig是必須的。

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

WebView

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

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

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

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

WebEngine的使用

WebEngine Widget最簡(jiǎn)Demo

源代碼

這里示例一個(gè)最簡(jiǎn)單的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();
}

運(yùn)行結(jié)果

上面代碼以打開(kāi)知乎首頁(yè)為例，運(yùn)行結(jié)果如下

最小發(fā)布包

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

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

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

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

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

translations/qtwebengine_locales是WebEngine的翻譯項(xiàng)，不帶可能會(huì)發(fā)生翻譯問(wèn)題。

Qt5Positioning、Qt5PrintSupport一般不怎么用，但是不帶這兩個(gè)程序起不來(lái)。

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

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

WebEngine Qml最簡(jiǎn)Demo

再做一個(gè)純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);
//初始化。時(shí)機(jī)在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"
}
}

運(yùn)行結(jié)果

運(yùn)行結(jié)果和上一個(gè)Demo一樣

最小發(fā)布包

這回可以去掉Widget模塊

同時(shí)也去掉不必要的翻譯文件。

多了一些Quick的模塊文件。

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

總結(jié)

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

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