MacOS下Qt WebAssembly环境搭建：Qt Creator添加Emscripten编译器咨询

Hey there! Let's break down two key things you're asking about: first, the complete, step-by-step setup for Qt WebAssembly on macOS, and second, how to hook up the Emscripten compiler to Qt Creator. Since you've already checked off several steps, I'll make sure this fills in any missing details and gets you fully set up.

一、完整精确的 Qt WebAssembly 搭建步骤 #

Let's start from the ground up to ensure every piece is configured correctly:

1. 安装基础依赖 #

• CMake：需要版本 3.16 或更高。你可以用 Homebrew 快速安装：

  brew install cmake
  

  或者从 CMake 官网下载 DMG 包手动安装，之后通过cmake --version确认版本正确。
• Python 2.7.10：旧版 Emscripten（适配 Qt 5.x）依赖 Python 2.7.x。如果系统默认是 Python 3，用pyenv管理版本更方便：

  # 安装 pyenv（未安装过的话）
  brew install pyenv
  # 安装 Python 2.7.10
  pyenv install 2.7.10
  # 临时切换到该版本（仅当前终端生效）
  pyenv local 2.7.10
  # 验证版本
  python --version
  

  若想永久生效，把pyenv local 2.7.10添加到~/.zshrc或~/.bash_profile中即可。

2. 搭建 Emscripten 工具链 #

• 克隆 emsdk 仓库：

  git clone https://github.com/emscripten-core/emsdk.git
  cd emsdk
  

• 安装适配 Qt 版本的 Emscripten：
  • 适配 Qt 5.15.x：推荐安装1.39.18版本

    ./emsdk install 1.39.18
    

  • 适配 Qt 6.x：安装最新稳定版（比如3.1.40）

    ./emsdk install latest
    

• 激活指定版本：

  # Qt 5.15.x 用户
  ./emsdk activate 1.39.18
  # Qt 6.x 用户
  ./emsdk activate latest
  

• 配置环境变量（临时生效）：

  source ./emsdk_env.sh
  

  要永久生效，把上述命令添加到~/.zshrc或~/.bash_profile，重启终端后用emcc --version验证。
• 测试工具链：写个简单的 C 程序hello.c：

  #include <stdio.h>
  int main() {
      printf("Hello WebAssembly!\n");
      return 0;
  }
  

  编译并运行：

  emcc hello.c -o hello.html
  # 用浏览器打开验证输出
  open hello.html
  

3. 下载并编译 Qt for WebAssembly #

• 下载 Qt 源码（按需选择版本）：

  # Qt 5.15.x
  git clone git://code.qt.io/qt/qtbase.git -b 5.15
  # Qt 6.x（以6.6为例）
  git clone git://code.qt.io/qt/qtbase.git -b 6.6
  

• 创建编译目录（推荐 out-of-source 编译）：

  mkdir qtbase-build && cd qtbase-build
  

• 运行 configure 命令：

  # Qt 5.15.x 用户，-prefix 指定安装路径可自定义
  ../qtbase/configure -xplatform wasm-emscripten -nomake examples -nomake tests -prefix ~/Qt/5.15/wasm
  # Qt 6.x 用户
  ../qtbase/configure -platform wasm-emscripten -nomake examples -nomake tests -prefix ~/Qt/6.6/wasm
  

• 编译（利用多核加速，自动匹配 CPU 核心数）：

  make -j$(sysctl -n hw.ncpu)
  

• 安装（可选，若指定了-prefix则执行）：

  make install
  

二、将 Emscripten 编译器添加到 Qt Creator #

Now let's get Qt Creator set up to use your Emscripten toolchain:

1. 打开 Qt Creator，点击顶部菜单栏的Qt Creator -> Preferences（或用快捷键Cmd+,）。
2. 在弹出窗口中选择Kits选项卡，切换到Compilers子选项卡。
3. 添加 C 编译器：
   • 点击左下角Add按钮，选择GCC -> C。
   • Name输入Emscripten C Compiler（自定义名称，方便识别）。
   • Compiler path选择 emsdk 目录下的upstream/bin/emcc，比如~/emsdk/upstream/bin/emcc。
   • 点击Apply保存。
4. 添加 C++ 编译器：
   • 同样点击Add -> GCC -> C++。
   • Name设为Emscripten C++ Compiler。
   • Compiler path选择~/emsdk/upstream/bin/em++。
   • 点击Apply保存。
5. 创建 WebAssembly Kit：
   • 切换到Kits子选项卡，点击Add按钮。
   • Name输入WebAssembly（自定义名称）。
   • Device type选择Desktop。
   • Sysroot选择 emsdk 目录下的upstream/emscripten/system，比如~/emsdk/upstream/emscripten/system。
   • 在Compiler区域：
     • C选择刚才添加的Emscripten C Compiler。
     • C++选择Emscripten C++ Compiler。
   • 配置 Qt 版本：
     • 点击Qt version下拉框旁的Manage按钮。
     • 点击Add，选择你编译的 Qt 目录下的bin/qmake，比如~/Qt/5.15/wasm/bin/qmake。
     • 给这个 Qt 版本命名（比如Qt 5.15.x WebAssembly），点击Apply。
     • 回到 Kit 设置，Qt version选择刚才创建的版本。
   • Debugger：WebAssembly 目前不需要本地调试器，选择None即可。
   • 点击Apply和OK保存所有配置。
6. 测试配置：
   • 新建一个 Qt Widgets 项目，在Kit Selection步骤勾选你刚创建的WebAssembly Kit。
   • 编译项目，Qt Creator 会生成对应的 HTML 文件并自动打开浏览器运行——如果能正常显示界面，就说明配置成功啦！

内容的提问来源于stack exchange，提问作者Kiran Prusty