Doc: Update info about the WebAssembly plugin

The installer now automatically creates build and
run kits.

Change-Id: I75093fb0d06efdb20b4987b456c2a451ce0dce8a
Reviewed-by: Kai Koehne <kai.koehne@qt.io>
Reviewed-by: hjk <hjk@qt.io>
Reviewed-by: Leena Miettinen <riitta-leena.miettinen@qt.io>
This commit is contained in:
Leena Miettinen
2020-04-02 14:23:14 +02:00
parent f8ec649c99
commit 86b16b6b7d

View File

@@ -44,8 +44,7 @@
You can change the web browser in the project run settings. 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 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, install Qt for WebAssembly and the tool chain for compiling to WebAssembly.
as well as add a build and run kit in \QC.
\section1 Requirements \section1 Requirements
@@ -66,10 +65,15 @@
\section1 Setting Up the Development Environment \section1 Setting Up the Development Environment
To configure \QC for building Qt apps for the web and running them in a You need to install and configure Qt for WebAssembly and the tool chain for
web browser: compiling to WebAssembly. The installer automatically adds a build and run
kit to \QC.
\list 1 \section2 Setting Up Qt for WebAssembly
To set up Qt for WebAssembly:
\list 1
\li Use the Qt maintenance tool to install Qt for WebAssembly and, on \li Use the Qt maintenance tool to install Qt for WebAssembly and, on
Windows, \MinGW (found in \uicontrol {Developer and Designer Tools}). Windows, \MinGW (found in \uicontrol {Developer and Designer Tools}).
\li Check out \c emsdk and install and activate \c emscripten, as \li Check out \c emsdk and install and activate \c emscripten, as
@@ -81,30 +85,62 @@
\li On Windows, you have to download and install \c sed, as instructed \li On Windows, you have to download and install \c sed, as instructed
in \l{http://gnuwin32.sourceforge.net/packages/sed.htm} in \l{http://gnuwin32.sourceforge.net/packages/sed.htm}
{sed for Windows}. {sed for Windows}.
\endlist
\section2 Enabling the WebAssembly Plugin
To enable the plugin:
\list 1
\li In \QC, select \uicontrol Help > \uicontrol {About Plugins} > \li In \QC, select \uicontrol Help > \uicontrol {About Plugins} >
\uicontrol {Device Support} > \uicontrol {WebAssembly} to enable \uicontrol {Device Support} > \uicontrol {WebAssembly}.
the plugin.
\li Select \uicontrol {Restart Now} to restart \QC and load the plugin. \li Select \uicontrol {Restart Now} to restart \QC and load the plugin.
\li Select \uicontrol Tools > \uicontrol Options > \uicontrol Kits > \endlist
\uicontrol {Qt Versions} > \uicontrol Add to add Qt for WebAssembly
(wasm_32). \section2 Specifying WebAssembly Settings
\li Select \uicontrol Tools > \uicontrol Options > \uicontrol Kits >
\uicontrol Add to add a kit for building applications for the web: To configure \QC for building Qt apps for the web:
\list 1
\li Select \uicontrol Tools > \uicontrol Options > \uicontrol Kits.
\image qtcreator-kit-webassembly.png "Qt for WebAssembly kit" \image qtcreator-kit-webassembly.png "Qt for WebAssembly kit"
\list 1 \li In the \uicontrol Compiler group, \uicontrol {Emscripten Compiler}
\li In the \uicontrol Name field, specify a name for the kit. should have been automatically detected for both C++ and C. If not,
\li In the \uicontrol {Device type} field, select check that emscripten is set up correctly and your home directory
\uicontrol {WebAssembly Runtime}. contains an \c{.emscripten} file.
The value of the \uicontrol Device field is automatically \li Select \uicontrol Change next to the \uicontrol Environment
set to \uicontrol {Web Browser}. field to append the locations where you installed \MinGW and
\li In the \uicontrol Compiler field, select \c sed to the PATH variable. For example, on Windows:
\uicontrol {Emscripten Compiler} for both C and C++. \c {PATH=C:\Qt\Tools\mingw730_64\bin;C:\Program Files (x86)\GnuWin32\bin;${PATH}}
\li Select \uicontrol Change next to the \uicontrol Environment \li Select \uicontrol Apply to save the changes to the kit.
field to append the locations where you installed \MinGW and \endlist
\c sed to the PATH variable. For example, on Windows:
\c {PATH=C:\Qt\Tools\mingw730_64\bin;C:\Program Files (x86)\GnuWin32\bin;${PATH}} \section2 Adding WebAssembly Kits
\li Select \uicontrol Apply to add the kit.
\endlist The Qt for Web Assembly installation automatically adds build and run kits
to \QC. To add kits:
\list 1
\li Select \uicontrol Tools > \uicontrol Options > \uicontrol Kits >
\uicontrol Add.
\li In the \uicontrol Name field, specify a name for the kit.
\li In the \uicontrol {Device type} field, select
\uicontrol {WebAssembly Runtime}.
The value of the \uicontrol Device field is automatically
set to \uicontrol {Web Browser}.
\li In the \uicontrol Compiler field, select
\uicontrol {Emscripten Compiler} for both C and C++.
\li Select \uicontrol Change next to the \uicontrol Environment
field to append the locations where you installed \MinGW and
\c sed to the PATH variable.
\li Select \uicontrol Apply to add the kit.
\endlist
\section1 Running Applications in a Web Browser
To run a project:
\list 1
\li Open a project for an application you want to run in a web browser. \li Open a project for an application you want to run in a web browser.
\li Select \uicontrol Projects > \uicontrol {Build & Run}, and then \li Select \uicontrol Projects > \uicontrol {Build & Run}, and then
select the WebAssembly kit as the build and run kit for the project. select the WebAssembly kit as the build and run kit for the project.