体验Qt for WebAssembly（一）

Qt号称“One framework. One codebase. Any platform”，一份代码，全平台运行，通过WebAssembly，Qt程序也能在浏览器上运行

什么是 WebAssembly？

WebAssembly（缩写为 wasm）是一种使用非 JavaScript 代码，并使其在浏览器中运行的方法。这些代码可以是 C、C++ 或 Rust 等。它们会被编译进你的浏览器，在你的 CPU 上以接近原生的速度运行。WebAssembly就是用来解决JavaScript 当前存在的一些效率等问题，WebAssembly不能替代 Javascript，相反，这两种技术是相辅相成的。通过 JavaScript API，你可以将 WebAssembly模块加载到你的页面中。也就是说，你可以通过 WebAssembly来充分利用编译代码的性能，同时保持 JavaScript 的灵活性

Qt for WebAssembly

Qt5.12后支持Qt for WebAssembly，具体是哪个小版本开始支持的没有去关注

我们以Windows下Qt5.15.2来尝鲜体验，这种体验使用新版的就是了，新版支持的特性会比较多，稳定不需要考虑

官方文档说明https://doc.qt.io/qt-5/wasm.html

安装Qt5.15.2

1.首先安装Qt5.15.2，使用在线安装工具进行安装，在线安装工具下载地址https://download.qt.io/archive/online_installers/

安装的时候记得选择WebAssembly模块

具体安装步骤就不罗列出来了，一步一步跟着提示安装就完事了

如果装过Qt5.15了，可以使用MaintenanceTool.exe工具安装WebAssembly模块

2.安装完成后，运行Qt Creator，打开编译套件，选择Qt 5.15.2 WebAssembly，看到编译器的位置是空，装完还不能直接用

配置编译器

1.下载WebAssembly源码，地址为https://github.com/emscripten-core/emsdk，可以使用git clone，没有装git的话，选择下载压缩包也可以，一样的效果

2.这里以下载压缩包为例，解压后进入解压目录，打开命令行工具，执行下面的命令安装，按官方文档说明Qt5.15安装1.39.8版本，不过在使用的时候又提示警告需要1.39.7，这有点坑，不过自己使用1.39.8也是可以用的，看着办吧1.39.7和1.39.8都可以

emsdk install 1.39.8
emsdk activate --embedded 1.39.8

安装并激活完成后，通过以下命令查看是否安装完成

em++ --version

到这里emscripten编译器就安装完成

3.接下来是最关键的一步，其他文章会介绍拷贝.emscripten到当前用户目录下，我这边试了Qt Creator还是不能识别到emscripten的编译器

采用手动添加的方式也不行

因为emscripten编译器类似安卓的编译环境一样，需要jdk、ndk等一系列配置，通过.emscripten的配置文件可以看到，emscripten需要python、java、node.js等

还好Qt Creator下的提示让我悟了

emscripten sdk配置在Options>Devices>WebAssembly下面！！！跟安卓配置一样！！！

进入配置页面，选择上一步我们安装好的emscripten sdk的目录，点击应用，这回Qt Creator就能够识别到emscripten的编译器了！！！

4.进入编译套件Kit设置页面查看Qt 5.15.2 WebAssembly套件，编译器已经自动识别到

现在我们可以愉快的使用了

编译运行Qt程序

1.打开Qt实例的页面，我们选择一个例子进行尝试编译运行

2.选择这个日历的例子，选择WebAssembly对应的编译套件，选择Release模式编译，使用Debug编译不通过，不同是啥问题

3.编译>运行，WebAssembly采用静态编译的方式，编译实属有点久

运行效果如下图

ie不支持WebAssembly，使用ie运行不了，使用主流浏览器谷歌、火狐、Edge等这些没问题

整个配置编译运行就结束啦！

结语

Qt还是有点东西的，Qt程序能在浏览器上跑起来。不过还是有很多坑的，比如中文无法显示、很多模块还不支持（如多线程）等问题，玩玩可以，用于生产环境估计够呛。后续接着介绍Qt for WebAssembly打包部署及填坑中文不显示等问题。