Qt WebAssembly实验记录

1.安装及介绍

【Qt杂谈2.快速体验Qt for WebAssembly（Windows平台）】
【qt for webassembly环境搭建图文教程】
【Qt：靠谱点了！基于WebAssembly开发网页端】

2.问题及解决方案

2.1.在C++中调用js函数

关于在wasm编译环境中，在c++中调用js，可以参考以下网址：
【emscripten.h】
【asm.js 和 Emscripten 入门教程】
【EM_JS : unable to free const char* in cpp】

2.2.中文无法显示（乱码）：

【Qt for WebAssembly中文显示异常】
弄一个otf或者ttf字体文件，然后加到资源库中，然后

//注意选择你自己的文件
QFontDatabase::addApplicationFont(":/qml/Font/Alibaba-PuHuiTi-Light.otf");

2.3.无法输入中文

好像没有有效的资料解决这个问题，所以我只能调用html的api了
具体实现代码请看我另外一篇文章【QtWebAssembly实现中文输入】

#ifdef Q_OS_WASM
#include <emscripten.h>
#include <emscripten/html5.h>

//获取用户输入，因为Qt不支持直接输入中文。。
EM_JS(const char*, getInput, (const char *str), {
          const text = UTF8ToString(str);
          val = prompt("", text);

          if(val == null)
          {
              val = ""
          }
          var jstring = val;

          var lengthBytes = lengthBytesUTF8(jstring)+1;
          var stringOnWasmHeap = _malloc(lengthBytes);
          stringToUTF8(jstring, stringOnWasmHeap, lengthBytes);
          return stringOnWasmHeap;
      })
      
#endif

......
// 此函数可以作为静态函数，在适当的时候使用
// 调用此函数的效果为：在页面上弹出啊一个输出窗口，用户在输入好信息后，点击确定，窗口消失，此函数返回用户输入的字符串
QString Manager::getUserInput(QString currentText)
{
    QString input = "";

#ifdef Q_OS_WASM
    input = getInput(currentText.toUtf8().data());
#else

#endif

    return input;
}

2.4.qt对应的emsdk版本

【Qt for WebAssembly】
设置的时候，直接在 Tools --》Options --》device–》webAssembly设置emsk的根目录就行。（记得在设置之前要先安装好python并设置好环境变量，因为QtCreator会调用）

假如在emsdk install 比较新的版本时，可能会出现：

D:\Qt\emsdk\emsdk>emsdk install 3.1.25
error: tool or SDK not found: '3.1.25'

此时可以先pull一下再install

D:\Qt\emsdk\emsdk>git pull

2.5.文件的下载以及上传：

【webassembly: support local system file access】
文件的下载（保存）可以选择用label显示下载链接（点击label后触发下载）。

    ui->label->setText("<a style='color: green;' href = https://download.qt.io/archive/online_installers/4.1/qt-unified-windows-x86-4.1.1-online.exe> click to download</a>");
    ui->label->setOpenExternalLinks(true);

或者选择稍微复杂一点的，通过wasm提供的接口，调用js实现。

#ifdef Q_OS_WASM
#include <emscripten.h>
#include <emscripten/html5.h>
#endif

//获取服务器的地址、端口之类的。
//这个EM_JS是用来声明js函数的，声明之后就可以直接在c++里面用了。
EM_JS(const char*, getTitle, (), {
          var urlPath = window.document.location.href;
          console.log(urlPath);

          var jstring = urlPath;

          var lengthBytes = lengthBytesUTF8(jstring)+1;
          var stringOnWasmHeap = _malloc(lengthBytes);
          stringToUTF8(jstring, stringOnWasmHeap, lengthBytes);
          return stringOnWasmHeap;
      })
      
void MainWindow::on_pushButton_download_clicked()
{

#ifdef Q_OS_WASM
    //执行js程序，这个是直接执行的。
    EM_ASM({
               window.open("http://127.0.0.1/resources/main.cpp");
    });
#endif

     //前面用EM_JS声明的函数
    const char *str = getTitle();
    qDebug() << str;
    free((void*)str);
}

文件的上传这样（这个是会读取整个文件内容的）

void something(const QString &name, const QByteArray &content)
{
    qDebug() << "name:" << name;
    qDebug() << "content" << content;
}
void MainWindow::on_pushButton_clicked()
{
//    QFileDialog::getSaveFileUrl();
//这个会打开选择的文件，然后将文件的名称以及内容通过上面的something来反馈出来。对于小文件的处理应该是够了。
    QFileDialog::getOpenFileContent("*", something);
}

2.6.设置调试时的网页浏览器

调试时默认为ie，可以更改为其他浏览器

假如你这里的列表有ie一个，但是实际上你已经装了其他浏览器；那么，你需要在电脑的环境变量path上加上你的浏览器的路径，然后重启QtCreator

2.7.编译时报空间太小

wasm-ld: error: initial memory too small, 18222032 bytes needed
【解决 wasm-ld: error: initial memory too small, 18319040 bytes needed】

修改emsdk/upstream/emscripten/src目录里面的settings.js
里面的 INITIAL_MEM 旧版叫 TOTAL_MEMORY

或者在pro文件中增加

#值为64KB的倍数
wasm:QMAKE_LFLAGS += -s \"TOTAL_MEMORY=33554432\"