Qt 配置Webassemble环境

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

之前一直知道有一个神奇的东西Webassemble，好几次都是由于环境配置不对导致不能正常使用，而且我也对于它的真正能力表示有兴趣。所以经过深入研究，终于在5.15.2和6.8.3两个版本上配置成功并使用。

---

一、Webassemble是什么？

WebAssembly 是一种新的编码方式，可以在现代的 Web 浏览器中运行——它是一种低级的类汇编语言，具有紧凑的二进制格式，可以接近原生的性能运行，并为诸如 C/C++、C# 和 Rust 等语言提供编译目标，以便它们可以在 Web 上运行。它也被设计为可以与 JavaScript 共存，允许两者一起工作。

对于 Web 平台而言，WebAssembly 具有巨大的意义——它提供了一条使得以多种语言编写的代码都可以接近原生的速度在 Web 中运行的途径，使得以前无法在 Web 上运行的客户端应用程序得以在 Web 上运行。

WebAssembly 被设计为可以和 JavaScript 一起协同工作——通过使用 WebAssembly 的 JavaScript API，你可以把 WebAssembly 模块加载到 JavaScript 应用中并且在两者之间共享功能。这允许你在同一个应用中利用 WebAssembly 的性能和能力以及 JavaScript 的表达力和灵活性，即使你可能并不知道如何编写 WebAssembly 代码。

通俗点说：对于运行在网页上的特殊需求的对性能有要求的场景可以尝试，比如数学矩阵计算和FFT一类的。

我之前一直对比Webassemble和调用服务器之间的差别，终于被我想通了。调用服务器需要网络传输时间损耗，而且消耗服务器的资源，如果你在一个性能不弱的电脑上跑网页的话，那么它是本地计算，就是在那台电脑上运算，而不是消耗服务器的资源。某些情况下在响应速度和体验上会有不俗的提升。

二、下载并配置emsdk

1.下载源代码

# github
git clone https://github.com/emscripten-core/emsdk.git
# gitee 建议
git clone https://gitee.com/anold/emsdk.git

2.配置环境

cd emsdk
./emsdk install latest
./emsdk activate latest

./emsdk activate latest这句需要注意，执行完之后会提示你设置一些环境变量，emsdk 需要编译工具链，java，python，node等几个环境协同工作，这几个环境都已经在emsdk 里面了。

贴一下我的环境变量：

1.用户变量

2.PATH路径

改成你自己的目录即可！

三、配置Qt环境

这里只能使用Creator，暂不支持Clion等其它IDE

注意：先配置环境变量再打开Creator，会自动读取环境变量的！

1.设置SDKS

编辑->设置->SDKs->Webassemble

应用->确定

2.查看构建套件

编辑->设置->构建套件（Kit）

和我一样说明你的环境配置好了。

四、测试Demo

这里随便写了一个SplitterDemo，具体代码就不贴出来了，和你平常创建Qt Widgets项目一样的。构建套件选择Webassemble 6.8.3 multithread即可。

编译并等待结束！

五、部署

1.部署nginx环境

这里一定需要nginx环境，因为nginx部署配置Webassemble是最简单的。别的方法不懂JS的人操作不了，用nginx的话你不需要懂JS也能成功部署！

这里建议nginx的版本不低于1.26.3以上，太低的版本mime.types文件里没有对application/wasm的支持！Windows和Linux都可以，我们今天演示的所有特性都是跨平台的！

2.部署Webassemble程序

编译完成后在编译目录生成几个文件，这些文件都是对.wasm的包装，不用我们自己写.js文件了。所以说不懂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;

幽灵漏洞

写在最后：这个东西确实给不会JS的童鞋提供了一种可能，虽然可能开发速度远不如VUE那样快，但性能肯定是快的。这个东西说白了主要是完成一些耗时计算的，比如前面说的数学矩阵和快速傅里叶变换等等，不是用来开发复杂的GUI的，虽然目前我也没有发现什么不支持的功能，可能我写的Demo页面简单的缘故，有兴趣的还需要进一步测试。

试想有这么一种可能：项目的主体是JS开发的，然后有这么一个模块需要复杂的计算，JS无论如何不能满足性能需求，而且对网络延迟的容忍度也低，不好通过服务器去中间计算返回，这个时候Webassemble就派上用场了。

---

总结

1、环境配置对于纯小白稍微有点压力，一步步来也没什么问题
2、使用场景比较稀少，绝大多数人可能都遇不到，可以先收藏起来作为一个备选方案，我以前也是不知道浏览器还能这么玩的。