步趋官网的快速入门

用npm和官方脚手架创建electron项目

npm install --save-dev electron

在 package.json 添加 start 命令（开发模式运行）

{
   "scripts":
   {
       "start": "electron ."
   }
}

在根目录新建入口文件 main.js

main.js:

const { app, BrowserWindow } = require('electron')
//导入 app 和窗口模块
//在 app 启动时创建一个窗口
app.whenReady().then(() => {
   const win = new BrowserWindow({
       width: 800,
       height: 600
  })
   win.loadFile('index.html')
})
//app.whenReady().then() 基本等于 app.on("ready",)

安装 Electron Forge 用于打包

npm install --save-dev @electron-forge/cli
npx electron-forge import

运行 npm run make

附录：

electron 中，每个窗口都有单独的进程

插入预加载脚本，可以访问主进程的nodejs环境和渲染器进程（window，document）

const win = new BrowserWindow({
   width: 800,
   height: 600,
   webPreferences: {
       preload: path.join(__dirname, 'preload.js')
   }
}

虽然能访问 window，但实际上与渲染器的 window 是隔离的，不能直接修改，应用 contextBridge 和 ipcRenderer 连接和通信。

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()
})