Electron开发一个简单记事本

1.初始化项目

首先，你需要创建一个新的项目目录并初始化它：

mkdir electron-notepad
cd electron-notepad
npm init -y

2. 安装Electron

安装Electron作为项目的依赖：

npm install electron --save-dev

3. 创建主进程文件

在项目根目录下创建main.js，这将是Electron的主进程文件：

const { app, BrowserWindow } = require('electron');

function createWindow () {
  // 创建浏览器窗口
  let win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  });

  // 加载index.html文件
  win.loadFile('index.html');
}

app.on('ready', createWindow);

4. 创建HTML文件

在项目根目录下创建index.html，这将是记事本的界面：

  


  
  

  保存
  打开
  

5. 添加IPC通信

在main.js中添加IPC通信，以便在Electron的主进程和渲染进程之间传递数据：

const { ipcMain } = require('electron');

ipcMain.on('save-text', (event, text) => {
  // 这里可以添加保存文件的逻辑
  console.log('Text saved:', text);
});

ipcMain.on('load-text', (event) => {
  // 这里可以添加加载文件的逻辑
  event.reply('received-text', 'This is loaded text.');
});

6. 编译安装包

要编译Electron应用程序为Windows、macOS或Linux的安装包，你可以使用electron-packager或electron-builder。以下是使用electron-builder的步骤：

1. 安装electron-builder：

npm install electron-builder --save-dev

2. 在package.json中添加构建脚本：

"scripts": {
  "start": "electron .",
  "dist": "electron-builder"
}

3. 运行构建命令：

• 对于Windows：

npm run dist --win

• 对于macOS：

npm run dist --mac

• 对于Linux：

npm run dist --linux

请注意，这个示例是一个基础的起点，实际的应用程序可能需要更多的错误处理、文件路径管理和其他功能。此外，Electron和相关工具的API可能会随时间更新，所以请确保查看最新的文档和指南。