做淘宝导航网站住房与建设管理局
张小明 2025/12/30 9:44:39
做淘宝导航网站,住房与建设管理局,漳州市城乡建设局网站,软件公司起名大全Electron 教程#xff08;2025 年最新版#xff09;
Electron 是一个使用 JavaScript、HTML 和 CSS 构建跨平台桌面应用的框架。它将 Chromium#xff08;浏览器内核#xff09;和 Node.js 打包在一起#xff0c;让你只需写一套代码#xff0c;就能同时支持 Windows、ma…Electron 教程2025 年最新版Electron 是一个使用JavaScript、HTML 和 CSS构建跨平台桌面应用的框架。它将 Chromium浏览器内核和 Node.js 打包在一起让你只需写一套代码就能同时支持 Windows、macOS 和 Linux。知名应用如 VS Code、Slack、Discord 都是基于 Electron 开发的。当前最新稳定版Electron 30.x2025 年仍在持续更新建议使用最新版以获得安全修复和性能优化。推荐学习资源中文优先官方文档强烈推荐英文版https://www.electronjs.org/docs/latest中文版官方同步翻译https://electron.nodejs.cn/docs/latest/官方教程非常完整从零开始一步步带你创建第一个应用。官方教程目录端到端指南准备工作https://www.electronjs.org/docs/latest/tutorial/tutorial-prerequisites创建第一个应用Hello Worldhttps://www.electronjs.org/docs/latest/tutorial/tutorial-first-app添加功能如菜单、托盘、通知https://www.electronjs.org/docs/latest/tutorial/tutorial-adding-features打包和发布https://www.electronjs.org/docs/latest/tutorial/application-distribution其他优质中文教程w3cschool Electron 中文文档https://www.w3cschool.cn/electronmanual/Electron 中文网https://electron.nodejs.cn/包含大量示例和 API 文档掘金/知乎/博客上的入门文章搜索“Electron 入门”可找到很多实战案例。快速入门一步步创建 Hello World 应用安装前提安装 Node.js推荐最新 LTS 版当前 2025 年建议 Node.js 22下载地址https://nodejs.org/创建项目mkdirmy-electron-appcdmy-electron-appnpminit -ynpminstallelectron --save-dev修改 package.json{name:my-electron-app,version:1.0.0,main:main.js,scripts:{start:electron .}}创建 main.js主进程const{app,BrowserWindow}require(electron);functioncreateWindow(){constwinnewBrowserWindow({width:800,height:600,webPreferences:{nodeIntegration:true,// 允许渲染进程使用 Node.js新版建议使用 preload 更安全contextIsolation:false// 新版默认开启初学可先关闭}});win.loadFile(index.html);}app.whenReady().then(createWindow);app.on(window-all-closed,(){if(process.platform!darwin)app.quit();});app.on(activate,(){if(BrowserWindow.getAllWindows().length0)createWindow();});创建 index.html渲染进程!DOCTYPEhtmlhtmlheadmetacharsetUTF-8titleHello Electron!/title/headbodyh1Hello World!/h1p我们正在使用 Node.jsspanidnode-version/span、Chromiumspanidchrome-version/span和 Electronspanidelectron-version/span。/pscriptdocument.getElementById(node-version).innerTextprocess.versions.node;document.getElementById(chrome-version).innerTextprocess.versions.chrome;document.getElementById(electron-version).innerTextprocess.versions.electron;/script/body/html运行应用npmstart你会看到一个桌面窗口显示“Hello World!”和版本信息。进阶建议学习主进程 vs 渲染进程IPC 通信使用preload.js实现安全通信新版推荐打包工具推荐Electron Forgenpm install --save-dev electron-forge/cli或electron-builder框架集成Vue Electron、React Electron 等electron-vite、electron-vue 等脚手架常见问题应用体积大这是 Electron 的通病自带 Chromium但对大多数应用来说完全可以接受。想快速上手可以直接用官方的 Electron Fiddlehttps://www.electronjs.org/fiddle在线实验代码。跟着官方教程走一遍你就能快速上手 Electron 开发桌面应用了有具体问题如打包、集成 React/Vue、性能优化等随时问我