跨越屏幕：桌面PC端的多端开发框架介绍

Just_Paranoid

已于 2023-05-10 11:48:24 修改

阅读量1.9k

点赞数 1

分类专栏：技术流Clip 文章标签： qt electron flutter

于 2023-05-04 15:57:44 首次发布

本文链接：https://blog.csdn.net/weixin_44008788/article/details/130407712

版权

技术流Clip 专栏收录该内容

34 篇文章 3 订阅

订阅专栏

目前，随着互联网和移动互联网的发展，多端开发框架已经成为越来越多开发者更好的选择。主要有以下几个方面的前景：

跨平台开发需求不断增加：由于不同平台和设备的差异性，开发人员需要使用不同的编程语言和开发工具来为各个平台和设备编写不同的应用程序。跨平台开发框架能够通过共享一部分代码，在不同的平台上构建出一致的应用程序，从而降低开发成本。
移动应用市场增长迅速：据调研数据显示，移动应用市场持续发力，2018年全球移动应用市场收入超过了930亿美元，预计到2023年将达到全球1.25万亿美元。这意味着，开发人员将有更多机会使用跨平台开发框架来为多个移动平台构建应用程序。
用户设备多样化：随着人们越来越依赖数字产品，用户设备类型和数量也在不断增加，需要为不同的设备开发应用程序。跨平台开发框架能够支持多平台、多设备的应用程序开发，给开发者带来了更大的便利。

总体来说，多端开发框架是未来的发展趋势，虽然每个框架的特点和适用场景不同，但随着技术的不断进步，这些框架将会变得更加成熟和完善。因此，对于开发者和企业来说，学习和应用多端开发框架将会是非常有前景的选择。

框架介绍

桌面PC端的多端开发框架有很多，以下是一些常见的框架及其简介和优缺点：

1. Qt：

Qt 是一套跨平台的 C++ 应用程序开发框架。它提供了一个全面、易于使用的 API，可以帮助开发者构建移动应用程序、机器人控制系统、汽车、嵌入式设备以及其他各种类型的应用程序。官网：https://www.qt.io/zh-cn/product

优点：

用 C++ 编写的应用程序具有高性能和快速响应
支持跨平台开发，可达到重用代码的目标
提供了大量的基础类和方法来简化开发工作

缺点：

由于采用了 C++ 开发方式，学习曲线较陡峭，需要较高的技术水平
在设计 UI 界面时有点繁杂，不如比较流行的前端框架简单易懂

2. Electron：

Electron 是一个基于 Chromium 和 Node.js 的框架，可以用 HTML、CSS 和 JavaScript 构建桌面应用程序。官网：https://www.electronjs.org/zh

优点：

使用熟悉的前端技术栈进行应用程序开发
可以快速创建兼容 macOS、Windows 和 Linux 的原生应用程序
社区活跃，扩展性强

缺点：

对于 CPU 和内存的要求较高，可能会导致程序运行速度缓慢。
Electron 应用程序常常占用较大的内存和磁盘空间。

3. Flutter：

Flutter 是一个 Google 开发的跨平台移动应用框架，可以用单个代码库构建高性能、美观的应用程序。官网：https://flutter.cn/

优点：

高性能，快速响应，用户体验较好。
使用 Dart 语言，易于学习和使用。
具有灵活的 UI 库和组件，可快速构建应用程序界面

缺点：

不如原生 SDK 支持丰富，可能会受到限制。
需要考虑不同操作系统和设备之间的差异

综上所述，Qt、Electron 和 Flutter 分别具有自己的优缺点，开发者需要根据实际需求进行选择。Qt 更适合需要较高性能的应用程序，而 Electron 则适用于需要快速开发桌面应用程序， Flutter 则可以用于构建跨平台的高频率刷新的应用程序（如游戏）和与原生代码稍微接触交互少一些的纯前端app类型。

基本使用

1. Qt

Qt 工具集包含一个名为 “Qt Creator” 的 IDE，它是 Qt 官方推荐的 IDE。Qt Creator 集成了一个强大的代码编辑器、自动构建和部署工具、调试器和图形用户界面设计器等功能，可以帮助开发者完成整个应用程序开发过程。同时，它还支持多种编程语言，例如 C++、QML 和 JavaScript 等，可以方便地进行跨平台开发。
除了 Qt Creator 外，也可使用其他支持 Qt 开发的 IDE 或文本编辑器，如 Visual Studio、Eclipse、Sublime Text 等，并手动配置编译环境以达到与 Qt Creator 相同的效果。但是，对于初学者来说，使用 Qt Creator 更为方便快捷。

以下是 Qt 的入门详细教程：

安装 Qt

首先需要下载并安装 Qt Creator，官方网站提供了 Windows、Mac 和 Linux 版本可供下载：https://www.qt.io/download

在安装时可以根据个人需求选择需要的组件进行安装。

创建新项目

打开 Qt Creator 后，点击 “New Project” 按钮创建一个新的 Qt 项目。在弹出的 “Projects” 窗口中，选择 “Application” 类型，然后再选择 “Qt Widgets Application” 或 “Qt Quick Application”。

编写代码

Qt Creator 提供了集成的代码编辑器，支持 C++ 和 QML 两种语言。每个应用程序都包含一个 .pro 文件和一个主要的源文件（main.cpp），在这里可以打开和编辑它们。

在 main.cpp 文件中，可以创建窗口并输出一些内容，例如：

#include <QApplication>
#include <QPushButton>

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);

    QPushButton button("Hello World", nullptr);
    button.setGeometry(100, 100, 100, 50);
    button.show();

    return a.exec();
}

以上代码创建了一个按钮，并设置它的初始位置、大小以及显示在屏幕上。之后启动应用程序，便能够看到一个简单的窗口和一个按钮。

调试和构建

在 Qt Creator 中可以直接使用调试工具，例如 gdb。可以通过在 main.cpp 中插入断点来调试代码，同时在编辑器的左侧会显示当前执行状态。

构建和编译应用程序可以通过 “Build” 按钮进行操作。Qt Creator 也提供了丰富的构建工具，支持多种类型的构建和平台。在构建过程中，还可以设置一些参数，例如优化等级，来优化应用程序性能。

2. Electron

Electron 开发并没有特别强制的编译器要求，常用的编译器包括 Visual Studio Code、Atom、Sublime Text 等，这些编辑器都支持 JavaScript 和 HTML，可以与 Electron 集成使用，提供了代码高亮、智能提示、调试等功能，并且用户也可以根据自己的喜好选择自己习惯的编译器。推荐使用 Visual Studio Code，因为它提供了丰富的扩展和集成开发环境（IDE）功能，而且还支持调试Electron应用程序，可以提高开发效率。

以下是 Electron 的入门教程：

安装 Node.js 和 npm

在安装 Electron 之前，需要先安装 Node.js 和 npm，可以从官网下载适用于自己系统的安装包。下载地址：https://nodejs.org/en/download/

安装 Electron

在完成 Node.js 和 npm 的安装后，可以使用 npm 命令来安装 Electron

npm install electron --save-dev

–save-dev 参数表示将 Electron 添加到项目依赖中。

创建一个新的 Electron 应用程序

创建一个空文件夹用于存储应用程序，并打开终端进入该目录，然后运行以下命令：

npm init -y

该命令将在文件夹中生成一个 package.json 文件，其中记录了应用程序的名称、版本和依赖等信息。

编写应用程序代码

在前面步骤中创建了一个名为 package.json 的文件，它包含了应用程序的基本信息。可以编辑该文件添加应用程序所需的依赖。

然后，在保存应用程序的源代码的文件夹下创建一个主进程文件 main.js，在其中编写 Electron 应用程序的核心逻辑。例如，以下代码创建了一个简单的窗口。

const { app, BrowserWindow } = require('electron')

function createWindow () {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  })

  win.loadFile('index.html')
}

app.whenReady().then(() => {
  createWindow()

  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) {
      createWindow()
    }
  })
})

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})