文章目录

  • ​​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路径。

Qt开发 之 QWidget 和 QtQuick(QML) 写网页_WebAssembly

1.2.2、配置Emsdk的编译器

打开Qt的选项配置:设备 > WebAssembly,然后“浏览”选择你电脑的emsdk路径,点击确认后,重启QtCreator

Qt开发 之 QWidget 和 QtQuick(QML) 写网页_WebAssembly_02


重启QtCreator后发现这两个,就是emsdk的编译器

Qt开发 之 QWidget 和 QtQuick(QML) 写网页_WebAssembly_03


最后我们看Kits下面的Qt5.15.2 WebAssembly 的 编译器,已经 自动选择 了编译器Compiler下的1.39.7版本的C、C++编译环境,点击确认我们环境已经装好了。

Qt开发 之 QWidget 和 QtQuick(QML) 写网页_Qt_04

2、写两个简单的QWidget和QtQuick示例

2.1、QWidget

QWidget直接用Designer搞一个很简单示例

Qt开发 之 QWidget 和 QtQuick(QML) 写网页_网页_05

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效果:

Qt开发 之 QWidget 和 QtQuick(QML) 写网页_html_06


QtQuick效果:

Qt开发 之 QWidget 和 QtQuick(QML) 写网页_QML_07

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;
}
}

Qt开发 之 QWidget 和 QtQuick(QML) 写网页_html_08


我们可以清晰的看到:

原本 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;
}
}

Qt开发 之 QWidget 和 QtQuick(QML) 写网页_网页_09

我们可以清晰的看到:
原本 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;

Qt开发 之 QWidget 和 QtQuick(QML) 写网页_网页_10


比第二种方式快了2s,但是第一次打开还是需要39s左右,后续打开会秒开。这里肯定和带宽有关,毕竟穷博主的服务器只有1m的带宽。5G时代来临,网速肯定不是阻碍,但穷是,抓紧把服务器带宽升级吧……