一、安装Node.js和cnpm
参考：https://www.electronjs.org/zh/docs/latest/tutorial/quick-start
1、安装node.js
https://nodejs.org/zh-cn，安装后可在命令行中用node -v查看版本，如显示版本则安装成功
2、安装cnpm来代替npm，cnpm将从国内镜像中下载后续软件包
https://www.npmmirror.com/
npm install -g cnpm --registry=https://registry.npmmirror.com
二、建应用程序目录和安装electron
1、建应用程序目录
比如：CountdownTimer
2、在CountdownTimer目录下命令行运行npm init生成package.json文件，过程中指定程序入口为main.js
3、在项目CountdownTimer目录下命令行运行cnpm install --save-dev electron生成程序的依赖目录node_modules
三、打包应用程序
1、安装打包工具
项目目录中运行命令：cnpm install --save-dev electron-builder
package.json将多一项配置，如下图：
2、配置package.json
3、运行打包命令
windows开发平台就打windows用的包，linux和mac同样的道理，不然很麻烦，参见：https://blog.csdn.net/qq_41000974/article/details/139246413
npm run build
打包过程中会下载一些文件，下载很慢，解决方案参考：https://blog.csdn.net/IT_dabai/article/details/136842520
比如：
下载https://registry.npmmirror.com/-/binary/electron/v31.3.1/electron-v31.3.1-win32-x64.zip后，放到C:\Users\<用户名>\AppData\Local\electron\Cache下面后，再打包：
发现还要下载其他包，按前面的方法继续手动下载并放置好，再打包。
winCodeSign.zip解压后放到C:\Users\<用户名>\AppData\Local\electron-builder\Cache\winCodeSign\下面
nsis-3.0.4.1.7z和nsis-resources-3.4.1.7z解压后放到C:\Users\<用户名>\AppData\Local\electron-builder\Cache\nsis\下面
成功打包后，在项目目录下的dist目录下将生成相应的程序文件
参考自：https://blog.csdn.net/weixin_42357472/article/details/140648621
四、主进程和渲染器进程
每个 Electron 应用都有一个单一的主进程，作为应用程序的入口点。 主进程在 Node.js 环境中运行，这意味着它具有 require 模块和使用所有 Node.js API 的能力。
为了解决这个问题，Chrome 团队决定让每个标签页在自己的进程中渲染， 从而限制了一个网页上的有误或恶意代码可能导致的对整个应用程序造成的伤害。 然后用单个浏览器进程控制这些标签页进程，以及整个应用程序的生命周期。 下方来自 Chrome 漫画 的图表可视化了此模型：
Electron 应用程序的结构非常相似。 作为应用开发者，你将控制两种类型的进程：主进程 和 渲染器进程。
每个 Electron 应用都有一个单一的主进程，作为应用程序的入口点。 主进程在 Node.js 环境中运行，这意味着它具有 require 模块和使用所有 Node.js API 的能力。
主进程的主要目的是使用 BrowserWindow 模块创建和管理应用程序窗口。
BrowserWindow 类的每个实例创建一个应用程序窗口，且在单独的渲染器进程中加载一个网页。 您可从主进程用 window 的 webContent 对象与网页内容进行交互。
每个 Electron 应用都会为每个打开的 BrowserWindow ( 与每个网页嵌入 ) 生成一个单独的渲染器进程。 洽如其名，渲染器负责 渲染 网页内容。 所以实际上，运行于渲染器进程中的代码是须遵照网页标准的 (至少就目前使用的 Chromium 而言是如此) 。
五、app和BrowserWindow模块
app 模块，它控制应用程序的事件生命周期。app的事件、方法和属性参见：https://www.electronjs.org/zh/docs/latest/api/app
主进程通过 app 模块来控制您应用程序的生命周期。 This module provides a large set of events and methods that you can use to add custom application behavior (for instance, programmatically quitting your application, modifying the application dock, or showing an About panel).
BrowserWindow 模块，它创建和管理应用程序 窗口。
六、javascript最新标准ES6
箭头函数 =>
function f(a,b) { } 变成
(a,b)=>{}
浙公网安备 33010602011771号