JavaScript 是最常见的编程语言之一。 它可用于后端和前端开发的事实使其成为许多人的宠儿。
JavaScript 有许多库和框架,它们将其用例扩展到普通(普通)JavaScript 之外。
Electron.js 是一个强大的开源框架,它使 Web 开发人员能够利用他们现有的技能开发本机应用程序。 本文将向您介绍 Electron.js 以及如何使用它来推动您的下一个惊人想法。
目录
电子JS
Electron JS 是一个框架,开发人员可以使用该框架使用 HTML、CSS 和 JavaScript 创建桌面应用程序。 Electron JS 由 GitHub 创建和维护。
该框架混合了 Node.JS 和 Chromium,允许用户维护一个 JavaScript 代码库并开发可在 Windows、macOS 和 Linux 上运行的跨平台桌面应用程序。
Electron.js 的故事始于 2013 年 1 月。最初的想法是创建一个可以使用 JavaScript、HTML 和 CSS 的跨平台文本编辑器。
Electron.js 最初名为 Atom Shell,并于 2014 年开源。该项目后来于 2015 年 4 月更名为 Electron,并于 2016 年发布了第一个 API。
电子JS的特点
- 与所有 JavaScript 库和框架兼容。 Vue.js、Angular 和 React.js 只是开发人员可以与 Electron JS 一起使用的 JavaScript 框架的示例。 这种兼容性使得在创建 Electron 应用程序时可以轻松利用这些库和框架的特性/功能。
- 可重复使用的框架。 满足不同客户的需求可能代价高昂。 Electron JS 的好处在于它可以用于 Web 和桌面应用程序。 单一的代码库意味着它也可以在不同的操作系统上使用。
- 可以访问本机 API。 使用 Electron JS 的开发人员可以访问他们正在运行的操作系统的本机 API。 因此,开发人员可以创建具有类似访问低级功能(如显示通知)的桌面应用程序。
- 支持网络技术。 Electron JS 具有适应性,因为开发人员不需要学习新的编程语言来开发应用程序。 因此,这意味着如果您了解已经用于创建 Web 应用程序的某种语言包,您也可以使用它来创建桌面应用程序。
- 代码和应用程序管理。 您不需要维护不同的团队来维护不同操作系统的应用程序和代码。 Electron JS 允许您为 Linux、Windows 和 Mac 操作系统维护相同的代码库。
- 易于构建/部署。 Electron 包管理器帮助开发人员打包到他们各自的包中。 因此,您可以使用此包管理器从同一代码库发布 Linux、Mac 和 Windows 桌面应用程序。
架构 Electron JS
Electron 的架构与现代 Web 浏览器的架构非常相似,因为它继承了 Chromium 的多进程架构。
Electron 的架构包括 V8 JavaScript 引擎、Node.JS 和 Libchromiumcontent。
- Node.JS – 一种在 V8 JavaScript 引擎上运行的开源 JavaScript 运行时。 Node.JS 使开发人员能够在浏览器窗口外运行 JavaScript。 Node.JS 还允许用户通过其交互式 shell 执行原始 JavaScript 代码。
- Libchromiumcontent – 一个开源的 Chromium 渲染库,由 Google Chrome 维护。 Chrome 具有极简的用户界面,使用 blink 作为布局引擎,使用 V8 作为 JavaScript 引擎。
- V8 JavaScript 引擎——一个用 C++ 和 JavaScript 编写并由谷歌开发的开源 JavaScript 引擎。
#1。 节点.js
要开始使用 Electron JS,您需要在本地计算机上安装 Node.js。
根据您在计算机上运行的操作系统选择正确的节点版本。
通过运行这些命令检查 Node.js 是否已正确安装;
node -v
npm -v
如果安装正确,这些命令将分别显示节点和 npm 版本。
#2。 命令行
您访问命令行的方式将取决于您的操作系统。
- Linux 将取决于发行版。
- Windows:PowerShell 或命令提示符。
- macOS:终端。
一些代码编辑器,例如 Visual Studio Code,带有一个集成终端。
#3。 代码编辑器
您需要一个代码编辑器来编写您的 Electron JS 代码。 Visual Studio Code 是您可以试用的最佳工具之一。
如何安装电子JS
第 1 步:创建一个 node.js 项目。
使用这些命令开始;
mkdir my-electron-app && cd my-electron-app
npm init
npm init 命令将提示您填写一些字段,例如应用程序的名称、入口点和描述。
您可以选择文件夹的默认名称作为您的应用程序名称。 但是,请记住将应用程序的入口点设置为 main.js。
作者和描述等字段可以采用任何值。 完成这些步骤后,您的 package.json 将看起来像这样:
{ "name": "my-electron-app", "version": "1.0.0", "description": "Hello World!", "main": "main.js", "author": "Peter Drury", "license": "MIT" }
第二步:安装电子
使用这个命令;
npm install --save-dev electron
第 3 步:将“开始”命令添加到您的 package.json
{ "scripts": { "start": "electron ." } }
第 4 步:启动您的应用
使用此命令以开发模式启动您的应用
npm start
Electron JS 工作流程
我们将继续从上面刚刚进行的设置构建应用程序。 Electron 应用程序有两种类型的进程; 主要和渲染器。
主要过程
主脚本是任何电子应用程序的入口点。 该应用程序将在完整的 Node.js 环境中运行。 Electron 将在您在应用脚手架期间配置的 package.json 文件中查找主脚本。
在根文件夹中创建 main.js 以初始化主脚本。 您可以手动执行或使用此命令;
touch main.js
您可以将以下代码添加到 main.js
const { app, BrowserWindow } = require('electron'); const createWindow = () => { const win = new BrowserWindow({ width: 800, height: 600, }); 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(); } });
Electron 中的网页可以从远程网址或本地 HTML 文件加载。 我们将使用本地 HTML 文件进行演示。
在您的根文件夹中创建一个 index.html 文件。 始终提供 index.html 的代码,但您可以将其作为起始代码;
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'" /> <meta http-equiv="X-Content-Security-Policy" content="default-src 'self'; script-src 'self'" /> <title>Hello from Electron renderer!</title> </head> <body> <h1>Hello from Electron renderer!</h1> <p>👋</p> <p id="info"></p> </body> <script src="https://wilku.top/introduction-to-electron-js-complete-guide-and-learning-resources/./renderer.js"></script> </html>
渲染进程
渲染器渲染网页内容。 预加载脚本附带在需要开始加载 Web 内容之前在渲染器进程中执行的代码。
在您的根文件夹中创建 preload.js 并添加此代码;
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]) } })
使用 npm start 运行开发服务器,这就是将显示的内容
应用示例:Electron JS
#1。 松弛的桌面应用程序
Slack 是最流行的远程协作工具之一。 用户可以使用此应用发送和接收消息、拨打电话和共享文件。 Slack 在 Mac、Linux 和 Windows 操作系统上同时提供基于 Web 和桌面的应用程序。 Slack 的桌面应用程序使用 Chromium 引擎和 Node.js 呈现高质量代码。
#2。 WordPress 桌面应用程序
WordPress 是最大的内容管理系统。 即使没有基本的编码技能也可以启动网站这一事实吸引了许多用户。 可以通过浏览器以及 Mac、Linux 和 Windows 上的桌面应用程序访问 WordPress。 改造后的 WordPress 桌面使用 Electron JS。
#3。 WhatsApp 桌面应用程序
WhatsApp 是现代世界中最受欢迎的消息传递应用程序之一,超过 20 亿人使用它。 WhatsApp 最初设计为移动应用程序,但现在已转变为跨设备平台。 WhatsApp 桌面版使用 Electron JS,可在主要操作系统上使用。
#4。 视觉工作室代码
微软旗下的 Visual Studio Code 是最受欢迎的代码编辑器之一。 Visual Studio Code 支持 HTML、CSS 和以各种编程语言编写的代码,例如 JavaScript、Python、PHP、Java 和 Ruby,仅举几例。 使用 Electron JS 创建的桌面应用程序适用于 Windows、Mac 和 Linux 操作系统。
学习资源:Electron JS
#1。 Electronjs 官方文档
Electronjs 文档由 Electronjs.org 创建和维护。 您将了解什么是 Electron JS、如何设置您的第一个 Electron 应用程序以及如何使用各种技术构建跨平台桌面应用程序。 每当引入改进或新功能时,文档总是会更新。
#2。 Electron 大师:使用 HTML、JavaScript 和 CSS 的桌面应用程序
Master Electron 是 Udemy 上的一门付费课程,向您介绍 Electron JS。 您将学习如何为不同的操作系统(例如 Mac、Linux 和 Windows)创建桌面应用程序。 如果您想了解整个 Electron API 流程,Master Electron 也是一个完美的资源。
#3。 电子反应教程
Electron React 是 Udemy 上的付费课程,教授开发人员如何使用 React.js 创建 Electron 应用程序。 React 是最著名的 JavaScript 库之一,由 Meta(前身为 Facebook)创建。
包起来
Electron JS 是一个很棒的 JavaScript 库,用于在必须接受跨平台应用程序的现代世界中创建桌面应用程序。 您可以使用 HTML、CSS 和 JavaScript 这一事实意味着开发人员无需学习新的技术栈即可创建此类应用程序。 拥有庞大的支持社区也是一个优势,因为您始终可以得到支持。
您还可以探索一些最好的 JavaScript 框架,以在更短的时间内构建现代应用程序。