Qt for WebAssembly in Windows

阿婆克烈:码字不易,希望各位在引用等时候可以标明出处,谢谢。

这位客官,你要的web界面不知是想来一发web编程?还是…
Qt for WebAssembly in Windows_第1张图片
想要web界面不一定得懂web编程的,自Qt推出5.12版本以来, Qt for WebAssembly就受到了高度的关注,通过这项技术就能让各位客官的Qt图形界面程序直接在网页上跑啦。

Qt for WebAssembly这项技术的使用需要两个主角:

  • Qt5.12源码 or newer
  • 对应版本的emscripten sdk(emsdk)

通过emsdk编译Qt源码得到Qt-Wasm版的qmake,使用这个qmake编译工程得到的 .html、.js、.wasm 文件就是各位客官需要web版Qt程序了。具体使用方法后面再说,现在就让我们来康康怎么得到这个Qt-Wasm版的qmake吧。
Qt for WebAssembly in Windows_第2张图片

  • 这里先放出两位主角的技术文档
    Qt官方文档:
    https://wiki.qt.io/Qt_for_WebAssembly
    emscripten官方文档:
    https://emscripten.org/docs/getting_started/downloads.html

  • Qt源码下载:http://download.qt.io/archive/qt/

在里面选择自己需要的版本后,找到 single/ 路径,里面的 .zip 包就是windows版本的源码包,自行下载后找个无中文路径解压就好,这个就不多说了(乜嘢啊,解压都要我讲解啊 )。

选择困难的可以和我一样的选择,我选择的是 Qt 5.13.0 的源码。


  • emsdk安装:
    先来看一下Windows下安装emsdk需要什么依赖包/程序:
    安装 Git
    安装 Python 2.7.12 or newer
    安装 CMake

关于emsdk的版本选择,在Qt的官方文档中已经给出了各版本对应的emsdk版本号,这里也给出一份(不持续更新):

  • Qt 5.12: 1.38.16
  • Qt 5.13: 1.38.27 (multithreading: 1.38.30)
  • Qt 5.14: 1.38.27 (multithreading: 1.38.30)

需要的东西都准备好了,下面就开始安装emscripten吧。
Qt for WebAssembly in Windows_第3张图片

  1. 准备一个无中文的路径,比如D:\emsdk,以管理员模式打开cmd,进入到刚刚准备好的目录下。
//cmd下如何跳转到指定路径?
***> cd D:\emsdk
***> d:
  1. 从Github上获取emsdk源码
***> git clone https://github.com/emscripten-core/emsdk.git
  1. 下载成功后进入目录
***> cd emsdk
  1. 获取最新版本的emsdk
***> git pull
  1. 获取emsdk列表,并写入到文本中
***> emsdk list --old > sdklist.txt
  1. 下载、安装SDK tools
//安装命令:emsdk install 版本号
//版本号从5中得到的列表获取,也可以看Qt官方文档的实例,想获取最新版本则填写 latest 即可
//这里给出我的做法
***> emsdk install sdk-fastcomp-1.38.27-64bit
  1. 把emsdk tool写入环境变量
//更新环境变量命令:emsdk activate 版本号 --global
//版本号 填写 6中选择的版本号
//这里给出我的做法
***> emsdk activate sdk-fastcomp-1.38.27-64bit --global
  1. 激活环境变量
***> emsdk_env.bat

到目前为止,emscripten的安装步骤就跑完了,下面就是验证过程

//在别的路径打开cmd,比如安装在D:\emsdk\emsdk,那我就在桌面打开cmd
C:\Users\Administrator> em++ -v   //或者 emcc -v

如果cmd上成功打印出emscripten的版本信息,恭喜你已经完成了emscripten的安装了;若是没有找到内部程序,请重启windows再试一次,若依旧不行,那就要确认windows环境变量是否已经添加emsdk tool路径了。


安装完emscripten后 就轮到Qt源码的编译了。
在编译Qt源码之前,各位客官需要准备两样东西:

  1. 安装 MinGW
  2. 安装 Sed
  3. 安装 Git Bash(安装Git时默认勾选)

如何确定自己的windows是否已经具有 MinGW 和 Sed ?

***> mingw32-make -v
***> sed --version

若没有出现相关版本信息的就是windows不具备该程序了;
查看\Path\Git\usr\bin下是否具有相关shell命令程序,比如cp.exe、rm.exe;
好的,在物质准备好后就继续开车了。

  • Qt源码编译
    进入到Qt源码解压的目录下编译源码,以我的操作为栗子:
C:\Users\Administrator> cd D:\QtWasm\qt-everywhere-src-5.13.0
C:\Users\Administrator> d:
D:\QtWasm\qt-everywhere-src-5.13.0> configure -xplatform wasm-emscripten -platform win32-g++ -nomake tests -nomake examples -prefix %CD%\qtbase -no-warnings-are-errors
//configure过程会出现协议选择
选项一:选择 o 表示开源使用
选项二:选择 y 表示接受协议
//配置完成无错误后 mingw32-make 完成编译
D:\QtWasm\qt-everywhere-src-5.13.0> mingw32-make

编译过程会很久,请各位选择好操作时段。
编译没有出现错误下,在 源码目录\qtbase\bin下会有我们需要的Qt-Wasm版的qmake


下面开始尝试这份快乐了:

  • 准备一个Qt界面工程
  • cmd进入工程目录(有 .pro 的地方),输入命令
***> 源码目录\qtbase\bin\qmake && mingw32-make

待工程编译完后,会出现以下警告(没出就不管了)
在这里插入图片描述

  • 这个警告是可以忽略的
    完成后你可以在工程目录下找到以下三个文件:
    Qt for WebAssembly in Windows_第4张图片

由于目前Qt for WebAssembly只能直接用于部分浏览器,这里给出一个可用于任意浏览器的使用方法:

  • 在那三个文件的目录下执行以下命令
//命令格式:emrun --no_browser --port 端口号 目标路径
***> emrun --no_browser --port 8080 ./

通过端口访问以达到适用于任意浏览器,下面以傲游为例:
在地址栏键入:localhost:8080/1111.html
Qt for WebAssembly in Windows_第5张图片

  • 这是加载过程,耐心等待一下。

Qt for WebAssembly in Windows_第6张图片

  • 这就是我写的一个测试工程,简单的一个ok键,现在直接就呈现在网页上使用了,也验证了 Qt for WebAssembly in Windows 的搭建成功。

以上就是完整的Qt for WebAssembly in Windows搭建过程了,各位客官请慢用…

  • 点赞、收藏、分享什么的我不介意的,真的。?!你们什么眼神?!
    Alt

你可能感兴趣的:(Qt for WebAssembly in Windows)