Qt開發 之 QWidget 和 QtQuick（QML） 寫網頁

文章目錄

• ​​1、準備工作​​

• ​​1.1、環境配置​​
• ​​1.2、Emsdk配置​​

• ​​1.2.1、配置環境檔案​​
• ​​1.2.2、配置Emsdk的編譯器​​

• ​​2、寫兩個簡單的QWidget和QtQuick示例​​

• ​​2.1、QWidget​​
• ​​2.2、QtQuick​​

• ​​3、編譯運作（效果）​​
• ​​4、網頁在伺服器上運作（效果）​​

• ​​4.1、壓縮 —— 普遍壓縮​​
• ​​4.2、壓縮 —— 壓縮類型​​
• ​​4.3、壓縮 —— 壓縮比率​​

1、準備工作

1.1、環境配置

Qt版本： 5.15.2 （記住要選WebAssembly子產品）

EmSDK版本：1.39.7

Emsdk Github位址: ​​https://github.com/emscripten-core/emsdk.git​​​ Emsdk CSDN位址：javascript:void(0)

Qt選用5.12以後版本，因為WebAssembly子產品在5.12才開始支援，WebAssembly是我們開發網頁重要的子產品之一。Emsdk可以直接從github上下載下傳安裝，也可以直接用我配好的包。

1.2、Emsdk配置

1.2.1、配置環境檔案

下載下傳好emsdk後，打開“.emscripten”，修改成你電腦裡面的emsdk路徑。

1.2.2、配置Emsdk的編譯器

打開Qt的選項配置：裝置 > WebAssembly，然後“浏覽”選擇你電腦的emsdk路徑，點選确認後，重新開機QtCreator

重新開機QtCreator後發現這兩個，就是emsdk的編譯器

最後我們看Kits下面的Qt5.15.2 WebAssembly 的 編譯器，已經 自動選擇 了編譯器Compiler下的1.39.7版本的C、C++編譯環境，點選确認我們環境已經裝好了。

2、寫兩個簡單的QWidget和QtQuick示例

2.1、QWidget

QWidget直接用Designer搞一個很簡單示例

2.2、QtQuick

QML寫一個很簡單的示例

import QtQuick 2.15
import QtQuick.Window 2.15

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hi, Qt!")

    Rectangle{
        anchors.fill: parent
        color: "blue"
        Text {
            id: name
            anchors.centerIn: parent
            color: "white"
            font.pixelSize: 20
            text: qsTr("Hi, Qt!\n\nThis is a QtQuick application.")
        }
    }
}      

3、編譯運作（效果）

此時我們用 Qt5.15.2 WebAssembly編譯運作我們的兩個程式，就可以在預設的浏覽器上看到我們的網頁啦。

QWidget效果：

QtQuick效果：

4、網頁在伺服器上運作（效果）

把編輯好的網頁的以下檔案拷貝到我們伺服器的路徑下：

Demo_WebAssemblyForWidget.html（改名為 index.html）

Demo_WebAssemblyForWidget.js

Demo_WebAssemblyForWidget.wasm

qtloader.js

qtlogo.svg

注意：這個QWidget的wasm檔案較大（12m左右），目前的方案就是在WebServer上增加壓縮的方式，我的伺服器裡面用的是nginx，壓縮方法如下：

4.1、壓縮 —— 普遍壓縮

server {
        listen       80;
        server_name  www.shazhenyu.com;

        gzip on;
        gzip_buffers 32 4K;
        gzip_comp_level 6;
        gzip_min_length 100;
        gzip_types application/javascript text/css text/xml;
        gzip_disable "MSIE [1-6]\."; #配置禁用gzip條件，支援正則。此處表示ie6及以下不啟用gzip（因為ie低版本不支援）
        gzip_vary on;
        location / {
            root  程式路徑;
            index  index.html;
        }
        location /getInfo {
            proxy_pass   http://csdn_proxy;
        }

        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }      

我們可以清晰的看到：

原本 22k 的 qtloader.js 壓縮到了 6k

原本 292k 的 Demo_WebAssemblyForWidget.js壓縮到了 66k

但是原本 12m 的 .wasm 檔案 變成了 12.6m

這就過分了

4.2、壓縮 —— 壓縮類型

比方式一種增加了一下壓縮的類型，去除了壓縮限制條件

server {
        listen       80;
        server_name  www.shazhenyu.com;

        gzip on;
        gzip_buffers 4 16k;
        gzip_http_version 1.1;
        gzip_comp_level 3;
        gzip_types text/plain text/css text/xml application/xml application/json text/javascript application/javascript application/octet-stream;

        location / {
            root  程式路徑;
            index  index.html;
        }
        lo
        location /getInfo {
            proxy_pass   http://csdn_proxy;
        }

        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }      

我們可以清晰的看到：

原本 22k 的 qtloader.js 壓縮到了 6.6k

原本 292k 的 Demo_WebAssemblyForWidget.js壓縮到了 74.3k

但是原本 12m 的 .wasm 檔案 變成了 5.2m

比第一種方式好多了，但是對于窮部落客伺服器 1m 的帶寬來說還是需要41s。

4.3、壓縮 —— 壓縮比率

壓縮比率1-9，設定壓縮比率，最小為1，處理速度快，傳輸速度慢；9為最大壓縮比，處理速度慢，傳輸速度快; 這裡表示壓縮級别，可以是0到9中的任一個，級别越高，壓縮就越小，節省了帶寬資源，但同時也消耗CPU資源，是以一般折中為6。

gzip_comp_level 6;