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.下载源代码
# githubgit 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 500502503504 /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、使用场景比较稀少，绝大多数人可能都遇不到，可以先收藏起来作为一个备选方案，我以前也是不知道浏览器还能这么玩的。
