荐 渣男恋爱入坟 - 渣男Qt爱上渣女浏览器 - Windows篇

QT——真正的跨平台

• Qt for WebAssembly 环境搭建

• 另外可以关注我的个人B站号
• 我是从 “腾讯课堂奇牛学院” 正式学习C++项目开发的

---

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站主页

本文地址：https://blog.csdn.net/qq_45026254/article/details/107286026