网站建设平台推荐,做网站跳转,学做美食的网站,沭阳做网站Electron是什么#xff1f;
Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。 嵌入 Chromium 和 Node.js 到 二进制的 Electron 允许您保持一个 JavaScript 代码代码库并创建 在Windows上运行的跨平台应用 macOS和Linux
Electron Fiddle 运行实例
Ele…Electron是什么
Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。 嵌入 Chromium 和 Node.js 到 二进制的 Electron 允许您保持一个 JavaScript 代码代码库并创建 在Windows上运行的跨平台应用 macOS和Linux
Electron Fiddle 运行实例
Electron Fiddle 是由 Electron 开发并由其维护者支持的沙盒程序。 我们强烈建议将其作为一个学习工具来安装以便在开发过程中对Electron的api进行实验或对特性进行原型化。
脚手架创建环境
mkdir my-electron-app cd my-electron-app
npm initpackage.json
{name: my-electron-app,version: 1.0.0,description: Hello World!,main: main.js,author: Jane Doe,license: MIT
}下载 Electron.js
Electron.js Github 仓库地址https://github.com/electron/electron/releases
安装 npm install electron 需要开加速器亲测 npm install --save-dev electron下载过程中出现如 ELIFECYCLE、EAI_AGAIN、ECONNRESET 和 ETIMEDOUT 等错误都是此类网络问题的标志。 在较慢的网络上, 最好使用 --verbose 标志来显示下载进度:
npm install --verbose electron运行主进程
任何 Electron 应用程序的入口都是 main 文件。 这个文件控制了主进程它运行在一个完整的Node.js环境中负责控制您应用的生命周期显示原生界面执行特殊操作并管理渲染器进程。
执行期间Electron 将依据应用中 package.json配置下main字段中配置的值查找此文件您应该已在应用脚手架步骤中配置。 要初始化这个main文件需要在您项目的根目录下创建一个名为 main.js 的空文件。
在 main.js 引入 electron 环境包
const { app, BrowserWindow } require(electron)根据 package.json 配置 start 脚本进行运行npm run start
scripts: {start: electron-forge start,
}创建 HTML 页面
在可以为我们的应用创建窗口前我们需要先创建加载进该窗口的内容。 在Electron中各个窗口显示的内容可以是本地HTML文件也可以是一个远程url。
!DOCTYPE html
htmlheadmeta charsetUTF-8meta http-equivContent-Security-Policy contentdefault-src self; script-src selftitle你好!/title/headbodyh1你好!/h1我们正在使用 Node.js span idnode-version/span,Chromium span idchrome-version/span,和 Electron span idelectron-version/span./body
/html窗口加载 HTML 页面
现在您有了一个页面将它加载进应用窗口中。 要做到这一点你需要 两个Electron模块
app 模块它控制应用程序的事件生命周期。
BrowserWindow 模块它创建和管理应用程序 窗口。因为主进程运行着 Node.js您可以在 main.js 文件头部将它们导入作为 CommonJS 模块
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() })窗口生命周期
关闭所有窗口时退出应用 (Windows Linux) 在Windows和Linux上关闭所有窗口通常会完全退出一个应用程序。
为了实现这一点你需要监听 app 模块的 ‘window-all-closed’ 事件。如果用户不是在 macOS(darwin) 上运行程序则调用 app.quit()。
app.on(window-all-closed, () {if (process.platform ! darwin) app.quit()
})process.platform 可能值
aix darwin freebsd linux openbsd sunos win32预加载脚本
通过预加载脚本从渲染器访问Node.js。 现在最后要做的是输出Electron的版本号和它的依赖项到你的web页面上。
在主进程通过Node的全局 process 对象访问这个信息是微不足道的。 然而你不能直接在主进程中编辑DOM因为它无法访问渲染器 文档 上下文。 它们存在于完全不同的进程
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])}
})要将此脚本附加到渲染器流程请在你现有的 BrowserWindow 构造器中将路径中的预加载脚本传入 webPreferences.preload 选项。
const { app, BrowserWindow } require(electron)
const path require(path)const createWindow () {const win new BrowserWindow({width: 800,height: 600,webPreferences: {preload: path.join(__dirname, preload.js)}})win.loadFile(index.html)
}__dirname 字符串指向当前正在执行脚本的路径 (在本例中它指向你的项目的根文件夹)。
path.join API 将多个路径联结在一起创建一个跨平台的路径字符串。对于与您的网页内容的任何交互您想要将脚本添加到您的渲染器进程中。 由于渲染器运行在正常的 Web 环境中因此您可以在 index.html 文件关闭 标签之前添加一个
script src./renderer.js/script窗口开启调试
按shift ctrl i 进程模型
为了解决这个问题Chrome 团队决定让每个标签页在自己的进程中渲染 从而限制了一个网页上的有误或恶意代码可能导致的对整个应用程序造成的伤害。 然后用单个浏览器进程控制这些标签页进程以及整个应用程序的生命周期。 下方来自 Chrome 漫画 的图表可视化了此模型 Chrome 多进程架构
Electron 应用程序的结构非常相似。 作为应用开发者你将控制两种类型的进程主进程 和 渲染器进程。 这类似于上文所述的 Chrome 的浏览器和渲染器进程。
主进程 Main Thread
每个 Electron 应用都有一个单一的主进程作为应用程序的入口点。 主进程在 Node.js 环境中运行这意味着它具有 require 模块和使用所有 Node.js API 的能力。
窗口管理 主进程的主要目的是使用 BrowserWindow 模块创建和管理应用程序窗口。
BrowserWindow 类的每个实例创建一个应用程序窗口且在单独的渲染器进程中加载一个网页。 您可从主进程用 window 的 webContent 对象与网页内容进行交互。
const { BrowserWindow } require(electron)const win new BrowserWindow({ width: 800, height: 1500 })
win.loadURL(https://github.com)const contents win.webContents
console.log(contents)注意渲染器进程也是为 web embeds 而被创建的例如 BrowserView 模块。 嵌入式网页内容也可访问 webContents 对象。 由于 BrowserWindow 模块是一个 EventEmitter 所以您也可以为各种用户事件 ( 例如最小化 或 最大化您的窗口 ) 添加处理程序。
当一个 BrowserWindow 实例被销毁时与其相应的渲染器进程也会被终止。
原生 API
为了使 Electron 的功能不仅仅限于对网页内容的封装主进程也添加了自定义的 API 来与用户的作业系统进行交互。 Electron 有着多种控制原生桌面功能的模块例如菜单、对话框以及托盘图标。
渲染器进程
每个 Electron 应用都会为每个打开的 BrowserWindow 生成一个单独的渲染器进程。 洽如其名渲染器负责 渲染 网页内容。 所以实际上运行于渲染器进程中的代码是须遵照网页标准的 (至少就目前使用的 Chromium 而言是如此) 。
因此一个浏览器窗口中的所有的用户界面和应用功能都应与您在网页开发上使用相同的工具和规范来进行攥写。
虽然解释每一个网页规范超出了本指南的范围但您最起码要知道的是
以一个 HTML 文件作为渲染器进程的入口点。
使用层叠样式表 (Cascading Style Sheets, CSS) 对 UI 添加样式。
通过 script 元素可添加可执行的 JavaScript 代码。此外这也意味着渲染器无权直接访问 require 或其他 Node.js API。 为了在渲染器中直接包含 NPM 模块您必须使用与在 web 开发时相同的打包工具 (例如 webpack 或 parcel) 为了方便开发可以用完整的 Node.js 环境生成渲染器进程。 在历史上这是默认的但由于安全原因这一功能已被禁用。 Preload 预加载脚本
预加载preload脚本包含了那些执行于渲染器进程中且先于网页内容开始加载的代码 。 这些脚本虽运行于渲染器的环境中却因能访问 Node.js API 而拥有了更多的权限。
预加载脚本可以在 BrowserWindow 构造方法中的 webPreferences 选项里被附加到主进程。
const { BrowserWindow } require(electron)
const win new BrowserWindow({webPreferences: {preload: path/to/preload.js}
})因为预加载脚本与浏览器共享同一个全局 Window 接口并且可以访问 Node.js API所以它通过在全局 window 中暴露任意 API 来增强渲染器以便你的网页内容使用。
虽然预加载脚本与其所附着的渲染器在共享着一个全局 window 对象但您并不能从中直接附加任何变动到 window 之上因为 contextIsolation 是默认的。
preload.js
window.myAPI { desktop: true }renderer.js
console.log(window.myAPI)语境隔离 contextIsolation
语境隔离Context Isolation意味着预加载脚本与渲染器的主要运行环境是隔离开来的以避免泄漏任何具特权的 API 到您的网页内容代码中。
取而代之我们將使用 contextBridge 模块来安全地实现交互
preload.js
const { contextBridge } require(electron)contextBridge.exposeInMainWorld(myAPI, {desktop: true
})renderer.js
console.log(window.myAPI)
