Electron开发一个简单记事本

漏网的鱼 • • Electron, 代码分享 • 280 阅读

5b74af03060d77a1ba4c8bf8c3fb8b8c

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的步骤：

  1. 安装electron-builder：
npm install electron-builder --save-dev
  1. 在package.json中添加构建脚本：
"scripts": {
  "start": "electron .",
  "dist": "electron-builder"
}
  1. 运行构建命令：
  • 对于Windows：
npm run dist --win
  • 对于macOS：
npm run dist --mac
  • 对于Linux：
npm run dist --linux

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

版权声明：
作者：漏网的鱼
链接：https://www.csev.cn/share/code/20240716399.html
来源：彩色动力-测试分享
版权声明：本文欢迎任何形式转载，转载时完整保留本声明信息（包含原文链接、原文出处、原文作者、版权声明）即可。本文后续所有修改都会第一时间在原始地址更新。
THE END
免责声明
根据我国《计算机软件保护条例》第十七条规定：“为了学习和研究软件内含的设计思想和原理，通过安装、显示、传输或者存储软件等方式使用软件的，可以不经软件著作权人许可，不向其支付报酬。本站资源仅供个人学习交流，请于下载后 24 小时内删除，不允许用于商业用途，否则法律问题自行承担。
分享
二维码
打赏
< <上一篇
下一篇>>
文章目录
关闭
目 录
微信扫一扫关注蓝威网官方公众号

微信扫一扫关注蓝威网官方公众号