6步!!!用 Electron开发一个记事本
只需要6步, 用 Electron 开发一个记事本, 带打开,编辑,保存 功能。可以很方便编译成Windows、macOS或Linux的安装包
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，这将是记事本的界面：
<!DOCTYPE html>
<html>
<head>
<title>Electron Notepad</title>
</head>
<body>
<textarea id="notepad" style="width: 100%; height: 90%;"></textarea>
<br>
<button onclick="save()">保存</button>
<button onclick="load()">打开</button>
<script>
const { ipcRenderer } = require('electron');
function save() {
let text = document.getElementById('notepad').value;
ipcRenderer.send('save-text', text);
}
function load() {
ipcRenderer.send('load-text');
}
ipcRenderer.on('received-text', (event, text) => {
document.getElementById('notepad').value = text;
});
</script>
</body>
</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的步骤：
- 安装
electron-builder：
npm install electron-builder --save-dev
- 在
package.json中添加构建脚本：
"scripts": {
"start": "electron .",
"dist": "electron-builder"
}
- 运行构建命令：
- 对于Windows：
npm run dist --win
- 对于macOS：
npm run dist --mac
- 对于Linux：
npm run dist --linux
请注意，这个示例是一个基础的起点，实际的应用程序可能需要更多的错误处理、文件路径管理和其他功能。此外，Electron和相关工具的API可能会随时间更新，所以请确保查看最新的文档和指南。