Electron使用HTML、CSS、JavaScript构建跨平台桌面应用，结合Chromium与Node.js，支持主渲染进程通信，通过electron-builder打包，适合前端开发者快速开发工具类应用。
Electron 让你用 HTML、CSS 和 JavaScript 构建跨平台的桌面应用，支持 Windows、macOS 和 Linux。它结合了 Chromium 渲染界面和 Node.js 提供系统底层能力，适合前端开发者快速上手桌面开发。
搭建基础项目结构
创建一个新文件夹，初始化 npm 项目：
npm init -ynpm install electron –save-dev
在项目根目录创建 main.js，这是 Electron 的主进程入口：
const { app, BrowserWindow } = require(‘electron’)function createWindow () { const win = new BrowserWindow({ width: 800, height: 600, webPreferences: { nodeIntegration: false } }) win.loadFile(‘index.html’)}app.whenReady().then(() => { createWindow() app.on(‘activate’, () => { if (BrowserWindow.getAllWindows().length === 0) createWindow() })})app.on(‘window-all-closed’, () => { if (process.platform !== ‘darwin’) app.quit()})
再创建一个简单的 index.html 页面作为界面：
立即学习“Java免费学习笔记（深入）”；
欢迎使用 Electron
这是你的第一个桌面应用。
在 package.json 中添加启动命令：
“scripts”: { “start”: “electron main.js”}
主进程与渲染进程通信
Electron 分为主进程（控制窗口、菜单等）和渲染进程（页面逻辑）。它们通过 ipcMain 和 ipcRenderer 通信。
例如，在渲染进程中发送消息：
const { ipcRenderer } = require(‘electron’)ipcRenderer.send(‘request-data’, ‘获取数据’)
在主进程中监听并响应：
const { ipcMain } = require(‘electron’)ipcMain.on(‘request-data’, (event, arg) => { event.reply(‘response-data’, ‘这是返回的数据’)})
渲染进程监听回复：
ipcRenderer.on(‘response-data’, (event, data) => { console.log(data)})
打包成可执行文件
开发完成后，使用 electron-builder 或 electron-packager 打包应用。
安装 electron-builder：
npm install electron-builder –save-dev
在 package.json 添加构建配置：
“build”: { “productName”: “MyApp”, “appId”: “com.example.myapp”, “win”: { “target”: “nsis” }, “mac”: { “target”: “dmg” }, “linux”: { “target”: “AppImage” }},”scripts”: { “dist”: “electron-builder”}
运行打包命令：
npm run dist
输出目录会生成对应平台的安装包或可执行文件。
常见注意事项
安全方面避免启用 nodeIntegration 在不受信任的内容中，防止远程代码执行。
性能优化建议：控制窗口数量、减少主进程负担、合理使用后台进程。
调试时可用打开 DevTools 查看渲染进程，主进程可通过 VS Code 断点调试。
基本上就这些。Electron 上手快，生态成熟，适合做工具类、管理类或跨端一致的桌面应用。
以上就是JavaScript桌面应用Electron开发的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1534571.html
微信扫一扫 
支付宝扫一扫 
