Electron初体验

为什么使用electron

最近准备开发一个国产麒麟系统上的桌面程序，主要完成Linux命令的可视化，而electron作为目前最活跃的跨平台桌面应用程序的框架之一，它可以使用网页技术（如 HTML、CSS 和 JavaScript）来创建桌面应用程序，同时利用 Node.js 的强大能力来访问操作系统底层功能，可以充分利用前端社区与Node.js的各种技术栈实现强大的功能。

与操作系统交互

Electron 的架构主要分为三个核心部分：主进程（Main Process）、渲染进程（Renderer Process） 以及 预加载脚本（Preload Script）。

1. 主进程（Main Process）

• 功能：主进程是 Electron 应用程序的入口点，控制应用程序的生命周期。它运行 Node.js 环境下的 JavaScript 代码，并负责创建和管理所有的渲染进程（即应用的窗口）。

2. 渲染进程（Renderer Process）

• 功能：渲染进程是每个应用窗口的独立进程，它运行在 Chromium 中，并负责显示用户界面（UI）。渲染进程执行的代码是 Web 技术（HTML、CSS、JavaScript）。

3. 预加载脚本（Preload Script）

• 功能：预加载脚本在渲染进程加载网页内容之前执行，运行在隔离的上下文中。它可以通过桥接方式将 Node.js API 暴露给渲染进程，同时仍然保证安全性。

electron实践

命令可视化工具的总体架构如下

后台UI: vue-element-admin

后台Server: Golang

客户端UI: vue-element-admin

客户端操作: node.js

效果图