参见 PPT。
2、Electron 初探 2.1 常见的桌面GUI工具介绍| 名称 | 语音 | 优点 | 缺点 |
|---|---|---|---|
| QT | C++ | 跨平台、性能好、生态好 | 依赖多，程序包大 |
| PyQT | Python | 底层集成度高、易上手 | 授权问题 |
| WPF | C# | 类库丰富、扩展灵活 | 只支持Windows，程序包大 |
| WinForm | C# | 性能好，组件丰富，易上手 | 只支持Windows，UI差 |
| Swing | Java | 基于AWT，组件丰富 | 性能差，UI一般 |
| NW.js | JS | 跨平台性好，界面美观 | 底层交互差、性能差，包大 |
| Electron | JS | 相比NW发展更好 | 底层交互差、性能差，包大 |
| CEF | C++ | 性能好，灵活集成，UI美观 | 占用资源多，包大 |
技术是为业务服务的，选择合适的最重要！
2.2 桌面端设计与开发要点1、UX/UI设计概念
**UX设计：**UX（User Experience）即用户体验，其核心是用户，体验指用户在使用产品以及与产品发生交互时出现的主观感受和需求满足。
UI设计：UI（User Interface）使用者界面，可以说是 UX 设计的一部分，其中重要的图形化或者可视化部分，都是由 UI 设计来完成的。
2、核心原则
简单易用。
3、通用原则
交互简单：上手就会，一看就懂
风格统一：菜单、导航、按钮反馈、颜色、预知提示
认知一致：名词、友好提示、划分信息、突出展示
4、桌面端设计
保持与PC端统一的风格设计与交互设计。
加入定制的菜单与专业操控设计。
减少资源加载。
2.3 初始化项目 + 项目依赖介绍1、Electron 官网
https://www.electronjs.org/
2、初始化一个项目
felixlu electron $ npm init -y
npm i electron -D
3、配置启动脚本
在 package.json 里配置 npm 脚本：
{
"scripts": {
"start": "electron ."
},
}
4、创建入口文件
Electron Demo hello Electron
const { app } = require('electron')
// 主进程
const createWindow = () => {
const win = new BrowserWindow({
width: 800,
height: 600
})
win.loadFile('index.html')
}
app.whenReady().then(createWindow)
