☰

如何从 Ubuntu HTML5 应用程序调用 Qt 或本地函数？

tag-icon • tag-icon application-development ubuntu-sdk html5
如何从 Ubuntu HTML5 应用程序调用 Qt 或本地函数？

我已经从 Ubuntu SDK 创建了一个 HTML5 应用程序。它包含一个 index.html 和 js 目录。接下来，我在 html 文件上添加“X”标签，如下所示：

  <head>
    ...
    <style type="text/css">
       #quit { background-color: gray; color: white; font-weight: bold; display: block; text-align: right; }
    </style>
  </head>

  <body>
   <a id="quit">X</a>
   ...
  </body>

想要的效果是单击“X”标签时，将调用 Qt.quit() 并关闭应用程序窗口。不幸的是，它不会。该应用程序由“ubuntu-html5-app-launcher”（包含在“ubuntu-html5-theme”包中）启动。那么，如何修改 ubuntu-html5-app-launcher 让 html5 应用程序像原生应用程序一样执行某些操作，例如，当我们单击 html 文件中定义的项目时，只需关闭窗口？

仅供参考：我发现如果我从 SDK 中的“新文件或项目”菜单中选择“应用程序>>HTML5 应用程序”模板，则 Qt.quit() 可以通过 html 文件调用（通过 addToJavaScript 函数）：

void Html5ApplicationViewerPrivate::addToJavaScript()
{
    m_webView->page()->mainFrame()->addToJavaScriptWindowObject("Qt", this);
}

但是“应用程序 >> HTML5 应用程序”类型的应用程序无法将某些事件（例如鼠标悬停和鼠标移动）传输到内置 WebView，因此，当用户将鼠标移到 html 元素上时，除非您单击元素，否则不会发生任何事情。

我的问题是：

  • 如何让 ubuntu-html5-app-launcher 启动的 html5 应用调用 html 文件中的 qt 函数。即如何修改 ubuntu-html5-app-launcher

    或者

  • 如何制作“应用程序>>HTML5应用程序”类型的应用程序将指定的事件（例如鼠标移动和悬停）传输到由 C++ 类加载的内置 html 文件（在我的演示中是 Html5ApplicationViewer 继承自 QWidget）

答案1

应用程序模板不是 Ubuntu Touch 模板，它们实际上只是 Qt Creator 模板，您不能将它们用于 Ubuntu 应用程序。

当您制作 Ubuntu HTML5 应用程序时，您可以使用标准 JavaScript 鼠标事件处理程序，如 onmousemove、onmouseover 和 onmouseout，尽管目前这些处理程序运行得不是很好。Ubuntu Touch 正在快速发展，因此请密切关注更新。

编辑：使用触摸事件处理程序中指定的W3C 规范

您无法从应用程序本身退出 HTML5 应用程序。这其实不是什么问题，因为如果您有机会使用 Ubuntu Touch 的其他应用程序，您可能会注意到它们都没有退出按钮。在 Ubuntu 上，您可以直接将应用程序滑入后台。

如果你想制作一个带有 HTML5 UI 的 C++ 应用程序，你应该阅读这个问题。

答案2

如果您使用默认 Qt 模板创建 HTML5 应用，那么您实际上是在开发带有 Webview 的 Qml 应用。您可以访问所有 Qml API，但必须手动将它们与您的 Webview 绑定。

Ubuntu HTML5 App 模板提供的是一个为您完成此操作的容器。我们目前在 ubuntu-html5-container 中支持以下 API：- Webview 公开的 W3C API（例如地理位置）- Unity API - Ubuntu 平台 API：目前为警报、在线帐户和内容中心 - Cordova API：它们允许您访问相机、麦克风或获取电池状态等。

当然，您也可以访问在线 API，因为此应用程序类型默认具有“网络”访问权限。

您可以在以下位置找到非常好的概述：http://developer.ubuntu.com/apps/html-5/

有关 HTML5 应用可用的平台 API 的详细信息，请参阅：http://developer.ubuntu.com/api/html5/sdk-14.04/

相关内容