跨越屏幕:桌面PC端的多端开发框架介绍_写pc端应用用什么框架开发-程序员宅基地

技术标签: flutter  qt  electron  技术流Clip  

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

  1. 跨平台开发需求不断增加:由于不同平台和设备的差异性,开发人员需要使用不同的编程语言和开发工具来为各个平台和设备编写不同的应用程序。跨平台开发框架能够通过共享一部分代码,在不同的平台上构建出一致的应用程序,从而降低开发成本。

  2. 移动应用市场增长迅速:据调研数据显示,移动应用市场持续发力,2018年全球移动应用市场收入超过了930亿美元,预计到2023年将达到全球1.25万亿美元。这意味着,开发人员将有更多机会使用跨平台开发框架来为多个移动平台构建应用程序。

  3. 用户设备多样化:随着人们越来越依赖数字产品,用户设备类型和数量也在不断增加,需要为不同的设备开发应用程序。跨平台开发框架能够支持多平台、多设备的应用程序开发,给开发者带来了更大的便利。

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

框架介绍

桌面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 的入门详细教程:

  1. 安装 Qt

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

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

  1. 创建新项目

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

  1. 编写代码

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();
}

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

  1. 调试和构建

在 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 的入门教程:

  1. 安装 Node.js 和 npm

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

  1. 安装 Electron

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

npm install electron --save-dev

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

  1. 创建一个新的 Electron 应用程序

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

npm init -y

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

  1. 编写应用程序代码

在前面步骤中创建了一个名为 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()
  }
})
  1. 运行应用程序

在编写完应用程序代码后,可以使用以下命令运行应用程序:

npm start

该命令将启动 Electron 应用程序并打开主窗口。

3. Flutter

谷歌开源的跨平台UI开发框架Flutter

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_44008788/article/details/130407712

智能推荐

设计删除顺序表中【x,y】中的所有元素算法_关任务:设计一个高效的用于删除整数顺序表 l 中所有值在[x,y]范围内的元素的-程序员宅基地

文章浏览阅读8.9k次,点赞2次,收藏15次。线性表L采用顺序存储结构,删除元素在[x,y]之间的所有元素。代码如下:#include #include using namespace std;#define MaxSize 10typedef char ElemType;typedef struct{ ElemType data[MaxSize]; int length;}SqList;void In_关任务:设计一个高效的用于删除整数顺序表 l 中所有值在[x,y]范围内的元素的

pandas 取excel 中的某一列_Pandas进阶修炼120题,给你深度和广度的船新体验-程序员宅基地

文章浏览阅读1.2k次,点赞3次,收藏23次。Pandas 是基于 NumPy 的一种数据处理工具,该工具为了解决数据分析任务而创建。Pandas 纳入了大量库和一些标准的数据模型,提供了高效地操作大型数据集所需的函数和方法。和鲸社区的@刘早起同学创作了这个项目,其中包含Pandas基础、Pandas数据处理、金融数据处理、当Pandas遇上NumPy、补充内容 5个部分。在深度和广度上,都相较之前的Pandas习题系列有了很大的提升。此前的..._在运用pandas进行数据分析时,可以用df.append(df.iloc[7])将第8行数据添加到末尾

完美解决tomcat8.5+远程无法登录tomcat问题及jenkins远程部署问题_jenkins远程部署tomcat未启动-程序员宅基地

文章浏览阅读4.5k次。tomcat8.5之后配置了用户名密码之后默认只能本地访问,远程是无法访问的,可用下面方法进行解决1. C:\Users\Administrator\Desktop\apache-tomcat-8.5.27-windows-x64\apache-tomcat-8.5.27\conf\tomcat-users.xml 中增加&lt;role rolename="manager-gui"/&gt;&l..._jenkins远程部署tomcat未启动

【Paper Reading Note】Brief Introduction of Encrypted Traffic Classification Using PEAN_listen to minority: encrypted traffic classificati-程序员宅基地

文章浏览阅读181次。Brief Introduction of Encrypted TrafficClassification[Data Preprocessing-Oriented] [Essay Reading & Understanding Record] [2023.4] [Author : LWC]_listen to minority: encrypted traffic classification for class imbalance wit

Sqlite-- 使用Java程序、cmd命令行来备份恢复Sqlite数据库_java程序,使用sqlite数据库,如何备份-程序员宅基地

文章浏览阅读1w次。引子: 1,Sqlite在Windows、Linux 和 Mac OS X 上的安装过程 2,嵌入式数据库的安装、建库、建表、更新表结构以及数据导入导出等等详细过程记录 3,嵌入式数据库事务理解以及实例操作 4,数据迁移备份--从低版本3.6.2到高版本3.8.6 5,Java使用jdbc连接Sqlite数据库进行各种数据操作的详细过程 ..._java程序,使用sqlite数据库,如何备份

python+selenium+pytest自动化测试之下拉选择框处理_python.pytest 如何选择第一个下拉选项-程序员宅基地

文章浏览阅读2.9k次。应用场景:新增或者查询时,遇到下拉选择框,进行处理,本博客主要用于根据状态查询数据,对列表中的数据进行断言分析。1.BasePage封装select操作: def select_option(self,locator,value,type="index"): self.wait_utilVisible(locator) se=self.get_elemen..._python.pytest 如何选择第一个下拉选项

随便推点

ElasticSearch 字段数据存在,但用term查询搜索不到指定的数据_elasticsearch中match查询和term不可用-程序员宅基地

文章浏览阅读6.1k次,点赞11次,收藏13次。近日使用ElasticSearch查询数据时遇到了个问题,在es中该字段对应的数据是存在的,但使用term/terms查询时却查不到。同时,我使用match去查询却能查到:match能查到而term查不到,用过es的都应知道这两者的查询是有区别的:match是全文搜索,用于查询字段类型为text的字段,match进行搜索的时候,会先进行分词拆分,拆完后,再来匹配;而term是精确查询,也就是完全匹配,通常用于对keyword和有精确值的字段进行查询,搜索前不会再对搜索词进行分词拆解。由上面的._elasticsearch中match查询和term不可用

人工智能_机器学习059_非线性核函数_poly核函数_rbf核函数_以及linear核函数效果对比---人工智能工作笔记0099_linear、 poly、rbf-程序员宅基地

文章浏览阅读595次。X += np.random.randn(100,2) 我们从正太分布中拿出100行2列的数据来,拼接到X生成的100行2列的数据里面,现在的原来的X,就变成了。- `X[:,0]`:这是第一个维度(通常是x轴)的值,X 是一个二维数组,`X[:,0]` 表示取X数组的第一列。- `X[:,1]`:这是第二个维度(通常是y轴)的值,X 是一个二维数组,`X[:,1]` 表示取X数组的第二列。这个是5,5 表示图形的大小,x轴,y轴的大小,设置好以后生成的就圆了,要不然是椭圆的,可以看到上面显示的._linear、 poly、rbf

excel取整函数_Excel中-年会必备,教你制作简易抽号系统-程序员宅基地

文章浏览阅读173次。【回顾敲黑板】先把上一期留下来的2个问题解决,这个抽号系统你就有思路了~1、如何让随机数变为整数?【答】使用int()函数,用法就是把:Rand()*10直接放到int()里,即:int(Rand()*10)2、如何去某个固定区间的随机数,比如【0-30】?【答】若要生成 a 与 b 之间的随机实数,应使用: RAND()*(b-a)+a,即RAND()*(30-0)+(0)。脑袋里是不是一团数学..._如何制作抽号

爬虫实战——爬取电影天堂的电影详情页信息_2、请使用不同的爬虫库爬取网站电影信息页面-程序员宅基地

文章浏览阅读2.8k次,点赞2次,收藏12次。爬取电影天堂的电影详情页信息_2、请使用不同的爬虫库爬取网站电影信息页面

hdu 5384 Danganronpa 2015多校联合训练赛#8 ac自动机_danganronpa多校-程序员宅基地

文章浏览阅读716次。DanganronpaTime Limit: 2000/1000 MS (Java/Others) Memory Limit: 131072/131072 K (Java/Others)Total Submission(s): 171 Accepted Submission(s): 83Problem DescriptionDanganronpa is_danganronpa多校

JavaScript开发工具WebStorm入门教程:用户界面概况_webstorm界面-程序员宅基地

文章浏览阅读1.7k次。本文给大家讲解WebStorm的界面展示,欢迎下载最新版产品体验!_webstorm界面