【8.Windows桌面应用程序--进制转换器图形化技术选择】

前言

上一篇文章大概把进制转换的思路梳理了一下，明确了数据在计算机中是以二进制存储的，实现了一定范围内的任意进制数据转换为二进制打印。

但是上一篇中出现了两个问题：

1. long double的打印出了问题，用Le格式控制符打印其最大最小值出现错误
2. 负数和浮点数打印二进制没有实现（虽然好像微软计算器也没有实现，而且应该没必要），但是我们还是应该了解一下负数和浮点数在计算机中是怎么存储的

不过本文的重心并不在这里，本文的重心是探讨怎么做出一个界面实现图形化功能，毕竟不能永远在vscode中打印数据，这样太麻烦了，而且不直观。目前打算实现基于windows的桌面应用，后面有需求再慢慢做成跨平台的

省流

那么总结来看，对我来说，我更希望快速就能上手，QT(C++)的方案学习路线比较陡峭，调试比较麻烦，开发效率低，但是长远来看跨平台和高性能是比较重要的。

对于我来说我希望尽快做出效果，因此可能会选择Electron。但是长期来看可以在学QT的过程中顺便温习一下C++,并且有一个完整的集成开发环境，还是可以学习的。

不过Electron的一个应用就要120Mb太大了，有点臃肿，后续我会慢慢使用Qt或者简单的第三方库如EasyX、GTK+来会实现图形化界面。目前为了方便上手还是使用Electron和Web了哈哈哈，发现跑题了。

对于GTK+,可能要等我换个电脑装个Linux系统开发会比较舒服了，我电脑现在就只剩20多G了，使用GTK+的好处就是可以在各个系统中有一致的体验，而且是使用C语言开发的。

那么目前我还是使用Electron和JavaWeb技术来开桌面应用端，C语言实现桌面应用日后学习Qt的时候或者使用嵌入式开发板的时候再学习。

参考微软计算器

微软计算器好像是有个开源项目的，是使用C++写的，但是为了不受他们的思路影响，我们自己先研究一下。

我做这个项目的目的主要还是搭建一个体系，能够做一个直观的应用，后面慢慢地加功能，而不是一直用编辑器。

所以要研究一下他们的图形化界面是怎么做的

我的想法是早期微软应该就有系统应用计算器，那时候估计应该不是用QT这种框架开发的，经过一番搜索也确实如此。

微软开发桌面端应用主要使用C++、C#、C语言，他们在开发Windows应用程序时有一套自己的接口–Win32 API

那我们如果要按照微软的这一套开发生态的话，就要做到以下几点：

• 学会如何使用Windows API 创建和管理窗口、对话框、控件
• 理解事件驱动模型，涉及到消息循环和事件处理，这是Windows应用程序的核心
• 多线程和并发
• 熟悉框架和库如 MFC（Microsoft Foundation Classes）、Qt、WPF（Windows Presentation Foundation）、WinForms 等
• 了解 Windows 操作系统的工作原理，包括进程、线程、内存管理等。
• 熟悉 Microsoft 的官方文档和资源，如 MSDN（Microsoft Developer Network）。

虽说目前我是打算开发一个Windows桌面应用程序，但是我想让这个应用能够跨平台，而不是仅仅局限在Wndows系统，使用跨平台的框架和库有利于我们的长远发展，而且Windows的开发生态据搜集的资料显示不是很适合我。

选择开发框架和库

Windows桌面端(GUI)程序开发方案比较
首先说结论吧 我认为比较适合我的方案是Electron或者QT(C++)以及GTK+，具体原因参考上面的博客和自己的情况来详细说说。

对于我来说，首先就排除使用微软的技术

因为我很不喜欢学太多太杂的东西，之前学JavaWeb也是，一个东西还没搞懂又要用另一个框架，mvc、springboot、node、redis、ajax、vue，真的太多太多，可能对于我这种逻辑学习者来说，是比较难以接受这种一直跳跃式的学习的。还要加强能力。

---

接下来就是考虑使用QT(C/C++)、Electron还是GTK+了

先来看QT

优点

• 封装的好，有集成开发环境，资料多全面
• 可以很快做出好看的界面，QTDesigner
• 跨平台 移动端都可以做

C 语言有什么方便的GUI开发框架

缺点

01-为什么要用Qt开发（Qt跨平台应用开发）
Qt 这么强大为什么火不起来

• 开发效率低，调试麻烦
• 学习路线陡峭
• QT许可政策比较复杂，个人开发者和小企业的费用高昂。

适用领域

• 参考链接
  

GTK+

C 语言有什么方便的GUI开发框架
GTK+ 与 Qt：跨平台 GUI 开发的艰难选择

特点

GTK+是用C语言编写的，但它通过使用语言绑定也支持其他编程语言如python、C++。GTK+的核心优势在于它的跨平台能力和广泛的社区支持。它支持Linux、Windows、macOS等主流操作系统，使得用C语言开发的GUI应用能够在多个平台上运行，而不需要更改底层代码。此外，GTK+背后有一个活跃的社区，为开发者提供数不尽的文档、教程和支持。

相较于Qt，GTK+:

• 开源免费
• 跨平台性更加出色 在Linux、macOS 和 Windows系统上提供一致的用户体验,而Qt不一定
• GTK+ 拥有一个久经考验且庞大的生态系统，拥有丰富的文档、教程和示例。这使得开发人员可以轻松地找到所需的信息，从而加快开发过程。另一方面，Qt 的生态系统虽然也相当强大，但它不如 GTK+ 那么成熟。然而，Qt 社区非常活跃，并不断开发新的资源来支持开发人员。
• GTK+ 的控件集被认为更加全面，为更广泛的用例提供了支持。Qt 的界面设计工具包更加现代化，提供直观的拖放式界面。这可以简化 UI 开发
• 虽然 GTK+ 也支持面向对象编程，但它在灵活性方面不如 Qt。它主要依赖于 C 语言，这可能会限制某些开发人员。 Qt 以其灵活性而闻名，提供面向对象的设计，便于自定义和扩展。它还支持多种编程语言，包括 C++、Python 和 JavaScript。

Electron框架

介绍

Electron 是一个使用 Web 技术（HTML、CSS 和 JavaScript）构建跨平台桌面应用程序的开源库。它通过结合 Chromium 渲染引擎和 Node.js，使得开发者能够构建出运行在 Windows、MacOS 和 Linux 上的应用。Electron 应用可以访问丰富的 API，实现桌面通知、数据库访问、文件系统操作等。

要开始使用 Electron 开发应用，需要安装 Node.js 环境，然后可以通过 npm 或者 yarn 安装 Electron。创建 Electron 应用的基本步骤包括初始化 npm 项目、安装 Electron 作为开发依赖、设置入口脚本、创建窗口并加载 HTML 页面。

在开发过程中，可能会遇到需要优化性能、处理进程间通信、代码组织等问题。Electron 社区提供了丰富的资源和工具，如 Electron Fiddle、Electron Forge、Electron 快速启动指南等，帮助你快速搭建和测试 Electron 应用。

Chromium 内核：Electron 基于 Chromium 内核，而 Chromium 内核是很多移动浏览器（如 Chrome）的基础。

Chromium简介：

• Chromium是一个开源项目，由Google主导开发，它是一个用于构建网页浏览器的框架。Chromium项目提供了一个基础的浏览器平台，包括了网页渲染引擎Blink、V8 JavaScript引擎等核心组件。

• Google Chrome是基于Chromium项目开发的网页浏览器，它使用了Chromium的大部分源代码，但添加了Google自己的专有代码和功能，如同步服务、Google账号集成等。Chrome是面向普通用户的浏览器，提供了用户友好的界面和额外的安全特性。

简而言之，Chrome是Chromium的一个分支，包含了Chromium的核心功能，并添加了Google的专有特性和服务。其他一些第三方浏览器，如Opera和Microsoft Edge，也使用Chromium作为其浏览器的基础。
参考文章

发展历史

参考文章

应用案例

优点

科学和工程应用：Electron 可以用于开发科学计算、数据分析和工程模拟软件。

自动化和脚本工具：Electron 可以用来创建自动化工具和脚本编辑器，这些工具可以与操作系统和其他应用程序交互。

复杂的用户界面：如果你需要构建具有复杂用户界面的应用程序，Electron 提供了丰富的 Web 技术（HTML、CSS 和 JavaScript）来实现这些界面。

桌面集成：Electron 应用程序可以轻松集成桌面功能，如本地文件系统访问、系统托盘图标、通知、剪贴板操作等。

快速原型开发：对于需要快速迭代和原型设计的项目，Electron 提供了快速的开发周期和灵活的测试环境。

Web 技术栈：如果你的团队已经熟悉 Web 技术，Electron 允许你利用这些技能来构建桌面应用程序，而无需学习特定的桌面应用开发语言。

多媒体应用：Electron 支持多种多媒体内容，适合开发视频播放器、音乐播放器、图像编辑器等应用。

数据可视化：Electron 可以用于创建复杂的数据可视化工具，如图表、仪表板和分析工具。

游戏开发：虽然不是传统意义上的游戏引擎，但 Electron 可以用来创建简单的游戏或游戏原型。

开发工具：Electron 常用于开发 IDE（集成开发环境）、代码编辑器、调试工具等开发者工具。

命令行工具：Electron 可以用来创建具有图形用户界面的命令行工具。

企业内部工具：Electron 适合开发只在公司内部使用的定制应用程序，这些应用程序可能需要访问特定的内部系统或数据。
参考文章

缺点

不适合开发移动端

• 性能问题：Electron 应用通常比原生应用消耗更多的资源（CPU、内存等），这在移动设备上可能导致性能问题，如电池消耗快、响应慢等。

• 用户体验：Electron 应用可能无法充分利用移动设备的特定功能（如触摸屏优化、传感器等），导致用户体验不佳。

如果要开发移动应用的话，以下几种方式比较适合

• 原生开发：使用 Swift 或 Objective-C（对于 iOS）和 Kotlin 或 Java（对于 Android）来编写原生应用。这种方法可以提供最好的性能和用户体验，但需要为每个平台单独开发。

• 跨平台移动开发框架：如 React Native、Flutter 或 Xamarin 等，它们允许你使用一套代码库来开发 iOS 和 Android 应用。这些框架提供了接近原生应用的性能和用户体验。

Qt和electron的对比

原理

参考文章

最终总结

那么总结来看，对我来说，我更希望快速就能上手，QT(C++)的方案学习路线比较陡峭，调试比较麻烦，开发效率低，但是长远来看跨平台和高性能是比较重要的。

对于我来说我希望尽快做出效果，因此可能会选择Electron。但是长期来看可以在学QT的过程中顺便温习一下C++,并且有一个完整的集成开发环境，还是可以学习的。

不过Electron的一个应用就要120Mb太大了，有点臃肿，后续我会慢慢使用Qt或者简单的第三方库如EasyX、GTK+来会实现图形化界面。目前为了方便上手还是使用Electron和Web了哈哈哈，发现跑题了。

对于GTK+,可能要等我换个电脑装个Linux系统开发会比较舒服了，我电脑现在就只剩20多G了，使用GTK+的好处就是可以在各个系统中有一致的体验，而且是使用C语言开发的。

那么目前我还是使用Electron和JavaWeb技术来开桌面应用端，C语言实现桌面应用日后学习Qt的时候或者使用嵌入式开发板的时候再学习。

实际开发举例

如何用c语言编写gui的软件
上面这篇文章讲述了各种情况下如何使用C语言开发GUI程序，包括了WinAPI、X Window system（操作系统自带的API）、GTK+、Qt(跨平台的GUI库)、C和python结合(其他编程语言和工具)，以前都是在python代码中调各种包，没想到c语言居然也可以调python

---

不太恰当的例子
使用C语言和Electron开发图形化界面

1. 设置Electron环境

安装Node.js和npm（Node.js的包管理器）。
创建一个新的项目文件夹，并在其中初始化一个新的npm项目：

mkdir decimal-to-binary-app
cd decimal-to-binary-app
npm init -y

安装Electron

npm install --save-dev electron

2. 创建C语言模块
   创建一个C语言文件，编写函数来实现功能，比如十进制转二进制
   编译C语言为动态链接库(DLL)，以便Electron可以调用它

gcc -shared -o decimalToBinary.dll decimalToBinary.c

3. 在Electron中调用c模块

创建一个main.js文件，这是Electron的主进程脚本。
使用ffi库来调用C语言编写的DLL。

main.js

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

// 定义C函数接口
const decimalToBinary = ffi.Library('./decimalToBinary.dll', {
  'decimalToBinary': ['string', ['int']]
});

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

  win.loadFile('index.html');
}

app.on('ready', createWindow);

安装ffi库：

npm install ffi

4. 创建HTML界面
   index.html

<!DOCTYPE html>
<html>
<head>
    <title>Decimal to Binary Converter</title>
</head>
<body>
    <h1>Decimal to Binary Converter</h1>
    <input type="number" id="decimalInput" placeholder="Enter a decimal number">
    <button onclick="convertToBinary()">Convert</button>
    <p>Binary: <span id="binaryOutput"></span></p>

    <script>
        function convertToBinary() {
            const decimal = document.getElementById('decimalInput').value;
            const binary = decimalToBinary(decimal);
            document.getElementById('binaryOutput').innerText = binary;
        }
    </script>
</body>
</html>

5. 运行应用

在项目根目录下创建一个package.json文件，如果还没有的话，添加一个启动脚本。
package.json:

{
  "name": "decimal-to-binary-app",
  "version": "1.0.0",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  },
  "devDependencies": {
    "electron": "^你的Electron版本"
  }
}

运行应用

npm start