Qt 配置 WebAssembly 环境

应用 -> 确定。

2. 查看构建套件

编辑 -> 设置 -> 构建套件 (Kit)

若显示相同则配置成功。

四、测试 Demo

示例项目 SplitterDemo，具体代码与平常创建 Qt Widgets 项目一致。构建套件选择 WebAssembly 6.8.3 multithread 即可。

编译并等待结束。

五、部署

1. 部署 Nginx 环境

需要 Nginx 环境，因为 Nginx 部署配置 WebAssembly 是最简单的。其他方法可能涉及 JS 配置。

建议 Nginx 版本不低于 1.26.3，太低的版本 mime.types 文件里可能没有对 application/wasm 的支持。Windows 和 Linux 均可，所有特性跨平台。

2. 部署 WebAssembly 程序

编译完成后在编译目录生成几个文件，这些文件是对 .wasm 的包装，无需手动编写 .js 文件。

将这些文件全部复制到一个 Nginx 能访问的目录下，在 nginx.conf 或其他配置方式中配置网页访问。示例如下：

server {
    listen 8080;
    server_name localhost;
    # access_log /var/log/nginx/host.access.log main;
    location /Webassemble {
        add_header Cross-Origin-Embedder-Policy "require-corp" always;
        add_header Cross-Origin-Opener-Policy "same-origin" always;
        alias /var/www/Webassemble/;
        try_files $uri $uri/ /SpliterDemo.html;
    }
    # error_page 404 /404.html;
    # redirect server error pages to the static page /50x.html
    # error_page 500 502 503 504 /50x.html;
    location = /50x.html {
        root /usr/share/nginx/html;
    }
    # proxy the PHP scripts to Apache listening on 127.0.0.1:80
    # location ~ \.php$ {
    #     proxy_pass http://127.0.0.1;
    # }
    # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
    # location ~ \.php$ {
    #     root html;
    #     fastcgi_pass 127.0.0.1:9000;
    #     fastcgi_index index.php;
    #     fastcgi_param SCRIPT_FILENAME /scripts$fastcgi_script_name;
    #     include fastcgi_params;
    # }
    # deny access to .htaccess files, if Apache's document root
    # concurs with nginx's one
    # location ~ \.ht {
    #     deny all;
    # }
}

完成后重启 Nginx。Windows 需重启 Nginx 进程，Linux 执行 sudo nginx -s reload 即可。

在 Chrome 浏览器中访问：

http://127.0.0.1:8080/Webassemble/SpliterDemo.html

编译结果与 Creator 中类似，仅缺少标题栏。性能表现良好。

注意：以下两句配置必须加上，否则浏览器会报无法申请 SharedArrayBuffer 的错误（与浏览器安全策略有关）：

add_header Cross-Origin-Embedder-Policy "require-corp" always;
add_header Cross-Origin-Opener-Policy "same-origin" always;

参考：SharedArrayBuffer

总结

1. 环境配置对初学者有一定挑战性，按步骤操作即可。
2. 适用场景相对特定，多数情况下可能遇不到，可作为备选方案。WebAssembly 主要用于完成耗时计算（如数学矩阵、快速傅里叶变换等），而非开发复杂 GUI。虽然目前未发现不支持的功能，但建议进一步测试。

若项目主体为 JS 开发，但存在复杂计算模块且 JS 无法满足性能需求，或对网络延迟容忍度低，不适合通过服务器中间计算返回，此时 WebAssembly 可发挥作用。