tokenpocket最新下载地址|electron

tokenpocket最新下载地址|electron

作者： tokenpocket最新下载地址
2024-03-09 20:32:49

简介 | Electron

简介 | Electron

跳转到主内容Electron文档应用开发接口（API）博客工具Electron ForgeElectron Fiddle社区治理案例展示资源版本发布GitHub中文EnglishDeutschEspañolFrançais日本語PortuguêsРусский中文搜索开始上手简介快速入门安装指导教程Electron 中的流程最佳实践示例开发分发检测和调试引用参与贡献开始上手简介在本页面Electron是什么？Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。 嵌入 Chromium 和 Node.js 到 二进制的 Electron 允许您保持一个 JavaScript 代码代码库并创建 在Windows上运行的跨平台应用 macOS和Linux——不需要本地开发 经验。入门指南​我们推荐您从 教程开始， 在开发Electron应用程序并将其分发给用户的过程中向您提供指导。 示例 与 API 文档 也是浏览并发现新事物的好地方。Electron Fiddle 运行实例​Electron Fiddle 是由 Electron 开发并由其维护者支持的沙盒程序。 我们强烈建议将其作为一个学习工具来安装，以便在开发过程中对Electron的api进行实验或对特性进行原型化。Fiddle 已经完美的集成到我们的帮助文档之中。 当你浏览我们教程中的例子，你会发现有个「Open In Electron Fiddle」按钮在代码示例中。 如果你已经安装了 Fiddle，「Open In Electron Fiddle」按钮会打开一个 fiddle.electronjs.org 链接并加载示例。

fiddle docs/latest/fiddles/quick-start文档包含哪些内容？​所有官方文档都可以在侧边栏中查阅。 以下是几个类别，以及相应的介绍：教程：如何创建并发布您的第一个 Electron 程序。Electron 进程：对 Electron 中的进程，以及如何使用它们的参考。最佳实践：在开发 Electron 程序时需要留意的一些细节。示例代码: 有了示例代码稍微改一下就可以放入 Electron 应用中.开发：有关开发的其它一些指导。分发：学习如何向终端用户分发您的程序。检测和调试: 如何调试 JavaScript, 如何编写测试代码, 还有就是如何使用其它工具快速创建 Electron 应用.引用: 版本信息相关说明参与贡献: 编译 Electron 并尝试参与贡献. 我们正在尽力让这一步骤更加简单。寻求帮助​还是有疑问？ 请参考一下例子开发过程中如果你需要帮助，我们的 Discord 英文社区 将是绝佳讨论的地方。或前往我们的 Discord 中文社区。如果在开发过程中遇到 electron package里的疑难杂症，你可以去 GitHub issue tracker 查看是否有人已经遇到相同的问题。 如果你很幸运的找到 bug，欢迎提交 issue 到 GitHub。编辑此页面下一个快速入门入门指南Electron Fiddle 运行实例文档包含哪些内容？寻求帮助文档入门指南API 参考清单性能安全工具Electron ForgeElectron Fiddle社区治理资源DiscordTwitterMastodonStack Overflow更多GitHubOpen Collective版权所有 © 2023 OpenJS 基金会和 Electron 贡献者们Hosting and infrastructure graciously provided by

快速入门 | Electron

快速入门 | Electron

跳转到主内容Electron文档应用开发接口（API）博客工具Electron ForgeElectron Fiddle社区治理案例展示资源版本发布GitHub中文EnglishDeutschEspañolFrançais日本語PortuguêsРусский中文搜索开始上手简介快速入门安装指导教程Electron 中的流程最佳实践示例开发分发检测和调试引用参与贡献开始上手快速入门在本页面快速入门本指南将会通过使用Electron创建一个极简的 Hello World 应用一步步的带你了解，该应用与electron/electron-quick-start类似。通过这个教程，你的app将会打开一个浏览器窗口，来展示包含当前正在运行的 Chromium, Node.js与 Electronweb等版本信息的web界面基本要求​在使用Electron进行开发之前，您需要安装 Node.js。 我们建议您使用最新的LTS版本。请使用为你平台预构建的 Node.js 安装器来进行安装， 否则，您可能会遇到与不同开发工具不兼容的问题。要检查 Node.js 是否正确安装，请在您的终端输入以下命令：node -vnpm -v这两个命令应输出了 Node.js 和 npm 的版本信息。注意 因为 Electron 将 Node.js 嵌入到其二进制文件中，你应用运行时的 Node.js 版本与你系统中运行的 Node.js 版本无关。创建你的应用程序​使用脚手架创建​Electron 应用程序遵循与其他 Node.js 项目相同的结构。 首先创建一个文件夹并初始化 npm 包。npmYarnmkdir my-electron-app && cd my-electron-appnpm initmkdir my-electron-app && cd my-electron-appyarn initinit初始化命令会提示您在项目初始化配置中设置一些值 为本教程的目的，有几条规则需要遵循：entry point 应为 main.js.author 与 description 可为任意值，但对于应用打包是必填项。你的 package.json 文件应该像这样：{ "name": "my-electron-app", "version": "1.0.0", "description": "Hello World!", "main": "main.js", "author": "Jane Doe", "license": "MIT"}然后，将 electron 包安装到应用的开发依赖中。npmYarnnpm install --save-dev electronyarn add --dev electron注意：如果您在安装 Electron 时遇到任何问题，请 参见 高级安装 指南。最后，您希望能够执行 Electron 如下所示，在您的 package.json配置文件中的scripts字段下增加一条start命令：{ "scripts": { "start": "electron ." }}start命令能让您在开发模式下打开您的应用npmYarnnpm startyarn start注意：此脚本将告诉 Electron 在您项目根目录运行 此时，您的应用将立即抛出一个错误提示您它无法找到要运行的应用运行主进程​任何 Electron 应用程序的入口都是 main 文件。 这个文件控制了主进程，它运行在一个完整的Node.js环境中，负责控制您应用的生命周期，显示原生界面，执行特殊操作并管理渲染器进程(稍后详细介绍)。执行期间，Electron 将依据应用中 package.json配置下main字段中配置的值查找此文件，您应该已在应用脚手架步骤中配置。要初始化这个main文件，需要在您项目的根目录下创建一个名为main.js的空文件。注意：如果您此时再次运行start命令，您的应用将不再抛出任何错误！ 然而，它不会做任何事因为我们还没有在main.js中添加任何代码。创建页面​在可以为我们的应用创建窗口前，我们需要先创建加载进该窗口的内容。 在Electron中，各个窗口显示的内容可以是本地HTML文件，也可以是一个远程url。此教程中，您将采用本地HTML的方式。 在您的项目根目录下创建一个名为index.html的文件： 你好!

你好!

我们正在使用 Node.js , Chromium , 和 Electron . 注意：在这个HTML文本中，您会发现主体文本中丢失了版本编号。 稍后我们将使用 JavaScript 动态插入它们。在窗口中打开您的页面​现在您有了一个页面，将它加载进应用窗口中。 要做到这一点，你需要 两个Electron模块：app 模块，它控制应用程序的事件生命周期。BrowserWindow 模块，它创建和管理应用程序 窗口。Because the main process runs Node.js, you can import these as CommonJS modules at the top of your main.js file:const { app, BrowserWindow } = require('electron')然后，添加一个createWindow()方法来将index.html加载进一个新的BrowserWindow实例。const createWindow = () => { const win = new BrowserWindow({ width: 800, height: 600 }) win.loadFile('index.html')}接着，调用createWindow()函数来打开您的窗口。在 Electron 中，只有在 app 模块的 ready 事件被激发后才能创建浏览器窗口。 您可以通过使用 app.whenReady() API来监听此事件。 在whenReady()成功后调用createWindow()。app.whenReady().then(() => { createWindow()})注意：此时，您的电子应用程序应当成功 打开显示您页面的窗口！管理窗口的生命周期​虽然你现在可以打开一个浏览器窗口，但你还需要一些额外的模板代码使其看起来更像是各平台原生的。 应用程序窗口在每个OS下有不同的行为，Electron将在app中实现这些约定的责任交给开发者们。一般而言，你可以使用 进程 全局的 platform 属性来专门为某些操作系统运行代码。关闭所有窗口时退出应用 (Windows & Linux)​在Windows和Linux上，关闭所有窗口通常会完全退出一个应用程序。为了实现这一点，你需要监听 app 模块的 'window-all-closed' 事件。如果用户不是在 macOS(darwin) 上运行程序，则调用 app.quit()。app.on('window-all-closed', () => { if (process.platform !== 'darwin') app.quit()})如果没有窗口打开则打开一个窗口 (macOS)​当 Linux 和 Windows 应用在没有窗口打开时退出了，macOS 应用通常即使在没有打开任何窗口的情况下也继续运行，并且在没有窗口可用的情况下激活应用时会打开新的窗口。为了实现这一特性，监听 app 模块的 activate 事件。如果没有任何浏览器窗口是打开的，则调用 createWindow() 方法。因为窗口无法在 ready 事件前创建，你应当在你的应用初始化后仅监听 activate 事件。 通过在您现有的 whenReady() 回调中附上您的事件监听器来完成这个操作。app.whenReady().then(() => { createWindow() app.on('activate', () => { if (BrowserWindow.getAllWindows().length === 0) createWindow() })})注意：此时，您的窗口控件应功能齐全！通过预加载脚本从渲染器访问Node.js。​现在，最后要做的是输出Electron的版本号和它的依赖项到你的web页面上。在主进程通过Node的全局 process 对象访问这个信息是微不足道的。 然而，你不能直接在主进程中编辑DOM，因为它无法访问渲染器 文档 上下文。 它们存在于完全不同的进程！注意：如果您需要更深入地了解Electron进程，请参阅 进程模型 文档。这是将 预加载 脚本连接到渲染器时派上用场的地方。 预加载脚本在渲染器进程加载之前加载，并有权访问两个 渲染器全局 (例如 window 和 document) 和 Node.js 环境。创建一个名为 preload.js 的新脚本如下：window.addEventListener('DOMContentLoaded', () => { const replaceText = (selector, text) => { const element = document.getElementById(selector) if (element) element.innerText = text } for (const dependency of ['chrome', 'node', 'electron']) { replaceText(`${dependency}-version`, process.versions[dependency]) }})上面的代码访问 Node.js process.versions 对象，并运行一个基本的 replaceText 辅助函数将版本号插入到 HTML 文档中。要将此脚本附加到渲染器流程，请在你现有的 BrowserWindow 构造器中将路径中的预加载脚本传入 webPreferences.preload 选项。const { app, BrowserWindow } = require('electron')// 在你文件顶部导入 Node.js 的 path 模块const path = require('node:path')// 修改已有的 createWindow() 方法const createWindow = () => { const win = new BrowserWindow({ width: 800, height: 600, webPreferences: { preload: path.join(__dirname, 'preload.js') } }) win.loadFile('index.html')}// ...这里使用了两个Node.js概念：__dirname 字符串指向当前正在执行脚本的路径 (在本例中，它指向你的项目的根文件夹)。path.join API 将多个路径联结在一起，创建一个跨平台的路径字符串。我们使用一个相对当前正在执行JavaScript文件的路径，这样您的相对路径将在开发模式和打包模式中都将有效。额外：将功能添加到您的网页内容​此刻，您可能想知道如何为您的应用程序添加更多功能。对于与您的网页内容的任何交互，您想要将脚本添加到您的渲染器进程中。 由于渲染器运行在正常的 Web 环境中，因此您可以在 index.html 文件关闭 标签之前添加一个 renderer.js 中包含的代码可以在接下来使用与前端开发相同的 JavaScript API 和工具。例如使用 webpack 打包并最小化您的代码，或者使用 React 来管理您的用户界面。回顾​完成上述步骤后，您应该有一个功能齐全的Electron程序，如下所示：完整代码如下：// main.js// Modules to control application life and create native browser windowconst { app, BrowserWindow } = require('electron')const path = require('node:path')const createWindow = () => { // Create the browser window. const mainWindow = new BrowserWindow({ width: 800, height: 600, webPreferences: { preload: path.join(__dirname, 'preload.js') } }) // 加载 index.html mainWindow.loadFile('index.html') // 打开开发工具 // mainWindow.webContents.openDevTools()}// 这段程序将会在 Electron 结束初始化// 和创建浏览器窗口的时候调用// 部分 API 在 ready 事件触发后才能使用。app.whenReady().then(() => { createWindow() app.on('activate', () => { // 在 macOS 系统内, 如果没有已开启的应用窗口 // 点击托盘图标时通常会重新创建一个新窗口 if (BrowserWindow.getAllWindows().length === 0) createWindow() })})// 除了 macOS 外，当所有窗口都被关闭的时候退出程序。 因此, 通常// 对应用程序和它们的菜单栏来说应该时刻保持激活状态, // 直到用户使用 Cmd + Q 明确退出app.on('window-all-closed', () => { if (process.platform !== 'darwin') app.quit()})// 在当前文件中你可以引入所有的主进程代码// 也可以拆分成几个文件，然后用 require 导入。// preload.js// 所有的 Node.js API接口 都可以在 preload 进程中被调用.// 它拥有与Chrome扩展一样的沙盒。window.addEventListener('DOMContentLoaded', () => { const replaceText = (selector, text) => { const element = document.getElementById(selector) if (element) element.innerText = text } for (const dependency of ['chrome', 'node', 'electron']) { replaceText(`${dependency}-version`, process.versions[dependency]) }}) 你好!

你好!

我们正在使用 Node.js , Chromium , 和 Electron . <！-- 您也可以此进程中运行其他文件 --> docs/fiddles/quick-start (29.1.1)Open in Fiddlemain.jspreload.jsindex.htmlconst { app, BrowserWindow } = require('electron/main')const path = require('node:path')function createWindow () { const win = new BrowserWindow({ width: 800, height: 600, webPreferences: { preload: path.join(__dirname, 'preload.js') } }) 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() }})window.addEventListener('DOMContentLoaded', () => { const replaceText = (selector, text) => { const element = document.getElementById(selector) if (element) element.innerText = text } for (const type of ['chrome', 'node', 'electron']) { replaceText(`${type}-version`, process.versions[type]) }}) Hello World!

Hello World!

We are using Node.js , Chromium , and Electron .

总结我们所做的所有步骤：我们启动了一个Node.js程序，并将Electron添加为依赖。我们创建了一个 main.js 脚本来运行我们的主要进程，它控制我们的应用程序

并且在 Node.js 环境中运行。 在此脚本中， 我们使用 Electron 的 app 和 BrowserWindow 模块来创建一个浏览器窗口，在一个单独的进程(渲染器)中显示网页内容。为了访问渲染器中的Node.js的某些功能，我们在 BrowserWindow 的构造函数上附加了一个预加载脚本。打包并分发您的应用程序​最快捷的打包方式是使用 Electron Forge。infoTo build an RPM package for Linux, you will need to install its required system dependencies.Add a description to your package.json file, otherwise rpmbuild will fail. Blank description are not valid.将 Electron Forge 添加到您应用的开发依赖中，并使用其"import"命令设置 Forge 的脚手架：npmYarnnpm install --save-dev @electron-forge/clinpx electron-forge import✔ Checking your system✔ Initializing Git Repository✔ Writing modified package.json file✔ Installing dependencies✔ Writing modified package.json file✔ Fixing .gitignoreWe have ATTEMPTED to convert your app to be in a format that electron-forge understands.Thanks for using "electron-forge"!!!yarn add --dev @electron-forge/clinpx electron-forge import✔ Checking your system✔ Initializing Git Repository✔ Writing modified package.json file✔ Installing dependencies✔ Writing modified package.json file✔ Fixing .gitignoreWe have ATTEMPTED to convert your app to be in a format that electron-forge understands.Thanks for using "electron-forge"!!!使用 Forge 的 make 命令来创建可分发的应用程序：npmYarnnpm run make> my-electron-app@1.0.0 make /my-electron-app> electron-forge make✔ Checking your system✔ Resolving Forge ConfigWe need to package your application before we can make it✔ Preparing to Package Application for arch: x64✔ Preparing native dependencies✔ Packaging ApplicationMaking for the following targets: zip✔ Making for target: zip - On platform: darwin - For arch: x64yarn make> my-electron-app@1.0.0 make /my-electron-app> electron-forge make✔ Checking your system✔ Resolving Forge ConfigWe need to package your application before we can make it✔ Preparing to Package Application for arch: x64✔ Preparing native dependencies✔ Packaging ApplicationMaking for the following targets: zip✔ Making for target: zip - On platform: darwin - For arch: x64Electron-forge 会创建 out 文件夹，您的软件包将在那里找到：// Example for macOSout/├── out/make/zip/darwin/x64/my-electron-app-darwin-x64-1.0.0.zip├── ...└── out/my-electron-app-darwin-x64/my-electron-app.app/Contents/MacOS/my-electron-app编辑此页面上一个简介下一个安装指导基本要求创建你的应用程序使用脚手架创建运行主进程创建页面在窗口中打开您的页面管理窗口的生命周期关闭所有窗口时退出应用 (Windows & Linux)如果没有窗口打开则打开一个窗口 (macOS)通过预加载脚本从渲染器访问Node.js。额外：将功能添加到您的网页内容回顾打包并分发您的应用程序文档入门指南API 参考清单性能安全工具Electron ForgeElectron Fiddle社区治理资源DiscordTwitterMastodonStack Overflow更多GitHubOpen Collective版权所有 © 2023 OpenJS 基金会和 Electron 贡献者们Hosting and infrastructure graciously provided by

Electron 中文网

Electron 中文网

Skip to main contentElectron开发文档API 文档当前版本 v28.2Search使用 JavaScript、HTML 和 CSS 构建跨平台桌面应用开发文档web-techWeb 技术Electron 嵌入了 Chromium 和 Node.js，使 Web 开发者能够创建桌面应用。cross-platform跨平台Electron 应用与 macOS、Windows 和 Linux 兼容，可在所有受支持架构的三个平台上运行。open-source开源Electron 是一个由 OpenJS 基金会 和活跃的贡献者社区维护的开源项目。桌面开发变得简单Electron 负责处理困难部分，因此你可以专注于应用的核心。原生图形用户界面使用 Electron 的主进程 API 与操作系统的接口进行交互。 自定义 应用窗口 外观、控制应用 菜单、或通过 对话框 或 通知 提醒用户。自动软件更新每当你发布新版本时，都会使用由 Squirrel 提供支持的 Electron 自动更新模块 向 macOS 和 Windows 用户发送软件更新。应用安装程序使用 社区支持的工具 生成特定于平台的工具，例如 macOS 上的 Apple 磁盘映像 (.dmg)、Windows 上的 Windows 安装程序 (.msi) 或 Linux 上的 RPM 包管理器 (.rpm)。应用商店分布将你的应用分发给更多用户。 Electron 对 Mac App Store (macOS)、Microsoft Store (Windows) 或 Snap Store (Linux) 提供一流的支持。崩溃报告使用 崩溃报告器 模块自动收集用户的 JavaScript 和原生崩溃数据。 使用第三方服务来收集此数据或设置你自己的本地 Crashpad 服务器。Electron 中文网 - 粤ICP备13048890号

Electron从零开始——介绍 - 知乎

Electron从零开始——介绍 - 知乎首发于全栈开发从零开始切换模式写文章登录/注册Electron从零开始——介绍Michael Jean转行的前编程人员：前端和工作流开发其实在 Electron 出现之前，如果你问我做桌面应用需要什么，我的第一个想法是 C、C++、C#、Java 以及微软的 Visual Basic 等等语言（Sorry 我不是个苹果党，第一时间想不起 Object-C），外加体积巨大的 IDE（比如我到今天依然不喜欢的 Visual Studio 和曾经为了玩 Minecraft Mod 开发装的 Eclipse 等等），当然也还有各种编辑器 + 编译器的组合，比如 Notepad++ 和 GCC……我认识 Electron 项目应该是比较晚的了，是因为突然有一天微软发布了 Visual Studio Code 这个跨平台、开源、免费的编辑器，然后在浏览这个应用的文档时，我突然发现这个东东居然用的是 TypeScript + Electron 开发出来的，而 TypeScript 其实就是 JavaScript 的超集……这个冲击了我的世界观，要知道直接使用 JavaScript 开发桌面应用以前不是没有过，但是能够提供像是 VS Code 这么好用且顺滑的感觉，在之前是不敢想象的，甚至为了一个小小的工具，我都要在 VS 里面先做窗口界面，然后用 C# 在那里搞来搞去，可能是对桌面端应用的不熟悉，我做这种工具总是没有很顺手的感觉（对，这方面我的确很渣）；而 Electron 的出现，让我有了可以使用自己熟悉的语言以及简单的编辑工具，就可以做出一个小桌面应用的希望。当然认真学了一阵时间之后，我发现它其实就是把 V8 引擎单独包装起来，使之成为可以在桌面运行的类浏览器平台，从而使得我们写的 SPA 独立运行在系统桌面段；又因为它其实是基于 SPA 的，所以跨平台就成为了其最基础的能力，除了在调用系统功能和最终打包的时候需要考虑到不同平台的差异，其他方面完全不用考虑，使得同一版本的应用在不同系统上也可以保持一致功能，而不需要重新开发一个不同内核、不同细节项、不同技术栈的应用了，对于个人开发者，小团队乃至大型团队的中小型项目，都是个非常非常棒的特性。我的作品本身其实也很渣，技术层面并没有什么特别的地方，甚至最初的两个小应用，还是用了 jQuery 作为 DOM 操作技术栈，其中一个基本没有在 Github 上面更新过，就单纯的是写出来玩的，一个读书应用（这个就不截图了，太渣自己看了都不好意思）；另一个有持续更新一段时间，但是也没有完成，因为最近在大改，从 jQuery 改为 Vue，所以可以看看以前的样子：这是一个投资理财的辅助分析工具，包括了三个小模块：股票、指数基金以及可转债，因为是辅助分析，所以有些部分是需要自己已经了解理论才能一眼看懂的，其界面如下（没做菜单，因为按钮对于不是很了解电脑的人更直观）。主界面：股票模块主界面（图表这里就不截图了，因为在修改，目前不太好看）：股票模块——白马组合（以防有人说我荐股，这里把股票名称和代码隐藏了）：股票模块——便宜组合（关键信息已隐藏）：股票模块——券商股：指数基金模块（这里主要是行业指数的博格公式，长投温度考虑到可以很容易的获取，所以没有做进来）：点击查看博格公式，可以看到计算结果：因为上述这些都是共有的信息，而且无论是否明白博格公式，我们也不可能参照旧数据来进行投资，所以这里没有隐藏；这里应用做的事情，其实就是简单的把需要手工计算的东西自动计算并汇总，所以没什么技术含量的。可转债模块——可转债组合（关键信息已隐藏）：行情简表和待发转债按钮会直接打开集思录：关于界面：以上就是我这个简单的小工具的演示，当然或许做成移动端更好，毕竟现在使用电脑进行投资的人不多了，不过在实际使用的过程中，我学习到的投资理财工具有很多地方还是需要计算和分析，使用电脑明显优于移动端的体验，所以第一步先做了桌面端的应用；外加我现在算是转了行，而且最近正在培训阶段，精力也不太好分配，所以改动技术栈还是需要很久的（一天可能就只剩下了2个小时左右的闲暇，我还要更新喜马拉雅上面的有声小说，所以只有周末是比较好的空暇时间了），这样我打算和这个专栏一样，慢慢的来，正好可以重新梳理自己对 Electron 的理解，并且让自己的应用“升级”为正式版。好了，这篇文章少见的扯了一大堆废话，接下来先好好的了解一下 Electron 究竟是个什么东东。就像我上面提到过的，Electron 可以让我们使用纯 JavaScript 调用丰富的原生 API 来创建桌面应用；可以把它看作是专注于桌面应用而不是 web 服务器的 io.js 的一个变体。当然这不意味着 Electron 是绑定了 GUI 库的 JavaScript；相反，Electron 使用 web 页面作为它的 GUI，所以可以把它看作成一个被 JavaScript 控制的，精简版的 Chromium 浏览器——从这个角度来理解，我们就明白了，所有和系统的交互功能，Electron 这个平台已经搞定了，我们所需要的就是创建一个自己喜欢的界面，一个或多个核心的功能，以及调用它提供给我们的 API 就好。因为 Electron 本身其实也是 Node.js 的一个第三方项目，所以在开发的时候，我们首先需要已经安装了 Node.js，以及包管理器 NPM，外加一个顺手的编辑器：我个人用 VS Code 很顺手，当然如果喜欢用别的编辑器也没问题，比如前文提到的 Notepad++，或者著名的 Sublime Text、Atom（话说这个也是 Electron 做的）、Komodo Edit……等等等等，都可以；基本准备就完成了。接下来，用 NPM 在本地安装一个 Electron 的副本即可，可以选择全局安装或者针对项目单独安装：npm i -g electron

# 或者

npm i --save-dev electron当然我这里因为已经安装过，所以相当于升了个级一个基础的 Electron 项目结果如下：my-electron-app/

├── package.json

├── main.js

└── index.html因为 Node.js 对项目结构以及命名还是有点要求的，所以我个人推荐用一些 Electron Cli 工具来进行项目启动和初始化，这样会相对省一些事，比如我之前使用过的 electron-forge，或者直接搭配 Vue 来建立的 electron-vue 都可以；具体的 cli 工具我们可以按照自己的喜好选择，如果更倾向用原生 JS 或者想要自己指定框架的，electron-forge 是个好选择：我们也可以注意到，因为它是用了很多比较老的第三方库，所以有不少警告信息这里稍稍演示一下通过 electron-forge 来建立新项目的过程，其实很简单，只要新建一个文件夹，定位到文件夹之后通过 init 命令指定当前文件夹为新项目：electron-forge init此时 electron-forge 会自动检查当前环境，并安装对应的模块：这里要留意，如果 NPM 的映像是指向淘宝的话，整个过程会快很多。完成后，初始配置就结束了：此时，我们就可以打开 src 目录下的 index.js 来查看初始代码了：import { app, BrowserWindow } from 'electron';

// Handle creating/removing shortcuts on Windows when installing/uninstalling.

if (require('electron-squirrel-startup')) { // eslint-disable-line global-require

app.quit();

}

// Keep a global reference of the window object, if you don't, the window will

// be closed automatically when the JavaScript object is garbage collected.

let mainWindow;

const createWindow = () => {

// Create the browser window.

mainWindow = new BrowserWindow({

width: 800,

height: 600,

});

// and load the index.html of the app.

mainWindow.loadURL(`file://${__dirname}/index.html`);

// Open the DevTools.

mainWindow.webContents.openDevTools();

// Emitted when the window is closed.

mainWindow.on('closed', () => {

// Dereference the window object, usually you would store windows

// in an array if your app supports multi windows, this is the time

// when you should delete the corresponding element.

mainWindow = null;

});

};

// This method will be called when Electron has finished

// initialization and is ready to create browser windows.

// Some APIs can only be used after this event occurs.

app.on('ready', createWindow);

// Quit when all windows are closed.

app.on('window-all-closed', () => {

// On OS X it is common for applications and their menu bar

// to stay active until the user quits explicitly with Cmd + Q

if (process.platform !== 'darwin') {

app.quit();

}

});

app.on('activate', () => {

// On OS X it's common to re-create a window in the app when the

// dock icon is clicked and there are no other windows open.

if (mainWindow === null) {

createWindow();

}

});

// In this file you can include the rest of your app's specific main process

// code. You can also put them in separate files and import them here.

这样我们就可以在这些初始代码上面，进行自己想要的修改了，当然我们下一章节会开始看看，这些基础的代码究竟是个什么意思；不过目前来看，应该已经很清晰了，毕竟 electron-forge 生成的初始代码，已经有了详尽的注释帮助我们理解了。其实这个初始代码已经可以运行了，只要运行如下命令：electron-forge start可以看到，初始的界面是包括了菜单栏、主界面以及控制台的，而控制台的出现就分明体现了它本质上是个浏览器的特点，这也使得我们在本地及时的进行调整、修复和新功能测试变得非常简单。发布于 2020-10-18 11:56ElectronNode.jsJavaScript 编程​赞同 140​​20 条评论​分享​喜欢​收藏​申请转载​文章被以下专栏收录全栈开发从零开始从原生JS开始，逐步学习全栈开

Build cross-platform desktop apps with JavaScript, HTML, and CSS | Electron

Build cross-platform desktop apps with JavaScript, HTML, and CSS | Electron

Skip to main contentElectronDocsAPIBlogToolsElectron ForgeElectron FiddleCommunityGovernanceShowcaseResourcesReleasesGitHubEnglishEnglishDeutschEspañolFrançais日本語PortuguêsРусский中文SearchBuild cross-platform desktop apps with JavaScript, HTML, and CSSDocsweb-techWeb TechnologiesElectron embeds Chromium and Node.js to enable web developers to create desktop applications.cross-platformCross PlatformCompatible with macOS, Windows, and Linux, Electron apps run on three platforms across all supported architectures.open-sourceOpen SourceElectron is an open source project maintained by the OpenJS Foundation and an active community of contributors.Desktop development made easyElectron takes care of the hard parts so you can focus on the core of your application.Native graphical user interfacesInteract with your operating system's interfaces with Electron's main process APIs. Customize your application window appearance, control application menus, or alert users through dialogs or notifications.Automatic software updatesSend out software updates to your macOS and Windows users whenever you release a new version with Electron's autoUpdater module, powered by Squirrel.Application installersUse community-supported tooling to generate platform-specific tooling like Apple Disk Image (.dmg) on macOS, Windows Installer (.msi) on Windows, or RPM Package Manager (.rpm) on Linux.App store distributionDistribute your application to more users. Electron has first-class support for the Mac App Store (macOS), the Microsoft Store (Windows), or the Snap Store (Linux).Crash reportingAutomatically collect JavaScript and native crash data from your users with the crashReporter module. Use a third-party service to collect this data or set up your own on-premise Crashpad server.Use the tools you loveWith the power of modern Chromium, Electron gives you an unopinionated blank slate to build your app. Choose to integrate your favourite libraries and frameworks from the front-end ecosystem, or carve your own path with bespoke HTML code.ReactVue.jsNext.jsTailwind CSSBootstrapThree.jsAngularTypeScriptwebpackPlaywrightTesting LibrarySassNew!Electron ForgeElectron Forge is a batteries-included toolkit for building and publishing Electron apps. Get your Electron app started the right way with first-class support for JavaScript bundling and an extensible module ecosystem.Get startedSource code$ npm init electron-app@latest my-app✔ Locating custom template: "base"✔ Initializing directory✔ Preparing template✔ Initializing template✔ Installing template dependenciesDirect downloadInstallationIf you want to figure things out for yourself, you can install the Electron package directly from the npm registry.For a production-ready experience, install the latest stable version. If you want something a bit more experimental, try the prerelease or nightly channels.StablePrereleaseNightly$ npm install --save-dev electron@latest# Electron 29.1.1# Node 20.9.0# Chromium 122.0.6261.111Experiment with the APIElectron FiddleElectron Fiddle lets you create and play with small Electron experiments. It greets you with a quick-start template after opening — change a few things, choose the version of Electron you want to run it with, and play around.Save your Fiddle either as a GitHub Gist or to a local folder. Once pushed to GitHub, anyone can quickly try your Fiddle out by just entering it in the address bar.DownloadSource codeApps users love, built with ElectronThousands of organizations spanning all industries use Electron to build cross-platform software.1PasswordAsanaDiscordDropboxFigmaAgora FlatGitHub DesktopitchLoomMongoDB CompassNotionObsidianPolypanePostmanSignalSkypeSlackSpliceMicrosoft TeamsTidalTrelloTwitchVS CodeWordPress DesktopSee moreDocsGetting StartedAPI ReferenceChecklistsPerformanceSecurityToolsElectron ForgeElectron FiddleCommunityGovernanceResourcesDiscordTwitterMastodonStack OverflowMoreGitHubOpen CollectiveCopyright © 2023 OpenJS Foundation and Electron contributors.Hosting and infrastructure graciously provided by

如何利用 Electron 开发一个桌面 APP - 知乎

如何利用 Electron 开发一个桌面 APP - 知乎首发于关爱程序员成长协会切换模式写文章登录/注册如何利用 Electron 开发一个桌面 APPYuyang四有青年。你是否曾经想过可以用 HTML、CSS 和 JavaScript 这些前端技术来构建跨平台的桌面应用？使用 Electron 就能做到。本文带着你深入 Electron 的核心概念。阅读本文后，你会知道如何使用 Electron、HTML 和 CSS 构建跨平台桌面应用。在开始之前，你可以提前看看我们在本教程中要构建的应用。Hear Me Type [译者注：本文的示例应用名为 Hear Me Type] 功能简单直接，应用中每个键都会播放特有的声音。比如我按下了 “A”，应用会播放字母 A 特有的声音。该应用目前有两个版本可供下载：本教程的源码，以及一个推荐给更有经验的 Electron 用户的高级版本。因为我还在为改善应用以及添加一些新功能，所以代码会发生变化，请一定注意看看有哪些更新。就此打住，我们现在开始学习 Electron 并用它来创建第一个应用！什么是 Electron？Electron 是一个基于 Chrominum 和 Node.js 的跨平台桌面应用框架。在这个框架中很容易构建基于 HTML、CSS 和 JavaScript 技术的跨平台应用。构建出来的应用会很好地兼容 Mac、Windows 和 Linux 操作系统。它还有其它一些特性：自动更新 —— 应用支持自动更新原生菜单和通知 —— 可以创建原生应用菜单和上下文菜单应用崩溃报告 —— 可以将崩溃报告提交到远程服务器调试和分析 —— Chrominum 的内容模块可以发现性能瓶颈和缓慢的操作。你也可以在应用中使用自己喜欢的 Chrome 开发者工具。Windows installer —— 可以快速便捷地创建安装包。如果你对 Electron 的功能感到满意，我们就继续深入，创建一个简单的 Electron 应用。动手之前需要先安装 Node.js。你还应该申请一个 GitHub 账户来保存和更新应用。虽然这个账户并不是必须的，但我非常建议你去申请一个。Github 是一个行业标准，学会使用 Github 非常重要。我会在教程中使用 Github。开始准备好之后，打开系统终端窗口。按照下面的介绍将 Electron Quick Start 这个 Git 库克隆到计算机上。我们会基于 Electron Quick Start 来创建自己的软件。# Clone the Quick Start repository

git clone

# Go into the repository

cd electron-quick-start

# Install the dependencies and run

npm install && npm start完成上面的步骤之后，你会看到一个像浏览器窗口的应用打开。它确实是一个浏览器窗口！这个窗口显示的样子在不同的操作系统上会有所不同。我选择使用 Windows 的经典样式。非常赞！Quick-Start Electron 应用的主窗口正如我之前所说，你可以在应用中使用 Chrome 开发者工具，这个工具的用法跟在浏览器中的开发者工具一样，再赞一个！Electron 应用程序架构我们来看看这个应用的源代码及其文件结构。可以使用你自己喜欢的编辑器或者 IDE 打开项目，我使用 Atom …… 你猜到了 …… 它就是用 Electron 构建的！[译者注：我比较喜欢 VSCode，也是基于 Electron 构建的]新应用的目录和文件结构。我们有一个基本的文件结构：electron-quick-start- index.html- main.js- package.json- render.js文件结构类似于我们创建网页的结构。我们有：index.html 是一个 HTML5 页面，它具有很重要的作用：提供画布main.js 创建窗口并处理系统事件package.json 是应用的启动脚本。它包含了应用的信息，在主进行中运行render.js 处理应用的渲染进程也许你对主进程和渲染进程存有疑问。它们到底是什么，用来干什么？很高兴你有此疑问。注意了，如果你来自浏览器的 JavaScript 领域，这对你来说可能是一块新的领域！什么是进程？看到“进程”这个词的时候，想像一下操作系统级的进程。那是运行在系统中的计算机程序实例。启动 Electron 应用之后，查看 Windows 的任务管理器或者 macOS 的活动监视器，就可以看到与这个应用相关的进程。这些进程都是并行运行的，为每个进程分配的内存和资源相互隔离。如果我想创建一个 for 循环在渲染进程中逐步处理一些事件。var a = 1;

for ( a = 1; a < 10; a ++) {

console.log('This is a for loop');

}这些改变只在渲染进程中有效，根本不会对主进行造成影响。“This is a for loop”消息只会出现在渲染模块中。主进程主进程控制着应用的生命周期。它内置了完整的 Node.js API，可以打开对话框，创建渲染进程，还可以处理其它其它与操作系统的交互操作，包括启动和退出应用。按照惯例，这个进程写在名为 main.js 的文件中。不过你想使用其它名字也没有问题。你可以在 package.json 文件中配置主进程文件的名称。试验一下，打开 package.json 并将“main”: “main.js”,修改为“main”: “mainTest.js”,启动应用看看它是否仍然正常运行。注意，主进程只有一个。渲染进程应用中的渲染进程是一个浏览器窗口。与主进程不同，可以存在多个独立的渲染进程。因为渲染进程是各自独立的，如果其中一个崩溃了并不会影响到其它进程，这得益于 Chrominum 的多进程架构。这些浏览器窗口就像演示网页一样，也可以被隐藏或自定义。不过 Electron 内置了完整的 Node.js API，也就是说我们可以打开对话框或进行其它与操作系统的交互。这样考虑；[来源: Kristian Poslek]还有一个问题，它们能以某种方式联系起来吗？这些进程都在独立运行，但他们仍然需要通信，因为它们负责不同的任务，这尤其需要通信。为此，存在一个进程间的通信系统或者 IPC。你可以使用 IPC 在主进程和渲染进程间进行通信。对于这个知识点更深入一些的解释，请阅读 Christian Engvall 的文章。上面说的都是开发 Electron 应用的基础知识。现在回到我们的代码！私有化让我们给应用所在的目录起一个合适的名称。将目录名从 electron-quick-start 改为 hear-me-type-tutorial。重新在编辑器或 IDE 中打开这个目录，我们打开 package.json 来进一步定制应用标识。package.json 包含了至关重要的应用信息。这里定义应用的名称、版本、主文件、作者、许可协议等。现在把作者改成自己的名称，自豪感油然而生。找到 “author” 参数，然后将值改成自己的名称。它看起来像这样：“author”: “Carol Pelu”,我们还要改其它一些参数。在 package.json 中找到 name（名称） 和 description（说明）并修改它们：帅呆了！现在应用有了新名称，还有简短而清晰的说明。记住，你可以在终端运行 npm start 来运行应用，以观察所做的改变。我们会继续在应用中添加一些期望的功能。我们想在按下每个键的时候播放不同的声音。哦，有趣的功能！没有功能的应用是什么？什么都不是……现在我们要给它添加功能。为了让应用响应输入，我们必须定义一个元素来捕捉事件，然后触发期望的动作。为此，我们会创建一个具有特殊名称的若干 audio 元素，对应于按键。然后我们会使用一个 switch 语句来定位按下的键，播放与之关联的声音。如果你现在觉得有点复杂，不要怕，我会指引你一步步进行。下载这个压缩包，它包含了我们要使用的所有声音文件。很快就会用到！我们会打开 index.html 文件，创建一个

你的 index.html 应该就像这样。现在