0 新建一个Electron项目

  1. 新建文件夹
  2. npm init
  3. 修改 pacakge.json
{  
  "name": "test",  
  "version": "1.0.0",  
  "main": "main.js",  
  "scripts": {  
    "test": "echo \"Error: no test specified\" && exit 1"  },  
  "author": "rainel", // 改这里 
  "license": "ISC",  
  "description": "Hello Electron", // 改这里 
  "devDependencies": {  
    "electron": "^38.1.1"  
  }}
  1. npm i electron -D
    如果无法顺利安装：electron安装报错终极解决办法_npm install electron报错-CSDN博客
  2. 修改 pacakge.json
{  
  "name": "test",  
  "version": "1.0.0",  
  "main": "main.js",  
  "scripts": {  
    "start": "electron .", // 增加了这里
    "test": "echo \"Error: no test specified\" && exit 1"  },  
  "author": "rainel",  
  "license": "ISC",  
  "description": "Hello Electron",  
  "devDependencies": {  
    "electron": "^38.1.1"  
  }}
  1. 根目录下新建一个 main.js
    在根目录的 main.js 文件中写一行代码：
console.log('Hello from Electron 👋')

命令行运行 npm run start 进行测试

写了个html之后……

解决安全警告：（Ctrl + Shift + R开发者模式，Ctrl + R刷新）

<!DOCTYPE html>  
<html lang="en">  
<head>  
  <meta charset="UTF-8">  
  <title>Title</title>  
  <link rel="stylesheet" href="./index.css">  
  <meta http-equiv="Content-Security-Policy" content="default-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data:;">   <!--这里解决aaaaaaaaaaaaaaaaaaaaaaaaa-->
</head>  
<body>  
<h1>欢迎学习Electron</h1>  
</body>  
</html>
管理应用的窗口生命周期
// main.js
app.on('window-all-closed', () => { // 当所有窗口都关闭了
  if (process.platform !== 'darwin') app.quit() // 如果不是mac就退出应用
})

app.on('activate', () => {  // 当窗口被激活的时候
  if (BrowserWindow.getAllWindows().length === 0) createWindow() // 如果当前窗口数量是0，创建窗口
})
配置自动重启
  1. npm i nodemon -D
  2. package.json
{  
  "name": "test",  
  "version": "1.0.0",  
  "main": "main.js",  
  "scripts": {  
    "start": "nodemon --exec electron .",   // 这里aaaaaaaaaaaaaaaaaaaaaaa
    "test": "echo \"Error: no test specified\" && exit 1"  },  
  "author": "rainel",  
  "license": "ISC",  
  "description": "Hello Electron",  
  "devDependencies": {  
    "electron": "^38.1.1",  
    "nodemon": "^3.1.10"  
  }}
  1. nodemon.json
{  
  "ignore": [  
    "node_modules",  
    "dist",  
    ".git",  
    "*.log"  
  ],  
  "restartable": "r",  
  "watch": [  
    "*.*"  
  ],  
  "ext": "html,js,css"  
}
主进程和渲染进程
  • 主进程：main.js
  • 渲染进程：render.js
  • 预加载进程（用于通信）：reload.js
  • 通信：通过预加载脚本（在渲染进程上运行，浏览器环境，但能访问部分Node API）
    • 单向 send 和 on
    • 双向 invoke 和 handle
    • 渲染进程和另一个渲染进程无法直接通信，需要通过主进程进行通信
Built with MDFriday ❤️