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;