Qt+WebAssembly学习笔记（一）win10+Qt5.15.2开发环境搭建

前言：

因时间限制，未进行完全测试，但笔者也搭建过多次，现直接提供教程

一、安装phthon

这个方法很多，笔者直接使用360软件管家下载安装

注：安装时，注意勾选将python加入环境变量，否则后面要手动添加

二、安装Emscripten

下载地址：https://github.com/emscripten-core/emsdk

打开后，点tags

找到1.39.8，下载zip包

将下载的压缩包解压到一个目录中，注意路径不要有中文或空格，笔者放在D:\emsdk\下

打开cmd,执行如下命令

D:\emsdk\emsdk-1.39.8\emsdk install 1.39.8

注：可能会失败，可以多次执行几次

下载完成后，执行如下命令，激活并配置环境变量

D:\emsdk\emsdk-1.39.8\emsdk activate --embedded 1.39.8

注：只在本终端有效

 注意，配置完成后，要执行以下命令验证下

 em++ --version 

三、安装git 

安装方法同样很多，笔者直接使用360软件管家安装，也可以到官网下载安装包

四、下载Qt及源码

下载在线安装器https://download.qt.io/official_releases/online_installers/

建议使用中国源的地址

Qt的具体安装过程就不说了，建议安装时，选择使用中国源，以加快安装速度

安装时注意勾选以下几项

五、配置环境变量

1.添加qt到环境变量

#添加qt到环境变量
set PATH=D:\Qt\5.15.2\mingw81_64\bin;D:\Qt\Tools\mingw810_64\bin;%PATH%
#添加sed到环境变量
set PATH=D:\Program Files\Git\usr\bin;%PATH%
#添加python到环境变量（若安装时已配置，此步可以省略）
set PATH=D:\Program Files\Python\Python38;%PATH%
#设置编译器到环境变量
D:\emsdk\emsdk-1.39.8\emsdk activate --embedded 1.39.8

注：修改环境变量方法很多，也可以在系统设置中添加，下次就不用修改了

六、编译源码

终于到了编译源码的步骤了，先备份下源码

./configure -xplatform wasm-emscripten -nomake examples -feature-thread -prefix D:/Qt/5.15.2/wasm
#注：-prefix 是安装目录，可以修改成自己的目录

make -j4
#注：请根据自己的电脑配置，修改启用多少线程

make install

若一切正常，在安装目录，就可以看到安装后的文件

七、测试程序

1.打开一个新的cmd窗口，执行如下命令

#添加qt到环境变量
#若是直接从开始菜单Qt项打开的，可以略过此步
set PATH=D:\Qt\5.15.2\mingw81_64\bin;D:\Qt\Tools\mingw810_64\bin;%PATH%

#设置编译器
D:\emsdk\emsdk-1.39.8\emsdk activate --embedded 1.39.8

执行结果如下

2.切换到项目目录，执行qmake

D:\Qt\5.15.2\wasm\bin\qmake

注意一定要使用上面安装目录的qmake 

3.执行make

D:\Qt\Tools\mingw810_64\bin\mingw32-make.exe

注意，若没有将Qt添加到环境变量中，要输入全路径；这一步执行时间可能会比较长，请耐心等待

4.执行 ，新建一个web服务

emrun --no_browser --port 8080 .

5.打开谷歌浏览器，输入

http://localhost:8080/calqlatr.html

执行结果如下

后记：

笔者解释几个大家关心的问题

1.有小伙伴会问，安装时不是有预编译的库吗？

笔者早期曾测试过，确实可以使用，但总是提示库版本不对，并且缺少很多模块。网上有说，官方使用emsdk1.39.7的缘故，笔者未测试，读者可以自行测试

2.Qt版本为5.15.2，可以更换吗？

笔者曾更换过，越是新的版本，支持的越好，目前最新版本是5.15.2，不建议更换

3.编译器版本emsdk1.39.8，可以更换吗？

笔者曾更换过较新的版本，有时编译会卡住，有时运行要异常退出，不建议更换，读者可以自行测试

4.为什么要新建一个web服务

在早期版本，可以直接在浏览器中运行，但在较新的版本中，只能新建一个web服务再浏览

下载资源

笔者使用的emsdk-1.39.8（已下载所需数据，请放在D:\emsdk目录下）

笔者编译好的qt工具链（请放入D:\Qt\5.15.2目录下）