1. Electron 桌面应用开发
Electron 是一个基于 Node.js 和 Chromium 的桌面应用程序开发框架，它使开发人员能够使用 Web 技术（HTML、CSS 和 JavaScript）构建跨平台的桌面应用程序。它已经被众多知名公司使用，例如 GitHub、Slack、Microsoft 等等。本文将介绍如何使用 Electron 开发桌面应用程序。
Electron 是一个使用 JavaScript、HTML 和 CSS 构建跨平台的桌面应用程序。它基于 Node.js 和 Chromium，被 Atom 编辑器和许多其他应用程序使用。Electron 兼容 Mac、Windows 和 Linux，可以构建出三个平台的应用程序。
在桌面程序中，使用C#语言可以创建winform和WPF程序，他们2个在Windows中都非常的优秀，还有就是使用QT开发桌面，可以跨平台开发，这三种都是比较“正规”的，而Electron是使用框架开发桌面程序的，还有其他的框架也可以开发桌面程序等等。下面介绍一下Electron开发桌面程序，只要会使用vue，使用Electron也非常的简单。
官网如下：
文档简介 | Electron：https://www.electronjs.org/zh/docs/latest/
1.1. 安装步骤
1.1.1. 安装node.js
使用nvm管理nodejs.
node.js下载地址：https://nodejs.org/en/download/
npm版本如下
npm -v
npm版本如下
npm -v
node版本如下
node -v
1.1.2. 安装electron（主程序）
npm install electron -g
[或者使用淘宝镜像
cnpm install electron -g
1.1.3. 安装electron（打包）
npm install electron-packager -g
&emsp或者使用淘宝镜像
cnpm install electron-packager -g
1.1.4. 判断electron
检查electron是否安装成功，
electron -v
显示版本号则安装成功。
1.2. 新建工程
在官网下载程序demo，https://github.com/electron/electron-quick-start。
本案例环境win10，VisualStudioCode，node，npm
（1）首先创建一个文件夹electronDemo。
（2） 然后进入根目录中， 输入
npm init
• entry point 应为 main.js.
• author 与 description 可为任意值，但对于应用打包是必填项。
（3） 将electron包安装到应用的开发依赖中
这个安装需要等一会儿
cnpm install --save-dev electron
（4） 使用VisualStudioCode打开程序
其实上面的命令也可以在VisualStudioCode的终端中执行
第一个文件就是使用node包，第二和第三都是配置文件，这个和创建vue程序是一样的。
（5）然后创建main.js文件
// main.js
// electron 模块可以用来控制应用的生命周期和创建原生浏览窗口
const { app, BrowserWindow } = require('electron')
const path = require('path')
const createWindow = () => {
// 创建浏览窗口
const mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
preload: path.join(__dirname, 'preload.js')
}
})
// 加载 index.html
mainWindow.loadFile('index.html')
// 打开开发工具
// mainWindow.webContents.openDevTools()
}
// 这段程序将会在 Electron 结束初始化
// 和创建浏览器窗口的时候调用
// 部分 API 在 ready 事件触发后才能使用。
app.whenReady().then(() => {
createWindow()
app.on('activate', () => {
// 在 macOS 系统内, 如果没有已开启的应用窗口
// 点击托盘图标时通常会重新创建一个新窗口
if (BrowserWindow.getAllWindows().length === 0) createWindow()
})
})
// 除了 macOS 外，当所有窗口都被关闭的时候退出程序。 因此, 通常
// 对应用程序和它们的菜单栏来说应该时刻保持激活状态,
// 直到用户使用 Cmd + Q 明确退出
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') app.quit()
})
// 在当前文件中你可以引入所有的主进程代码
// 也可以拆分成几个文件，然后用 require 导入。
（6） 再创建index.html
<!--index.html-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
<title>你好!</title>
</head>
<body>
<h1>你好!故里2130</h1>
我们正在使用 Node.js <span id="node-version"></span>,
Chromium <span id="chrome-version"></span>,
和 Electron <span id="electron-version"></span>.
<！-- 您也可以此进程中运行其他文件 -->
<script src="./renderer.js"></script>
</body>
</html>
（7） 创建preload.js
// preload.js
// 所有的 Node.js API接口 都可以在 preload 进程中被调用.
// 它拥有与Chrome扩展一样的沙盒。
window.addEventListener('DOMContentLoaded', () => {
const replaceText = (selector, text) => {
const element = document.getElementById(selector)
if (element) element.innerText = text
}
for (const dependency of ['chrome', 'node', 'electron']) {
replaceText(`${dependency}-version`, process.versions[dependency])
}
})
（8） 最后的项目结构如下
并且在红色的部分增加命令，表示启动的时候访问electron。
"start": "electron .",
（9） 然后在终端输入
npm run start
（10） 效果
和正常的winform和wpf布局是一样的。
（11） 对开发的程序，进行打包成exe
cnpm install --save-dev @electron-forge/cli
再输入
npx electron-forge import
再输入
npm run make
.（12）运行结果
1.3. 运行示例Demo
1.3.1. 运行一个程序
在官网下载程序demo，https://github.com/electron/electron-quick-start
在cmd下进入该项目路径，输入
npm install // 或者 yarn install
npm start
即可运行该项目
1.3.2. 打包项目
electron-packager . bobo --out ../app
electron-packager .(exe名字) --out ../app（文件夹）
1.4. uniapp打包PC桌面应用exe
随着跨平台开发的需求日益增长，UniApp 成为了开发者们的首选之一。通过 UniApp，你可以使用 Vue.js 的语法结构和组件系统来构建原生应用、Web 应用甚至是桌面应用。本文将详细介绍如何使用 UniApp 将你的项目打包成 Windows 桌面端的 exe 文件。
全局安装electron插件在全面章节已经介绍，下面介绍uniapp配置。
1.4.1.前提条件
（1）已安装 Node.js (建议使用 LTS 版本)
（2）已安装 Git (可选)
（3）已安装 HBuilderX 或其他支持 UniApp 的 IDE
（4）已安装 uni-app CLI (npm install -g @dcloudio/uni-app)
1.4.1. 创建或准备 UniApp 项目
如果你还没有 UniApp 项目，可以使用 HBuilderX 或者命令行创建一个新的项目：
1.4.2. 安装 Electron 相关插件
在项目根目录下打开终端，安装 uni-app 的 Electron 插件：
cnpm install --save-dev @dcloudio/uni-electron
cnpm install electron -g // 安装electron（主程序）
cnpm install electron-packager -g // 安装electron-packager（打包用）
1.4.3. uniapp的manifest.json修改
（1）运行的基础路径修改为：./ 不然打包出来会出现白屏，读取不到，因为打包出来的h5默认加载地址为/static/
（2）去掉启用https协议: 不然会出现网络无法加载，去掉https不影响你请求后端的https协议。
1.4.3. H5文件夹下创建package.json
1.4.4. H5打包
发行-网站-PC Web或手机H5(仅适用于uni-app)(H)
1.4.5. H5文件夹下新建package.json
npm init
1.4.6. H5文件夹下新建main.js
如果你的网页首页的文件名不是 “index.html”，那么请在 main.js 中将其中的 ‘index.html’ 修改为你的网页首页名。
const {app, BrowserWindow} = require('electron')
const path = require('path')
const url = require('url')
// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the JavaScript object is garbage collected.
let win
function createWindow () {
// Create the browser window.
win = new BrowserWindow({width: 400, height: 700})
// and load the index.html of the app.
win.loadURL(url.format({
pathname: path.join(__dirname, 'index.html'),
protocol: 'file:',
slashes: true
}))
// Open the DevTools.
// win.webContents.openDevTools()
// Emitted when the window is closed.
win.on('closed', () => {
// Dereference the window object, usually you would store windows
// in an array if your app supports multi windows, this is the time
// when you should delete the corresponding element.
win = null
})
}
// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on('ready', createWindow)
// Quit when all windows are closed.
app.on('window-all-closed', () => {
// On macOS it is common for applications and their menu bar
// to stay active until the user quits explicitly with Cmd + Q
if (process.platform !== 'darwin') {
app.quit()
}
})
app.on('activate', () => {
// On macOS it's common to re-create a window in the app when the
// dock icon is clicked and there are no other windows open.
if (win === null) {
createWindow()
}
})
// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and require them here.
1.4.7. 打包
cmd命令行进入H5目录，输入打包命令
操作如下图（示例）：
electron-packager . MyApp --win --out MyApp --arch=x64 --electron-version 33.2.1 --overwrite --ignore=node_modules
1.4.8. 打包命令
cmd命令行进入H5目录，输入打包命令
electron-packager . 测试系统 --platform=win32 --arch=x64 --icon=computer.ico --out=./out --asar --app-version=1.0.0 --overwrite --ignore=node_modules --electron-version 33.2.1
参数说明：
测试系统 ：你将要生成的exe文件的名称
–platform=win32：确定了你要构建哪个平台的应用,可取的值有 darwin, linux, mas, win32
–arch=x64：决定了使用 x86 还是 x64 还是两个架构都用
–icon=自定义.ico：自定义设置应用图标
–out=./out：指定打包文件输出的文件夹位置,当前指定的为项目目录下的out文件夹
–asar：该参数可以不加，如果加上，打包之后应用的源码会以.asar格式存在
–app-version=1.0.0：生成应用的版本号
–overwrite：覆盖原有的build,让新生成的包覆盖原来的包
–ignore=node_modules：如果加上该参数，项目里node_modules模块不会被打包进去
–electron-version 8.2.1：指定当前要构建的electron的电子版本（不带"v"）,需要和当前电脑安装的版本一致。
查看electron版本
1.4.9. 执行以上打包命令时出现以下报错
问题：执行以上打包命令时出现以下报错：
connect ETIMEDOUT 20.205.243.166:443
解决办法：
ping GitHub.com
如果能ping通，继续以下操作
1.4.10. 打包慢，无反应
（1）更换为阿里镜像源 命令行下输入
npm config set ELECTRON_MIRROR http://npm.taobao.org/mirrors/electron/
（2）修改环境变量
我的电脑->右键->属性->高级系统设置->高级->环境变量->新建
2. 桌面软件开发框架 Electron、Qt、WPF 和 WinForms比较
2.1. Electron
Electron 是一个基于 Web 技术的跨平台桌面应用程序开发Q框架。它使用 HTML、CSS 和 javaScript四 来构建应用程序界面，并借助Chromium 渲染引擎只提供强大的页面渲染能力。Electron 的主要特点包括:
（1）跨平台:Electron 可以在 Windows、macOS 和 Linux 等多个主流操作系统上运行，为开发者提供了广泛的目标平台选择。
（2）Web 技术栈:Electron 使用 Web 技术栈进行开发，开发者可以利用熟悉的前端工具和框架来构建应用程序界面。
（3）大量的开发者社区和资源:由于 Electron 的流行和活跃的社区，开发者可以轻松获得丰富的插件、工具和文档资源。
（4）适用场景:Electron 适用于构建跨平台、具有丰富界面和多媒体功能的桌面应用程序，如通讯工具、编辑器和音乐播放器等。
2.2. Qt
Qt 是一个跨平台的 C++ 应用程序开发框架，被广泛应用于桌面软件开发Q。Qt 的特点包括:
（1）跨平台:Qt 可以在多个主流操作系统上运行，并且提供了一致的 AP| 接口，使得开发者可以轻松实现跨平台的应用程序。（2）强大的 GU| 组件和工具:Qt 提供了丰富的 GU|组件和工具，开发者可以快速构建具有吸引力和交互性的用户界面。
（3）高性能和可扩展性:Qt 通过 C++ 的底层支持，提供了高性能和可扩展性，适用于开发复杂的桌面应用程序。
（4）适用场景:Qt适用于构建要求高性能、可扩展性和定制性的桌面应用程序，如图形设计工具、CAD 软件和游戏编辑器等。
2.3. WPF(Windows@ Presentation Foundation)
WPF 是微软提供的用于开发 Windows 平台的桌面应用程序的框架。WPF 的特点包括:
（1）强大的数据绑定和样式系统:WPF 提供了强大的数据绑定和样式系统，使开发者能够轻松实现复杂的数据展示和界面定制。（2）XAML定义界面:WPF 使用 XAML(可扩展应用程序标记语言)来定义用户界面，使界面设计与代码逻辑分离，提高开发效率。
（3）内置的动画和多媒体支持:WPF 内置了丰富的动画和多媒体支持，使得开发者可以轻松实现交互式和视觉吸引力的应用程序。
（4）适用场景:WPF 适用于开发要求丰富、具有复杂数据展示和交互的 Windows 平台应用程序，如企业级数据管理系统、可视化工具和教育软件等。
2.4. WinForms
WinForms 是微软提供的用于开发 Windows 平台的桌面应用程序的框架，使用 C#或 Visualp. Basic.NET 进行开发。WinForms 的特点包括:
（1）快速开发:WinForms 提供了丰富的预定义控件和事件模型，使开发者能够快速构建 Windows 应用程序，并通过可视化设计工具进行界面布局。
（2）简单易学:使用 C#或 VB.NET进行开发，结合直观的设计工具，使得初学者能够轻松上手并快速开发应用程序。
（3）良好的兼容性:WinForms 应用程序可以充分利用已有的 Windows 平台资源和功能，并与其他 .NET 技术集成。
（4）适用场景:WinForms 适用于需要快速开发简单界面和利用现有 Windows 平台资源的应用程序，如内部工具、小型业务应用和.个人应用。
2.5. 总结
基于 Electron、Qt、WPF 和 WinForms 开发的桌面软件Q的特点和适用场景。
Electron 适合跨平台的 Web 技术栈应用程序，Qt适用于高性能和可扩展性要求的应用程序，WPE 适用于复杂的 Windows 平台应用程序，而 Winfomms 适合快速开发简单界面的应用程序。开发者可以根据自己的需求和技术栈选择合适的框架，以提高开发效率和应用程序质量。