Qt for WebAssembly 环境搭建

概要

首先，放两个链接：

• Qt for WebAssembly 官方文档
• Emscripten官网

这次搭建Qt for WebAssembly环境，主要流程都是参照上面两个链接。
无奈QT官方文档写得很简洁，再加上两个网站都是英语，环境搭建过程又有很多坑，花了很长时间才琢磨明白，官网页面看不懂的小白，可以完全照着我的方法做。
至于什么是WebAssembly，什么是Emscripten，我就不解释了，你只需要知道三点：

1. Emscripten安装完毕以后，相当于C++开发已经具备了编译器 g++和gcc，只不过这次安装的编译器，免费精选名字大全叫做 em++ 和 emcc ；
2. 编译器生成的可执行文件（类似于Windows下的exe文件），后缀名是wasm，也就是WebAssembly的几个字母的缩写，目前很多浏览器已经支持运行这种文件；
3. 这篇文档用的框架是QT，一套代码，能生成窗口程序、手机APP，而这次要介绍的只有WebAssembly（浏览器平台）。

1、Windows搭建环境前的准备

因为Emscripten安装时，很多代码需要使用Python执行。
所以必须安装Python，且要求系统环境变量PATH中添加了Python.exe所在的文件夹路径。
Emscripten官网要求Python2.7.12版本以上，Python3一样可以用。我直接装了python最新版：

2、开始安装em++编译器

先打开cmd控制台，进入你想安装编译器的目录。
我以进入D盘为例，路径设置大家可以自行调整。

# 进入D盘 d:  # 从Git获取emsdk保存到 D 盘 git clone https://github.com/emscripten-core/emsdk.git  # 进入emsdk文件夹 cd emsdk  ################################## # 注意：以下指令必须在emsdk文件夹下执行 ################################## # 获取emsdk的最新版（更新emsdk版本时才需要这一句） git pull  # 可以通过以下语句查看当前emsdk可用版本，以及已安装版本 emsdk list  # 下载并安装最新版的emsdk（-fastcomp表示特殊发布版本） # 如果想下载指定版本或工具包， # 可以把 latest 替换成刚刚list列表中出现的版本号，或工具包名称 emsdk install latest  # 安装成功后激活它 # 这一步，会在emsdk文件夹下创建一个  .emscripten  文件 # 文件中包含了一些环境变量设置脚本，后续为QT Creator创建配置文件的时候需要用到 emsdk activate latest  # （可选）再次查看已安装的组件 emsdk list  # 在当前窗口激活环境变量配置 emsdk_env.bat 

如果不出意外，你将会看到类似的环境变量设置信息：

以上显示了新增的环境变量配置信息，如果不执行环境变量配置，后续的em++指令会提示“找不到命令”。
可是这种配置只在当前打开的窗口有效，窗口关闭后需要重新执行emsdk_env.bat，非常不方便，后面会讲解如何把环境变量信息添加到配置文件，让Qt Creator打开时自动加载环境变量。

接下来查看em++安装情况，执行：

# 查看em++版本 em++ --version 

出现以下类似信息的话，表示你已经成功安装了编译器：

3、安装Qt for WebAssembly

这一步应该不用我介绍了，只需要打开QT安装程序，选择WebAssembly支持就可以了。

4、关于WebAssembly生成所需的环境变量设置

4.1、配置Qt Creator的编译器

现在编译器就已经可以使用了，接下来打开一个QT官方Demo，看一下没有加载环境变量时的情况。

4.2、打开一个项目，修改环境变量配置文件

然后查看环境变量：

注意看 EM_CONFIG 那一栏，那是环境变量配置文件的路径，到那个目录下用文本编辑器打开 .emscripten 文件（如果没有这个文件，就自己新建一个，不要有后缀名，文件名就是“.emscripten”），然后修改里面的文本（开头为 # 的行都是注释，有没有无所谓）：

# Note: If you put paths relative to the home directory, do not forget # os.path.expanduser # # Any config setting <KEY> in this file can be overridden by setting the # EM_<KEY> environment variable. For example, settings EM_LLVM_ROOT override # the setting in this file. # # Note: On Windows, remember to escape backslashes! I.e. LLVM='c:llvm' # is not valid, but LLVM='c:\llvm\' and LLVM='c:/llvm/' # are.  import os  # This is used by external projects in order to find emscripten.  It is not used # by emscripten itself. # EMSCRIPTEN_ROOT = os.path.expanduser(os.getenv('EMSCRIPTEN', 'D:\emsdk\upstream\emscripten')) # directory   ################################################################# # 自定义添加环境变量 emsdk_path = 'D:/emsdk'	#emsdk的目录（根据需要设置这个目录即可）  NODE_JS = emsdk_path + '/node/12.18.1_64bit/bin/node.exe' PYTHON = emsdk_path + '/python/3.7.4-pywin32_64bit/python.exe' JAVA = emsdk_path + '/java/8.152_64bit/bin/java.exe' 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]  EMSDK = emsdk_path EMSCRIPTEN_NATIVE_OPTIMIZER = emsdk_path + '/upstream/bin/optimizer.exe'  ################################################################  # LLVM_ROOT = os.path.expanduser(os.getenv('LLVM', '/usr/bin')) # directory # BINARYEN_ROOT = os.path.expanduser(os.getenv('BINARYEN', '')) # directory  # Add this if you have manually built the JS optimizer executable (in # Emscripten/tools/optimizer) and want to run it from a custom location. # Alternatively, you can set this as the environment variable # EMSCRIPTEN_NATIVE_OPTIMIZER. # EMSCRIPTEN_NATIVE_OPTIMIZER='/path/to/custom/optimizer(.exe)'  # Location of the node binary to use for running the JS parts of the compiler. # This engine must exist, or nothing can be compiled. # NODE_JS = os.path.expanduser(os.getenv('NODE', 'node')) # executable  # JAVA = 'java' # executable  ################################################################################ # # Test suite options: # # Alternative JS engines to use during testing: # # SPIDERMONKEY_ENGINE = [os.path.expanduser(os.getenv('SPIDERMONKEY', 'js'))] # executable # V8_ENGINE = os.path.expanduser(os.getenv('V8', 'd8')) # executable # # All JS engines to use when running the automatic tests. Not all the engines in # this list must exist (if they don't, they will be skipped in the test runner). # # JS_ENGINES = [NODE_JS] # add V8_ENGINE or SPIDERMONKEY_ENGINE if you have them installed too. # # WASMER = os.path.expanduser(os.path.join('~', '.wasmer', 'bin', 'wasmer')) # WASMTIME = os.path.expanduser(os.path.join('~', 'wasmtime')) # # Wasm engines to use in STANDALONE_WASM tests. # # WASM_ENGINES = [] # add WASMER or WASMTIME if you have them installed # # Other options # # FROZEN_CACHE = True # never clears the cache, and disallows building to the cache 

我的这个文件是Qt Creator生成的，原来的一些环境变量设置已经被我注释掉了，大家根据自己的情况修改一下emsdk_path即可（可以直接复制我的过去，并修改emsdk_path为你自己的emsdk文件夹目录）。
现在关闭项目重开一次，或者勾一下上面“清除环境变量”，然后再取消勾选。目的是让Qt Creator重新加载一次环境变量。
于是环境变量全都更新了：

接下来就可以开心地点一下左边的原谅色三角形了。然后就可以放心地踩坑了。

5、运行程序

5.1、坑1：IE浏览器无法查看程序执行效果

原则上，我们可以直接点击左下角的运行按钮查看效果，但是有的人可能点了这个按钮后，自动打开了IE浏览器，IE浏览器太老了，不支持WebAssembly，查看不了效果。
这种情况比较好处理，直接复制网址到Edge或其它浏览器（火狐、QQ浏览器）中查看，或者百度一下，怎样直接停用IE浏览器。

5.2、坑2：运行失败，没有win32api模块

运行时，Qt Creator下方 “应用程序输出” 栏中显示 “未找到win32api”

注意看最后一行，Qt Creator用的是我一开始安装emsdk时用的Python版本，而这个路径下的Python 没有配置win32api ，解决方法有两种：

1. 你可以直接给自己的Python添加win32api来解决这个问题，方法可以百度；
2. 去系统环境变量里修改Python路径为emsdk给你下载好的版本。

5.3、Qt Creator 运行 HTML 文件的原理

上面提到的坑解决完以后，应该就可以直接点运行按钮查看效果了。
Qt Creator其实是用Python 打开了一个小型服务器 ，可以通过点击图中的“停止按钮”关闭服务器，也可以让其它局域网内的设备访问你这台电脑的网址，其它设备访问时，需要改为IP访问，IP可以通过路由器查看。

5.4、电脑浏览器运行效果

5.5、安卓浏览器运行效果

另外可以关注我的个人B站号

“遗忘姓名的魔法师”的主页

偶尔会分享一些个人制作的小型项目代码。

我是从 “腾讯课堂奇牛学院” 正式学习C++项目开发的

一年！你知道这一年我怎么过的吗？！
来腾讯课堂的“奇牛学院”你就知道了 ！
腾讯课堂“奇牛学院”主页
“奇牛学院”B站主页

c/c++开发分享荐 渣男恋爱入坟 – 渣男Qt爱上渣女浏览器 – Windows篇地址：https://blog.csdn.net/qq_45026254/article/details/107286026