构建 Web 应用程序

WebAssembly 是允许在网页沙盒执行代码的二进制格式。这种格式几乎和本机代码一样快，且现在所有主流 Web 浏览器都支持。

Qt for WebAssembly enables building Qt applications so that they can be integrated into web pages. It doesn't require any client-side installations and reduces the use of server-side resources.

The experimental WebAssembly plugin enables you to build your applications in WebAssembly format and deploy and run them in the local web browser. You can change the web browser in the project run settings.

To build applications for the web and run them in a web browser, you need to install Qt for WebAssembly and the tool chain for compiling to WebAssembly.

要求

You need the following software to build Qt applications for the web and run them in a browser:

• Qt for WebAssembly 5.13.1，或更高版本
• 在 Windows： MinGW 7.3.0, or later
• emscripten tool chain for compiling to WebAssembly
• sed stream editor

注意： You need to add the location of the MinGW and sed installation folders to the system path, either globally or for the Qt for WebAssembly kit.

设置开发环境

You need to install and configure Qt for WebAssembly and the tool chain for compiling to WebAssembly. The Qt Installer automatically adds a build and run kit to Qt Creator.

设置 Qt for WebAssembly

To set up Qt for WebAssembly:

1. Use the Qt maintenance tool to install Qt for WebAssembly and, on Windows, MinGW (found in Developer and Designer Tools ).
2. Check out emsdk and install and activate emscripten , as instructed in Qt for WebAssembly .

   注意： 不使用 --embedded option for activating the emscripten version in the emsdk , because Qt Creator expects to find the .emscripten file describing the toolchain in your home directory.

3. On Windows, you have to download and install sed , as instructed in sed for Windows .

启用 WebAssembly 插件

To enable the plugin:

1. In Qt Creator, select Help > About Plugins > Device Support > WebAssembly .
2. 选择 Restart Now to restart Qt Creator and load the plugin.

指定 WebAssembly 设置

To configure Qt Creator for building Qt apps for the web:

1. 选择 工具 > Options > Kits .

   

2. 在 编译器 group, Emscripten Compiler should have been automatically detected for both C++ and C. If not, check that emscripten is set up correctly and your home directory contains an .emscripten 文件。
3. 选择 Change next to the Environment field to append the locations where you installed MinGW and sed to the PATH variable. For example, on Windows: PATH=C:\Qt\Tools\mingw730_64\bin;C:\Program Files (x86)\GnuWin32\bin;${PATH}
4. 选择 Apply to save the changes to the kit.

添加 WebAssembly 套件

The Qt for Web Assembly installation automatically adds build and run kits to Qt Creator. To add kits:

1. 选择 工具 > Options > Kits > Add .
2. 在 Name field, specify a name for the kit.
3. 在 Device type field, select WebAssembly Runtime . The value of the Device field is automatically set to Web Browser .
4. 在 编译器 field, select Emscripten Compiler for both C and C++.
5. 选择 Change next to the Environment field to append the locations where you installed MinGW and sed to the PATH variable.
6. 选择 Apply to add the kit.

在 Web 浏览器运行应用程序

To run a project:

1. Open a project for an application you want to run in a web browser.
2. 选择 Projects > Build & Run , and then select the WebAssembly kit as the build and run kit for the project.
3. 选择 运行 to specify run settings.
4. 在 Browser field, select the browser to run the application in.

   

You can now build Qt applications in WebAssembly format and run them in a web browser as described in 为多个平台进行构建 and 在多个平台上运行 .