我们每天都会使用各种应用程序。 我们在不同的平台上运行它们，包括移动、网络、桌面、平板电脑、电视。 每个软件公司都会自行决定其应用程序应支持哪些平台。

在某些情况下，仅限于一个平台是不可行的，有必要使应用程序在不同平台上可用。 为每个平台开发单独的应用程序需要大量的时间和精力。 有必要为每个平台创建一个单独的开发团队，这是相当昂贵的。 另外，需要单独维护每个应用程序，这也需要额外的资源。

我们都知道，目前最流行的平台是网络。 根据 2023 年热门网站统计，2023 年互联网上约有 11.3 亿个网站。每三秒就有一个新网站建立。

毫不奇怪，许多公司更喜欢首先创建 Web 应用程序，然后将其转换为移动或桌面应用程序。 此类应用程序看起来像常规的本机应用程序，但实际上，它们实际上显示的是 Web 应用程序或其特殊版本。

这种支持多个平台的方法为软件公司和开发人员节省了大量的时间和金钱。 它允许公司快速创建移动或桌面应用程序并测试其在这些平台上的需求，然后再投入更多资金使用本机开发工具为每个平台开发单独的应用程序。

在本文中，我将讨论何时将 Web 应用程序或网站转换为桌面应用程序有意义，以及如何使用 Molybden 专业地完成此操作。

何时将 Web 应用程序转换为桌面应用程序

首先，我们来谈谈何时应该将网络应用程序转换为桌面应用程序。

我认为创建仅显示 Web 应用程序或网站的桌面应用程序是没有意义的。 与简单地在他们最喜欢的网络浏览器中访问 URL 相比，要求用户下载并安装您的桌面应用程序是不公平的，因为他们无法从中获得任何额外的价值。

如果用户想要通过单击任务栏（Windows、Linux）或 Dock（macOS）项目或通过桌面上的快捷方式快速打开 Web 应用程序或网站，他们可以在 Google Chrome 中为网站创建快捷方式或下载 Web 应用程序的 PWA 版本（如果可用）。

当您可以通过与桌面和操作系统集成来增强 Web 应用程序的功能时，将 Web 应用程序转换为桌面应用程序是有意义的。 例如，这可以包括访问文件系统、访问硬件、显示本机桌面通知、启动时启动、运行命令行实用程序、自动化 Web 应用程序中的特定场景等。

如何将网络应用程序转换为桌面应用程序

要将任何 Web 应用程序或网站转换为现代跨平台桌面应用程序，您可以使用 Molybden。

什么是Molybden

Molybden 是一个用于构建现代跨平台桌面应用程序的 SDK。 它提供了一组工具和框架，可简化跨平台桌面应用程序开发流程，使您能够更快地构建、测试和部署跨平台桌面应用程序。 它允许软件公司通过在所有平台上重用相同的代码库来节省时间和金钱。

Molybden 的特色之一是它使用 Chromium 在应用程序窗口中渲染用户界面。 这允许您使用 Web 技术构建应用程序的整个用户界面，或者直接在桌面应用程序中加载和显示任何现代 Web 应用程序或网站。

此外，Molybden 提供了一个框架，允许 Web 应用程序与低级本机 API 交互并利用操作系统的功能。 这极大地扩展了 Web 应用程序的功能，并消除了通常与在标准 Web 浏览器中运行 Web 应用程序相关的限制。

在接下来的部分中，我将向您展示如何使用 Molybden 将 Web 应用程序转换为桌面应用程序。

从模板生成项目

首先，我们需要生成一个项目。 Molybden 提供了一个名为 create-molybden-app 的特殊实用程序。 这是官方的项目脚手架工具，允许您基于特定模板创建项目。 要生成项目，请执行以下命令：

指定应用程序的名称，选择网站项目模板，并提供 Web 应用程序的 URL：

运行应用程序

生成项目后，您可以执行以下命令来构建并运行桌面应用程序：

启动后，您将看到一个用于访问 Web 应用程序的登录表单：

关于纯照片

在此示例中，我们正在转换名为 Pure Photos 的 Web 应用程序。 它允许您删除照片中的任何背景并自动隐藏照片中的任何缺陷。

使用纯照片，您可以：

• 查找照片中的人物，并将他们的头部对齐，使整批照片中的人物处于同一水平线上。
• 正确的曝光和颜色。
• 检测噪音并将其消除。
• 消除粉刺、雀斑和斑点。
• 生成 Adobe Photoshop Document (APD) 文件格式的分层图像。

从 IDE 工作

让我们用一些功能来扩展我们的桌面应用程序。

Molybden 生成的项目格式受所有现代 C++ IDE（例如 MS Visual Studio、Qt Creator 和 CLion）支持。

为了更改应用程序代码，我在 CLion（我最喜欢的 IDE）中打开项目并选择 src-cpp/src/main.cc 文件。 该文件包含启动应用程序时执行的主要函数。 在这个文件中，我们可以实现桌面应用程序的逻辑。

在系统托盘中显示应用程序

让我们的应用程序出现在系统托盘中。 为此，我们将创建并配置应用程序托盘，如以下代码所示：

显示本机桌面通知

当照片处理完成时，我们的网络应用程序会通知用户。 在标准 Web 浏览器中，用户必须授予 Web 应用程序显示桌面通知的权限。 Molybden 允许您以编程方式进行配置。

让我们允许 Web 应用程序始终显示本机桌面通知：

从 Web 应用程序访问本机 API

让我们通知 Web 应用程序它正在我们的桌面应用程序中运行。 在这种情况下，Web 应用程序可以显示用户界面的附加元素或调整其内部逻辑。 为此，我们将创建一个特定变量，Web 应用程序可以检查该变量以了解其运行位置（在标准 Web 浏览器或桌面应用程序中）：

Web 应用程序可以在 JavaScript 中访问此变量，如下所示：

现在，当 Web 应用程序可以理解它正在我们的桌面应用程序中运行时，它就可以访问操作系统的各种功能。 让我们实现显示本机“打开文件夹”对话框并获取所选文件夹中所有文件的列表的功能。

Molybden 允许您在桌面应用程序中定义一个函数，并将其“注入”到 Web 应用程序中，以便可以直接从 JavaScript 调用它。

让我们声明一个函数，该函数将向用户显示本机“打开文件夹”对话框，并将所选文件夹中的文件列表作为 JSON 字符串返回：

在 JavaScript 中注册此函数：

您现在可以从 Web 应用程序的 JavaScript 代码调用此函数：

从 Web 应用程序调用此 JavaScript 代码后，您将在 JavaScript 控制台中看到以下输出：

自定义应用程序图标

要自定义应用程序图标，我们可以将官方的Pure Photos徽标转换为所需的格式，并用它来替换默认的应用程序图标。

启动应用程序并确保正在使用新图标：

生成应用程序安装程序

一旦所有必要的功能在我们的桌面应用程序中实现，我们就准备将其交付给最终用户。 为了获得流畅的用户体验，Molybden 会自动为当前操作系统生成本机格式的应用程序安装程序。

要构建桌面应用程序的生产版本并生成应用程序安装程序，请执行以下命令：

安装程序将放置在 ./build-dist/pack 目录中。

建议您在将应用程序分发给最终用户之前对其进行签名和公证。 这是因为 macOS 要求所有应用程序都经过签名和公证才能运行。

就是这样！ 使用 Molybden，您可以使用许多其他功能来扩展您的桌面应用程序，但涵盖所有这些功能会使本文过于冗长。

顺便说一句，您不仅可以转换您自己的网络应用程序或网站；）

完整示例

这是创建的桌面应用程序的完整源代码：

下一步

使用 Molybden 在几分钟内将您的 Web 应用程序转换为桌面应用程序。 自行确保 Molybden 如何简化开发流程，让您在更短的时间内构建现代且美观的跨平台桌面应用程序。

如果您有任何疑问或需要专家指导，请告诉我们。 我们将很高兴协助您的公司创建现代、美观且实用的跨平台桌面应用程序。