Qt for WebAssembly

Qt for WebAssembly

Qt for WebAssembly 使得为web平台构建Qt应用程序成为可能。

目前正在开发Qt for WebAssembly。qt5.12将qtforwebassembly作为技术预览。从qt5.13以后，qtforwebassembly是一个受支持的平台。

qt 官网： https://wiki.qt.io/Qt_for_WebAssembly

emscripten网站： https://emscripten.org/docs/getting_started/downloads.html

github：https://github.com/emscripten-core/emsdk/tree/1.39.20

关于Emscripten

Emscripten是一个开源的LLVM到JavaScript编译器。使用Emscripten，您可以：

• 将C和C++代码编译成JavaScript

• 编译可以转换成LLVM位代码到JavaScript的任何其他代码。

• 将其他语言的C/C++运行时编译成JavaScript，然后以间接方式运行这些语言

windows上搭建Emscripten环境

• 修改emsdk.bat，匹配本地python路径，如果能自动找到，就不用修改

@IF EXIST "C:\Python27\python.exe" (
  @SET EMSDK_PY="C:\Python27\python.exe"
  @GOTO end
)

• 命令行输入，查看不同版本

./emsdk.bat list

• 命令行输入，安装最新版本

./emsdk.bat  install --global latest

因为无法下载 storage.googleapis.com的文件，手动下载

• https://storage.googleapis.com/webassembly/emscripten-releases-builds/deps/node-v12.18.1-win-x64.zip

• https://storage.googleapis.com/webassembly/emscripten-releases-builds/deps/python-3.7.4-embed-amd64+pywin32.zip

• https://storage.googleapis.com/webassembly/emscripten-releases-builds/deps/portable_jre_8_update_152_64bit.zip

• https://storage.googleapis.com/webassembly/emscripten-releases-builds/win/e7e39da9c81faecd9ecf44065cee864d76e4e34d/wasm-binaries.zip
  下载后改名 e7e39da9c81faecd9ecf44065cee864d76e4e34d-wasm-binaries.zip

上述文件放到emsdk\zips目录，zips需要新建，然后重新输入安装命令

• 命令行输入，激活最新版本

./emsdk.bat  activate latest

• 命令行输入，应用环境变量

./emsdk_env.bat

这样只是应用了临时环境变量，需要永久生效的话，要手动去设置

Setting environment variables:
EMSDK = D:\git\emsdk
EM_CONFIG = D:\git\emsdk\.emscripten
EM_CACHE = D:\git\emsdk\upstream\emscripten\cache
EMSDK_NODE = D:\git\emsdk\node\12.18.1_64bit\bin\node.exe
EMSDK_PYTHON = D:\git\emsdk\python\3.7.4-pywin32_64bit\python.exe
JAVA_HOME = D:\git\emsdk\java\8.152_64bit

• 验证是否安装成功
  • 官方描述
  • emcc -v 不会报错
  • emcc --clear-cache 不会报错
  • emcc hello_world.c 会生成三个文件

Windows需要手动设置额外的环境变量

• BINARYEN 值为 D:\git\emsdk\upstream\emscripten;D:\git\emsdk\upstream\bin;
• LLVM 值为 D:\git\emsdk\upstream\bin
  重新打开CMD，测试
  

编译第一个 C/C++ 文件 到 JavaScript.

新建main.c

#include <stdio.h>

int main() {
  printf("hello, world!\n");
  return 0;
}

• 命令行输入

emcc main.c

经过漫长的时间，好了

目录多了两个文件

• 命令行输入，运行js

node .\a.out.js

生成HTML

• 命令行输入，这个时间很短

emcc main.c -o hello.html

不幸的是，一些浏览器（包括Chrome、Safari和internetexplorer）不支持file://XHR请求，也无法加载HTML所需的额外文件（如.wasm文件或下面提到的打包文件数据）。对于这些浏览器，您需要使用本地web服务器提供文件，然后打开http://localhost:8000/hello.html).

借助PyCharm ，运行html

emscripten第二个例子效果

linux上搭建Emscripten环境

• 命令行输入，安装最新版本

./emsdk  install latest

由于公司网络问题，无法下载 https://storage.googleapis.com/webassembly/emscripten-releases-builds/deps/node-v12.18.1-linux-x64.tar.xz

找到国内镜像网站，手动下载压缩包，放入emsdk-master/zips目录，完成node的下载安装。

https://mirrors.ustc.edu.cn/node/v12.18.1/node-v12.18.1-linux-x64.tar.xz

接下来，需要 https://storage.googleapis.com/webassembly/emscripten-releases-builds/linux/1914a1543f08cd8e41f44c2bb05f7a90d1920275/wasm-binaries.tbz2

公司无法下载，搭建失败
Tip: linux 下安装新版本cmake

wget https://cmake.org/files/v3.6/cmake-3.6.2.tar.gz    
tar xvf cmake-3.6.2.tar.gz && cd cmake-3.6.2/
$ ./bootstrap && make && make install

Tip: 在linux下添加全局变量的方法，因为是安装的，不用下面添加环境变量的方法

vi ~/.bashrc

在文件末尾处增加以下代码

export PATH=$PATH:/home/chen/cmake-3.6.0-Linux-x86_64/bin

使修改的文件生效 source ~/.bashrc

修改文件夹权限
sudo chown -R chen emsdk-master/
sudo chgrp -R chen emsdk-master/

搭建Qt for WebAssembly环境

准备源码

qt源码 http://code.qt.io/cgit/qt/qt5.git/
git下载代码
git clone http://code.qt.io/qt/qt5.git -b 5.14
初始化
"C:/Program Files (x86)/Git/usr/bin/perl.exe" init-repository -f
由于qt的git访问速度感人，我直接下载源码包
http://mirror.bit.edu.cn/qtproject/archive/qt/5.14/5.14.2/single/qt-everywhere-src-5.14.2.zip

解压后，进入目录，编译qt源码，注意电脑要有MinGW
我把 E:\Qt\Qt5.10.1\Tools\mingw530_32\bin 添加为环境变量，也把mingw32-make改名为make

编译qt源码

进入源码目录，命令行输入，
./configure.bat -no-warnings-are-errors -xplatform wasm-emscripten -platform win32-g++ -nomake examples -prefix %CD%\qtbase
大概10分钟就可以编译完毕

构建需要的模块

E:/Qt/Qt5.10.1/Tools/mingw530_32/bin/make.exe module-qtbase module-qtdeclarative
如果不需要裁剪，可以直接 E:/Qt/Qt5.10.1/Tools/mingw530_32/bin/make.exe

安装报错

qwasmopenglcontext.cpp:91:16: error: no member named 'preferLowPowerToHighPerformance' in 'EmscriptenWebGLContextAttributes'
attributes.preferLowPowerToHighPerformance = false;

找到相关代码，注释

安装

E:/Qt/Qt5.10.1/Tools/mingw530_32/bin/make.exe install

编译demo

进入我自己的demo咖啡时钟目录 https://gitee.com/chen227/clock，编译
D:/git/qt-everywhere-src-5.14.2/qtbase/bin/qmake.exe & make
如果编译报错，可以进入源码目录，手动编译D:\git\qt-everywhere-src-5.14.2\qtimageformats\src\plugins\imageformats\icns，生成libqicns.a

类似报错，参考上述方案
我把源码qt-everywhere-src-5.14.2\qtimageformats\src\plugins\imageformats里报错的库都编译了一遍
编译结果

这里多了qtlogo.svg是因为程序有个图标