构建Web应用程序

Building Applications for the Web

构建Web应用程序

WebAssembly is a binary format that allows sand-boxed executable code in web pages. This format is nearly as fast as native machine code, and is now supported by all major web browsers.

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.

Qt for WebAssembly支持构建Qt应用程序，以便将它们集成到网页中。它不需要任何客户端安装，并减少了服务器端资源的使用。

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's run settings.

​实验性的WebAssembly插件使您能够以WebAssembly格式构建应用程序，并在本地web浏览器中部署和运行它们。可以在项目的运行设置中更改web浏览器。

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.

要为web构建应用程序并在web浏览器中运行它们，需要安装Qt for WebAssembly和用于编译到WebAssembly的工具链。

Requirements

必要条件

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

您需要以下软件为web构建Qt应用程序并在浏览器中运行它们：

• Qt for WebAssembly 5.15, or later
• Qt for WebAssembly 5.15或更高版本
• On Windows: MinGW 7.3.0, or later
• ​在Windows上：MinGW 7.3.0或更高版本
• emscripten tool chain for compiling to WebAssembly
• 用于编译到WebAssembly的emscripten工具链

Setting Up the Development Environment

建立开发环境

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以及用于编译到WebAssembly的工具链。Qt安装程序会自动向Qt Creator添加构建和运行工具包。

Setting Up Qt for WebAssembly

设置Qt for WebAssembly

To set up Qt for WebAssembly:

要设置Qt for WebAssembly，请执行以下操作：

1.Use the Qt maintenance tool to install Qt for WebAssembly and, on Windows, MinGW (found in Developer and Designer Tools).

1、使用Qt维护工具安装Qt for WebAssembly，在Windows上安装MinGW（在Developer和Designer工具中找到）。

2.Check out a known-good Emscripten version supported by the Qt for WebAssembly version that you installed, and install and activate emscripten, as instructed in Install Emscripten.

​2、检查您安装的Qt for WebAssembly版本支持的已知良好的Emscripten版本，然后按照安装Emscripten中的说明安装并激活Emscripten。

Enabling the WebAssembly Plugin

启用WebAssembly插件

To enable the plugin:

要启用插件，请执行以下操作：

1.In Qt Creator, select Help > About Plugins > Device Support > WebAssembly.

1、在Qt Creator中，选择帮助>关于插件>设备支持>WebAssembly。

2.Select Restart Now to restart Qt Creator and load the plugin.

2、选择立即重启以重启Qt Creator并加载插件。

Specifying WebAssembly Settings

指定WebAssembly设置

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

要配置Qt Creator以便为web构建Qt应用程序，请执行以下操作：

1.Select Tools > Options > Devices > WebAssembly.

1、选择工具>选项>设备>WebAssembly。

2.In the Emscripten SDK path field, enter the root directory where emsdk is installed.

2、在Emscripten SDK路径字段中，输入安装emsdk的根目录。

3.Qt Creator configures the Emscripten SDK environment for you if the emsdk is supported by the Qt for WebAssembly version that you will use for developing the application.

3、如果您将用于开发应用程序的Qt for WebAssembly版本支持emsdk，则Qt Creator将为您配置Emscripten SDK环境。

4.Select Tools > Options > Kits.

4、选择工具>选项>工具包。

5.In the Compiler group, Emscripten Compiler should have been automatically detected for both C++ and C. If not, check that emscripten is set up correctly.

5、在编译器组中，应已自动检测到C++和C的Emscripten编译器。如果未检测到，请检查是否正确设置了Emscripten。

Adding WebAssembly Kits

添加WebAssembly工具包

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

Qt for Web Assembly安装会自动向Qt Creator添加构建和运行工具包。要添加套件：

1.Select Tools > Options > Kits > Add.

1、选择工具>选项>工具包>添加。

2.In the Name field, specify a name for the kit.

2、在名称字段中，指定套件的名称。

3.In the Device type field, select WebAssembly Runtime. The value of the Device field is automatically set to Web Browser.

3、在设备类型字段中，选择WebAssembly Runtime。设备字段的值将自动设置为Web浏览器。

4.In the Compiler field, select Emscripten Compiler for both C and C++.

4、在编译器字段中，为C和C++选择Emscripten编译器。

5.Select Apply to add the kit.

5、选择Apply（应用）添加套件。

Running Applications in a Web Browser

在Web浏览器中运行应用程序

To run a project:

要运行项目，请执行以下操作：

1.Open a project for an application you want to run in a web browser.

1、打开要在web浏览器中运行的应用程序的项目。

2.Select Projects > Build & Run, and then select the WebAssembly kit as the build and run kit for the project.

2、选择“项目”>“构建和运行”，然后选择WebAssembly工具包作为项目的构建和运行工具包。

3.Select Run to specify run settings.

3、选择运行以指定运行设置。

4.In the Web browser field, select the browser to run the application in.

4、在Web浏览器字段中，选择要在其中运行应用程序的浏览器。

You can now build Qt applications in WebAssembly format and run them in a web browser as described in Building for Multiple Platforms and Running on Multiple Platforms.

​现在，您可以以WebAssembly格式构建Qt应用程序，并在web浏览器中运行它们，如“构建多平台并在多个平台上运行”中所述。