Electron开发一个简单记事本

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

5b74af03060d77a1ba4c8bf8c3fb8b8c

1.初始化项目

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

mkdir electron-notepad<br data-filtered="filtered" /><span>cd</span> electron-notepad<br data-filtered="filtered" />npm init -y<br data-filtered="filtered" />

2. 安装Electron

安装Electron作为项目的依赖：

npm install electron --save-dev<br data-filtered="filtered" />

3. 创建主进程文件

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

<span>const</span> { app, BrowserWindow } = <span>require</span>(<span>'electron'</span>);<br data-filtered="filtered" /><br data-filtered="filtered" /><span>function createWindow () </span>{<br data-filtered="filtered" />  <span>// 创建浏览器窗口</span><br data-filtered="filtered" />  <span>let</span> win = <span>new</span> BrowserWindow({<br data-filtered="filtered" />    <span>width</span>: <span>800</span>,<br data-filtered="filtered" />    <span>height</span>: <span>600</span>,<br data-filtered="filtered" />    <span>webPreferences</span>: {<br data-filtered="filtered" />      <span>nodeIntegration</span>: <span>true</span><br data-filtered="filtered" />    }<br data-filtered="filtered" />  });<br data-filtered="filtered" /><br data-filtered="filtered" />  <span>// 加载index.html文件</span><br data-filtered="filtered" />  win.loadFile(<span>'index.html'</span>);<br data-filtered="filtered" />}<br data-filtered="filtered" /><br data-filtered="filtered" />app.on(<span>'ready'</span>, createWindow);<br data-filtered="filtered" />

4. 创建HTML文件

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

<span><!DOCTYPE html></span><br data-filtered="filtered" /><span><html></span><br data-filtered="filtered" /><span><head></span><br data-filtered="filtered" />  <span><title></span>Electron Notepad<span></title></span><br data-filtered="filtered" /><span></head></span><br data-filtered="filtered" /><span><body></span><br data-filtered="filtered" />  <span><textarea id="notepad" style="width: 100%; height: 90%;"></span><span></textarea></span><br data-filtered="filtered" />  <span><br></span><br data-filtered="filtered" />  <span><button onclick="save()"></span>保存<span></button></span><br data-filtered="filtered" />  <span><button onclick="load()"></span>打开<span></button></span><br data-filtered="filtered" />  <span><script></span><span><br data-filtered="filtered" />    const { ipcRenderer } = require('electron');<br data-filtered="filtered" /><br data-filtered="filtered" />    function save() {<br data-filtered="filtered" />      let text = document.getElementById('notepad').value;<br data-filtered="filtered" />      ipcRenderer.send('save-text', text);<br data-filtered="filtered" />    }<br data-filtered="filtered" /><br data-filtered="filtered" />    function load() {<br data-filtered="filtered" />      ipcRenderer.send('load-text');<br data-filtered="filtered" />    }<br data-filtered="filtered" /><br data-filtered="filtered" />    ipcRenderer.on('received-text', (event, text) => {<br data-filtered="filtered" />      document.getElementById('notepad').value = text;<br data-filtered="filtered" />    });<br data-filtered="filtered" />  </span><span></script></span><br data-filtered="filtered" /><span></body></span><br data-filtered="filtered" /><span></html></span><br data-filtered="filtered" />

5. 添加IPC通信

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

<span>const</span> { ipcMain } = <span>require</span>(<span>'electron'</span>);<br data-filtered="filtered" /><br data-filtered="filtered" />ipcMain.on(<span>'save-text'</span>, (event, text) => {<br data-filtered="filtered" />  <span>// 这里可以添加保存文件的逻辑</span><br data-filtered="filtered" />  <span>console</span>.log(<span>'Text saved:'</span>, text);<br data-filtered="filtered" />});<br data-filtered="filtered" /><br data-filtered="filtered" />ipcMain.on(<span>'load-text'</span>, (event) => {<br data-filtered="filtered" />  <span>// 这里可以添加加载文件的逻辑</span><br data-filtered="filtered" />  event.reply(<span>'received-text'</span>, <span>'This is loaded text.'</span>);<br data-filtered="filtered" />});<br data-filtered="filtered" />

6. 编译安装包

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

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

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

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

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