Qt WebAssembly：配置工具包

Question

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

$em++ --version

返回

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

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

$ ~/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并点击项目时，我看到了一个名为：Qt 5.13.2 WebAssembly的Kit，但我无法选择它（它被灰色覆盖了）。当我点击管理Kits时，发现没有选择C和C++编译器来配合Qt 5.13.2.WebAssembly。

当我切换到Qt版本时也会收到警告：

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

以下是所有可选编译器列表： 问题：

我不真正理解emscripten与所有这些有什么关系。emscripten是编译器吗？如果是，Qt 5.13.2 WebAssembly kit是否应该被自动选择？一个合适的Qt WebAssembly kit是什么样子？

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

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

编辑：

当我打开 Qt 维护工具并查看已安装的软件包时，我会看到以下内容：

第二次编辑： 在切换到 Qt Creator 4.11.0-beta2 (4.10.83) 后，我能够按照此描述的部分进行操作。我能够选择插件，但我仍然无法更改设备类型。

也许与我现在遇到的错误有关：

第三次编辑：

似乎我的 Emscripten 编译器存在一些问题。 编译器是否位于以下位置：

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

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

编辑

我的编译器页面如下：

- user7431005

---

是的，emscripten是一个工具链（包括编译器），需要在QtCreator中设置为编译器，以创建可用的WA kit。如果您还没有设置，请参阅https://doc-snapshots.qt.io/qtcreator-master/creator-setup-webassembly.html。 - Maxim Paperno

最近在Qt兴趣列表上注意到了这个帖子... 显然最新的QtCreator预览版是推荐使用的，但不清楚这是否仅适用于Mac。https://lists.qt-project.org/pipermail/interest/2019-November/034154.html - Maxim Paperno

你在WA Kit配置中选择了新添加的编译器吗？我认为你应该关闭其他问题并将信息集中在这里（但只是我的个人意见）。 - Maxim Paperno

我在Windows 10上使用QtCreator-5.15时遇到了完全相同的问题。由于我是一个Linux用户，我的Windows知识有些有限，但我已经做到了你所做的程度。对于这个问题有任何新的见解吗？QtCreator的安装应该更加自说明，并包含您需要的所有工具。 - hochl

这是我的解决方案，Python 没有正确设置。 - Jan Win

Answer 1

1. 你需要将.emscripten文件从emsdk目录复制到你的主目录(/home/myUsername)。

2. 你需要手动修复文件中的路径（参见下面示例）。

注意，至少在我使用的版本（1.39.8）中，.emscripten文件是一个Python脚本（可能是个bug？）

编辑前示例文件：

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]

after edit:

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编译器。

- vaggelanos

---

在找到这个答案之前，我已经得出了这个答案。如果你检测编译器，你会看到一些愚蠢的路径，比如emsdk_path + ...——这是一个很大的提示。 - Joseph Larson

Answer 2

你尝试在“kits”选项卡中使用以下值设置编译器了吗？

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

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

Qt mkspec： wasm-emscripten

希望这些信息能够帮到你，如果你遇到其他问题，请告诉我。

- Esly Lescano