为了应对最近的比赛，但对很对 GUI 系统都不怎么熟悉，而且又要用 C++ 进行项目核心代码的编辑。RetVal 希望团队做出一个很炫的图形界面，不过，对 C++ 的窗口系统还真的不熟悉。于是尝试用 Qt 和 HTML 5 来进行界面的编程，也算是一个新挑战。

不过似乎关于 Qt 和 HTML 5 的中文资料还不多，于是整理一下笔记吧。这个博客也很久没更新了……

新建项目

要新建 Qt HTML 5 应用程序，可以直接在 Qt Creator 里新建“HTML 5 Application”，但要注意的是，这样新建的Qt程序并没有包含菜单栏之类控件，完全是一个 Qt 窗口里面有一个 Webkit 组件。但有一个好处是，新建的 Webkit 组件被 Qt Creator 对移动设备（主要是触摸屏设备）优化过，可以应用于桌面端和手机端。但也由于针对了触摸屏，所以，默认禁用了“hover”事件（即鼠标悬停事件）。使我还纠结了很久为什么 Qt Webkit 不支持鼠标悬停事件。

如果我们是针对桌面端开发，那么其实不必要考虑Webkit的移动支持，因此，我们可以自己新建一个 Qt GUI 项目。此时，要注意的是在 .pro 文件中添加对 Webkit 的编译支持。

参考 .pro 文件如下：

#-------------------------------------------------
#
# Project created by QtCreator 2012-04-02T09:29:02
#
#-------------------------------------------------

QT       += core gui webkit

TARGET = ColdTest
TEMPLATE = app

SOURCES += main.cpp\
        mainwindow.cpp \
    sampleobject.cpp

HEADERS  += mainwindow.h \
    sampleobject.h

FORMS    += mainwindow.ui

uiml.source = html
uiml.target = .
DEPLOYMENTFOLDERS = uiml

defineTest(qtcAddDeployment) {
for(deploymentfolder, DEPLOYMENTFOLDERS) {
    item = item$${deploymentfolder}
    itemsources = $${item}.sources
    $$itemsources = $$eval($${deploymentfolder}.source)
    itempath = $${item}.path
    $$itempath= $$eval($${deploymentfolder}.target)
    export($$itemsources)
    export($$itempath)
    DEPLOYMENT += $$item
}

MAINPROFILEPWD = $$PWD

win32 {
    copyCommand =
    for(deploymentfolder, DEPLOYMENTFOLDERS) {
        source = $$MAINPROFILEPWD/$$eval($${deploymentfolder}.source)
        source = $$replace(source, /, \\)
        sourcePathSegments = $$split(source, \\)
        target = $$OUT_PWD/$$eval($${deploymentfolder}.target)/$$last(sourcePathSegments)
        target = $$replace(target, /, \\)
        !isEqual(source,$$target) {
            !isEmpty(copyCommand):copyCommand += &&
            isEqual(QMAKE_DIR_SEP, \\) {
                copyCommand += $(COPY_DIR) \"$$source\" \"$$target\"
            } else {
                source = $$replace(source, \\\\, /)
                target = $$OUT_PWD/$$eval($${deploymentfolder}.target)
                target = $$replace(target, \\\\, /)
                copyCommand += test -d \"$$target\" || mkdir -p \"$$target\" && cp -r \"$$source\" \"$$target\"
            }
        }
    }
    !isEmpty(copyCommand) {
        copyCommand = @echo Copying application data... && $$copyCommand
        copydeploymentfolders.commands = $$copyCommand
        first.depends = $(first) copydeploymentfolders
        export(first.depends)
        export(copydeploymentfolders.commands)
        QMAKE_EXTRA_TARGETS += first copydeploymentfolders
    }
} else:unix {
    desktopfile.path = /usr/share/applications
    copyCommand =
    for(deploymentfolder, DEPLOYMENTFOLDERS) {
        source = $$MAINPROFILEPWD/$$eval($${deploymentfolder}.source)
        source = $$replace(source, \\\\, /)
        macx {
            target = $$OUT_PWD/$${TARGET}.app/Contents/Resources/$$eval($${deploymentfolder}.target)
        } else {
            target = $$OUT_PWD/$$eval($${deploymentfolder}.target)
        }
        target = $$replace(target, \\\\, /)
        sourcePathSegments = $$split(source, /)
        targetFullPath = $$target/$$last(sourcePathSegments)
        !isEqual(source,$$targetFullPath) {
            !isEmpty(copyCommand):copyCommand += &&
            copyCommand += $(MKDIR) \"$$target\"
            copyCommand += && $(COPY_DIR) \"$$source\" \"$$target\"
        }
    }
    !isEmpty(copyCommand) {
        copyCommand = @echo Copying application data... && $$copyCommand
        copydeploymentfolders.commands = $$copyCommand
        first.depends = $(first) copydeploymentfolders
        export(first.depends)
        export(copydeploymentfolders.commands)
        QMAKE_EXTRA_TARGETS += first copydeploymentfolders
    }
    installPrefix = /opt/$${TARGET}
    for(deploymentfolder, DEPLOYMENTFOLDERS) {
        item = item$${deploymentfolder}
        itemfiles = $${item}.files
        $$itemfiles = $$eval($${deploymentfolder}.source)
        itempath = $${item}.path
        $$itempath = $${installPrefix}/$$eval($${deploymentfolder}.target)
        export($$itemfiles)
        export($$itempath)
        INSTALLS += $$item
    }
    icon.files = $${TARGET}.png
    icon.path = /usr/share/icons/hicolor/64x64/apps
    desktopfile.files = $${TARGET}.desktop
    target.path = $${installPrefix}/bin
    export(icon.files)
    export(icon.path)
    export(desktopfile.files)
    export(desktopfile.path)
    export(target.path)
    INSTALLS += desktopfile icon target
}

export (ICON)
export (INSTALLS)
export (DEPLOYMENT)
export (TARGET.EPOCHEAPSIZE)
export (TARGET.CAPABILITY)
export (LIBS)
export (QMAKE_EXTRA_TARGETS)
}
qtcAddDeployment()

项目依赖部分（qtcAddDeployment）是参考了 Qt Creator 为 HTML 5 Application 项目自动生成的代码。

然后，在项目根目录下新建文件夹 html ，把用到的 HTML 5 构建的文件添加到这里。

初始化 QtWebkit

新建 Qt GUI 项目后，默认应该会生成 MainWindow 类，简单起见，直接以 MainWindow 类为基础，用 Qt Desginer 画好界面。

然后回到 MainWindow 类（或者你自己新建的其他类）的初始化函数中，添加slot：

private slots:
    void addToJavaScript();

然后，方法实现为：

void MainWindow::addToJavaScript()
{
    ui->webView->page()->mainFrame()->addToJavaScriptWindowObject("Qt", qt);
    ui->webView->page()->mainFrame()->addToJavaScriptWindowObject("app", this);
}

这个函数是为 Webkit 组件建立页面的时候，把 C++ 对象包装为 JavaScript对象传递给 JavaScript 调用的。这里，即是把 qt（一个QApplication 对象）、app（QMainWindow 对象）添加到 QtWebkit 的 JavaScript 运行环境中。

然后，添加本地路径调整函数：（这里省略头文件的声明了）

QString MainWindow::adjustPath(const QString &path)
{
#ifdef Q_OS_UNIX
#ifdef Q_OS_MAC
    if (!QDir::isAbsolutePath(path))
        return QCoreApplication::applicationDirPath()
                + QLatin1String("/../Resources/") + path;
#else
    const QString pathInInstallDir = QCoreApplication::applicationDirPath()
        + QLatin1String("/../") + path;
    if (pathInInstallDir.contains(QLatin1String("opt"))
            && pathInInstallDir.contains(QLatin1String("bin"))
            && QFileInfo(pathInInstallDir).exists()) {
        return pathInInstallDir;
    }
#endif
#endif
    return path;
}

这段代码也是参考 HTML 5 Application 生成的函数，可以把相对项目路径转化为 QUrl 标识。

于是，初始化 WebView 的时候就可以：

ui->webView->setUrl(QUrl(MainWindow::adjustPath("html/ui.html")));

来调用 html 文件夹下面的 ui.html 文件了。

到这里，一个 Qt HTML 5 程序的初始化工作就完成了。可以编辑一下 ui.html 文件试用一下 Qt Webkit ～

• 相关文章
• 全局相关文章