Qt Web 程序集：配置工具包答案

【问题标题】：Qt web assembly: configure kitQt Web 程序集：配置工具包
【发布时间】：2020-03-17 02:42:23
【问题描述】：

我想为我的科学程序测试 QT WebAssembly。因此，我安装了 emscripten。

$em++ --version

emcc (Emscripten gcc/clang-like replacement) 1.38.30 (commit a5082b232617c762cb65832429f896c838df2483)...

然后我使用 Qt WebInstaller 安装了 Qt。在我的安装目录中，我有一个 wasm_32 文件夹，其中包含 bin 和 qmake：

$ ~/Qt_web/5.13.2/wasm_32/bin/qmake --version

QMake version 3.1
Using Qt version 5.13.2 in /home/myName/Qt_web/5.13.2/wasm_32/lib

但是，当我启动 Qt creator 时，单击 Projects 我看到一个名为：Qt 5.13.2 WebAssembly 的工具包，但我无法选择它（它是灰色的）。当我单击管理工具包时，我看到没有为 Qt 5.13.2.WebAssembly 选择 C 和 C++ 编译器。

当我更改为 Qt Versions 时，我也会收到警告。警告说：

ABI detection failed: Make sure to use a matching compiler when building. No qmlscene installed.

这是所有可选编译器的列表：

问题：

我真的不明白emscripten 与这一切有什么关系。 emscripten 是编译器吗？如果是，它是否应该由Qt 5.13.2 WebAssembly 套件自动选择？合适的Qt WebAssembly 套件是什么样的？

如果我选择 gcc 作为我的编译器，我会收到一条错误消息：

/home/myName/Qt_web/5.13.2/wasm_32/plugins/platforms/libqwasm.a:-1: error: error adding symbols: File format not recognized

编辑：

当我打开 qt 维护工具并查看已安装的软件包时，我得到以下信息：

EDIT2： 更改为 Qt Creator 4.11.0-beta2 (4.10.83) 后，我能够关注 this 描述的部分内容。我能够选择插件，但我仍然无法更改设备类型。

也许这与我现在得到的这个错误有关：

EDIT3：

似乎我的 emscripten 编译器有一些问题。编译器是否位于：

emscripten/emsdk/clang/e1.38.30_64bit/clang++
emscripten/emsdk/clang/e1.38.30_64bit/clang

我注意到的一件事是，如果我在 QtCreator >> Kits >> Compilers 中使用 add 并选择 Add >> WebAssembly >> C 它会在 Manual >> C++ >> Emscripten Compiler 而不是 Manual >> C >> Emscripten Compiler 中生成一个新条目。这是一个问题吗？

编辑

这是我的编译器页面的样子：

【问题讨论】：

是的，emscripten 是一个工具链（包括编译器），它需要在 QtCreator 中设置为编译器才能创建可用的 WA 工具包。如果您还没有，请参阅doc-snapshots.qt.io/qtcreator-master/…。
谢谢，这看起来很有希望。但是，我无法选择Help > About Plugins > Device Support > WebAssembly
最近在 Qt 兴趣列表上注意到了这个线程......显然建议使用最新的 QtCreator 预览版，但不清楚这是否仅适用于 Mac。 lists.qt-project.org/pipermail/interest/2019-November/…
好的，使用最新的 Qt Creator 预览版有点帮助。我现在可以选择插件，但我仍然无法更改套件中的设备类型。我将在问题中添加屏幕截图
我在 Windows 10 上使用 QtCreator-5.15 时遇到了完全相同的问题。由于我是一名 Linux 人员，因此我对 Windows 的了解有些有限，但我已经了解了你所了解的情况。对这个问题有什么新见解吗？ QtCreator 的安装应该更加不言自明，并包含您需要的所有工具。

标签： c++ qt build emscripten webassembly

【解决方案1】：

您需要将 .emscripten 文件从 emsdk 目录复制到您的主目录 (/home/myUsername)。
您需要手动修复文件中的路径（参见下面的示例）。

请注意 .emscripten 文件，至少在我使用的版本 (1.39.8) 中，是一个 python 脚本（可能是一个错误？）

编辑前的示例文件：

import os
emsdk_path = os.path.dirname(os.environ.get('EM_CONFIG')).replace('\\', '/')
NODE_JS = emsdk_path + '/node/12.18.1_64bit/bin/node'
LLVM_ROOT = emsdk_path + '/upstream/bin'
BINARYEN_ROOT = emsdk_path + '/upstream'
EMSCRIPTEN_ROOT = emsdk_path + '/upstream/emscripten'
TEMP_DIR = emsdk_path + '/tmp'
COMPILER_ENGINE = NODE_JS
JS_ENGINES = [NODE_JS]

编辑后：

import os
emsdk_path = os.path.dirname(os.environ.get('EM_CONFIG')).replace('\\', '/')
NODE_JS = '/home/myUsername/node/12.18.1_64bit/bin/node'
LLVM_ROOT = '/home/myUsername/upstream/bin'
BINARYEN_ROOT = '/home/myUsername/upstream'
EMSCRIPTEN_ROOT = '/home/myUsername/upstream/emscripten'
TEMP_DIR = '/home/myUsername/tmp'
COMPILER_ENGINE = NODE_JS
JS_ENGINES = [NODE_JS]

当上述步骤完成后，qt creator 能够检测到 Emscripten 编译器并且没有错误。

【讨论】：

在找到这个答案之前，我已经找到了这个答案。如果您检测编译器，您会看到愚蠢的路径，上面写着 emsdk_path + ... -- 这是一个很大的提示。

【解决方案2】：

您是否尝试在套件选项卡中使用此值设置您的编译器？

编译器： C 编译器 x86 64 e1.38.27_bit C++ 编译器 x86 64 e1.38.27_bit

Qt 版本：使用 webassembly 构建的 qmake 的路径，例如 webassembly 二进制文件或您的自定义二进制文件。

Qt mkspec： wasm-emscripten

希望这些信息对您有所帮助，如果您遇到任何其他问题，请告诉我。

【讨论】：