('electron') // 创建一个createWindow()函数，用于将index.html加载到新BrowserWindow实例中 const createWindow = () => {...版本对象，并运行replaceText函数，将版本号插入HTML文档。要将此脚本附加到渲染过程中，请将预加载脚本的路径传递到webPreferences。...在main.js现有的BrowserWindow构造函数中的预加载选项。..., BrowserWindow } = require('electron') const path = require('path') // 创建一个createWindow()函数，用于将index.html...加载到新BrowserWindow实例中 const createWindow = () => { const win = new BrowserWindow({ width:
一个没有加载HTML文档的空BrowserWindow 这是一扇窗口，并什么好看的。下一步是将HTML页面加载到我们创建的BrowserWindow实例中。...所有BrowserWindow实例都有一个web content属性，该属性具有几个有用的特性，比如将HTML文件加载到渲染器进程的窗口中、从主进程向渲染器进程发送消息、将页面打印为PDF或打印机等等。...我们将以下代码添加到app/main.js中，以告诉渲染器进程在我们之前创建的窗口中加载这个HTML文档。 列表2.6 将HTML文档加载到主窗口: ....我们可以使用Node的模块系统，而不需要额外的配置。让我们移除标签中的所有代码到－现在是空的－app/renderer.js文件中。...稍后，我们将讨论如何使用Sass而不是Electron。 在电子应用程序中添加样式表与在传统web应用程序中添加样式表没有多大不同。尽管如此，一些细微差别还是值得讨论的。
将网页装载到 BrowserWindow在 Electron 中，每个窗口展示一个页面，后者可以来自本地的 HTML，也可以来自远程 URL。 在本例中，我们将会装载本地的文件。...在我们项目的根目录中创建一个 index.html 文件，并写入下面的内容： html>现在有了一个网页，可以将它装载到 Electron 的 BrowserWindow 上了。 将 main.js 中的内容替换成下列代码。 我们马上会逐行解释。...(createWindow)4.1 导入模块main.js (Line 1)const { app, BrowserWindow } = require('electron')在第一行中，我们使用 CommonJS...4.2 将可复用的函数写入实例化窗口createWindow() 函数将我们的页面加载到新的 BrowserWindow 实例中：main.js (Lines 3-10)const createWindow
命令后， Electron 会运行当前目录(.)下的 package.json 文件中 main 字段指定的文件。而运行该文件的进程既是主进程。...因此，event.sender 发送的消息在主进程中还是需要通过 ipcMain.on 方法来监听，而不是通过 webContents.on 方法。 2....这样我们就可以访问到我们在主进程中挂载到 electron.app 对象上的方法。.../utils'); app.utils = utils; // 将在 Electron 层实现的接口绑定到 app 上 index.js 文件(被网页引用的脚本文件)： const { remote...而 EventEmitter 类由 NodeJS 中的 events 模块导出。
在本章中，我们将更深入地探讨，并为与用户操作系统建立更紧密联系的应用程序打下基础。在接下来的几章中，我们将实现触发操作系统用户界面,对文件系统进行读写和访问剪贴板的功能。...我们正在构建一个简单的Markdown编辑器，它允许我们创建新的或打开现有的Markdown文件，将它们转换为HTML，并将HTML保存到文件系统和剪贴板中。...在第一阶段，我们的应用程序将能够 打开并保存文件到文件系统 从这些文件获取Markdown内容 将Markdown内容呈现为HTML 将生成的HTML保存到文件系统中 将生成的...列表3.1 生成应用文件结构 mkdir app && touch app/index.html app/main.js app/renderer.js app/style.css 项目的各个部分是...--在文件末尾的标记中，我们需要渲染进程的代码，它位于同一个目录中的renderer.js中。 --> 29 30 require('.
在本章中，我们将更深入地探讨，并为与用户操作系统建立更紧密联系的应用程序打下基础。在接下来的几章中，我们将实现触发操作系统用户界面,对文件系统进行读写和访问剪贴板的功能。...我们正在构建一个简单的Markdown编辑器，它允许我们创建新的或打开现有的Markdown文件，将它们转换为HTML，并将HTML保存到文件系统和剪贴板中。...在第一阶段，我们的应用程序将能够 打开并保存文件到文件系统 从这些文件获取Markdown内容 将Markdown内容呈现为HTML 将生成的HTML保存到文件系统中 将生成的HTML写入剪贴板 在后面的章节中...图3.2 我们工程结构 [figure32.jpg] 列表3.1 生成应用文件结构 mkdir app && touch app/index.html app/main.js app/renderer.js...--在文件末尾的标记中，我们需要渲染进程的代码，它位于同一个目录中的renderer.js中。 --> require('.
i --save-dev electron 在同一个文件夹中创建一个名为 index.js 的文件，内容如下： const { app, BrowserWindow } = require('electron...在其中，复制 Greenworks 项目根文件中的 greenworks.js 文件和 lib 文件夹。...在 lib 文件夹中，将文件 greenworks-win64.node 替换为你在上一步中构建的文件。...现在只需在你的电子项目的 index.js 文件顶部添加以下行： const greenworks = require(‘./greenworks/greenworks’); 大功告成！...我发现更简单的方法是通过编辑构建项目时由 Cocos 生成的结果HTML（在 cocosExport 文件夹中的 index.html），将以下内容添加到输出 HTML，在 tag之前。
注意 因为 Electron 将 Node.js 嵌入到其二进制文件中，你应用运行时的 Node.js 版本与你系统中运行的 Node.js 版本无关。 2.2. 创建你的应用程序 2.2.1....执行期间，Electron 将依据应用中 package.json配置下main字段中配置的值查找此文件，您应该已在应用脚手架步骤中配置。...在 Electron 中，每个窗口中无论是本地的HTML文件还是远程URL都可以被加载显示。 此教程中，您将采用本地HTML的方式。 在您的项目根目录下创建一个名为index.html的文件： 将index.html加载进一个新的BrowserWindow实例。...process.versions 对象，并运行一个基本的 replaceText 辅助函数将版本号插入到 HTML 文档中。
html> 添加程序主入口 首先我们需要在项目根目录添加main.js文件 然后添加如下内容 //获取依赖 //app:模块，它控制应用程序的事件生命周期 //BrowserWindow...:模块，它创建和管理应用程序 窗口 const { app, BrowserWindow } = require('electron') //创建窗体并指定第一个要显示的页面index.html const...文件 并添加如下内容 window和 document全局渲染器 process.versions是Node.js环境 preload.js //对window添加一个监听 window.addEventListener...把preload.js加载到Electron中 __dirname 字符串指向当前正在执行脚本的路径 (在本例中，它指向你的项目的根文件夹) path.join API 将多个路径联结在一起，创建一个跨平台的路径字符串...main.js //获取依赖 //app:模块，它控制应用程序的事件生命周期 //BrowserWindow:模块，它创建和管理应用程序 窗口 const { app, BrowserWindow }
注意 因为 Electron 将 Node.js 嵌入到其二进制文件中，你应用运行时的 Node.js 版本与你系统中运行的 Node.js 版本无关。...执行期间，Electron 将依据应用中 package.json配置下main (opens new window)字段中配置的值查找此文件，您应该已在应用脚手架 (opens new window...在 Electron 中，每个窗口中无论是本地的HTML文件还是远程URL都可以被加载显示。 此教程中，您将采用本地HTML的方式。 在您的项目根目录下创建一个名为index.html的文件： <!...') 然后，添加一个createWindow()方法来将index.html加载进一个新的BrowserWindow实例。...process.versions 对象，并运行一个基本的 replaceText 辅助函数将版本号插入到 HTML 文档中。
在本章中，我们将添加触发本机文件对话框的功能，并从文件系统上的任何位置选择文本文件并将其加载到应用程序中。在这章的最后，渲染进程的浏览器窗口中的“打开文件”按钮将从主进程触发“打开文件”对话框。...图4.5显示了通过对话框打开图像文件而不是文本文件时的问题结果。 ? 图4.5 如果用户选择非文本文件，函数将记录二进制数据。...在macOS中，我们能够从窗口顶部从表格的形式显示对话框，而不是显示在窗口前面(清单4.6)。.../main.js'); 现在，我们可以在渲染器进程中调用从主进程导出getFileFromUser()函数。让我们替换事件监听器中的功能，以触发Open File对话框，而不是触发警报。...HTML文件加载到渲染器进程中。
在之前我们知道electron通过main.js这个文件里new一个BrowserWindow来新建一个窗口，同样的，这个应用的弹窗，也可以通过new一个BrowserWindow来新建： const...我们可以参照第一个窗口的做法用win.loadURL()来决定加载html文件。但是react项目打完包只有一个index.html啊，新的窗口应该从哪里加载html呢。接下来我们就来解决这一问题。...然后项目下会多出两个文件夹，config和scripts，我们开发中一般只需关心config文件下的webpack.config.js，paths.js，webpackDevServer.config.js...，从网上也是只搜到了解决方案而没有搜到原因，如果有前端小伙伴明白其中的原因，希望可以指点一二，不胜感激！...经过几天的更新，目前算是较为完整的实现了将一个基于react的web应用利用electron变成了一个桌面应用。
我选择使用set而不是数组，因为这样更容易删除元素。这个清单显示了如何用JavaScript创建一个Set。 列表5.1 创建一个跟踪新窗口的集合: ....有了跟踪应用程序所有窗口的数据结构，下一步是将创建BrowserWindow(列表5.2)从应用程序的"ready"事件监听器移到它自己的函数中。...在清单5.4中，让我们重构getFileFromUser()函数，以接受一个给定的窗口作为一个参数，而不是总是假设范围中有一个mainWindow实例。...}; ---- 将对当前窗口的引用传递给主进程 从文件系统读取文件内容之后，我们将文件的路径和内容作为第一个参数传入并发送到窗口。...下面是app/renderer.js中文件的所有代码。 列表5.9 newFileButton在渲染器进程中的实现: .
✧ 为什么不是单个进程? Web浏览器是非常复杂的应用程序。除了显示网页内容的主要功能外，它们还有许多次要的职责，比如管理多个窗口(或标签)和加载第三方扩展。...主进程运行在Node.js环境中，这意味着它有能力要求模块并使用所有Node.js的api。 主进程的主要目的是使用BrowserWindow模块创建和管理应用程序窗口。...= require('path') // 创建一个createWindow()函数，用于将index.html加载到新BrowserWindow实例中 const createWindow = ()...预加载脚本可以在BrowserWindow构造函数的webPreferences选项中附加到主进程。...预加载脚本里的自己编写的接口，并把它通过script标签引到index.html页面中去： index.js console.log(window.myAPI) // => undefined index.html
*/ 创建主脚本文件 主脚本指定了您将运行主进程的 Electron 应用程序的入口点(通常情况下是 main.js 文件)【后续代码结构中会有示例说明】。...第 3 行：在此之后，您定义一个函数，该函数创建一个 新的浏览窗口 启用了节点集成，将index.html文件加载到此窗口中（第 12 行，稍后我们将讨论该文件），并打开开发人员工具（第 13 行）。...// 在main 文件夹下的 index.js 中 //引入 let ipcMain = require('electron').ipcMain; // 通过命令进行判断 //接收最小化命令 ipcMain.on...tbody下面也是只是渲染了几个tr空标签，而自己也是找了好久的问题 解决问题 打开/webpack.renderer.config.js文件搜索whiteListedModules //let...安装elementui npm install element-ui -s 然后在main.js文件中全局引入，打开 src/renderer/main.js： import Element from
介绍 使用 JavaScript，HTML 和 CSS 构建跨平台的桌面应用程序 基于 Chromium 和 Node.js 让你可以使用 HTML, CSS 和 JavaScript 构建应用...&& cd Hello-world npm init -y 记得修改入口文件，并在根目录创建入口文件 main.js // package.json { ......"main": "main.js", ... } 2.安装electron依赖 npm install --save-dev electron 3.在package.json配置文件中的scripts... html> 6.修改主入口main.js代码 // 在文件头部引入 Node.js 中的 path 模块 const path = require('path') /...具体参数：https://github.com/electron/electron-packager 将网站直接生成桌面应用 用上面手动或者脚手架的方式创建初始化文件 修改 main.js const
Electron用 web 页面作为它的 GUI，而不是绑定了 GUI 库的 JavaScript。...main.js文件并添加如下代码： const { app, BrowserWindow } = require("electron"); const isDev = require("electron-is-dev... html> 到这里main.js， index.html 和 package.json 这几个文件都有了。万事俱备，来运行这个项目。...在 electron 中，主进程和渲染进程的通信主要有以下几种方式： ipcMain、ipcRender Remote 模块 进程通信将稍后在下文详细介绍。 BrowserWindow 的创建 ?...Electron中, 与GUI相关的模块（如 dialog, menu 等)只存在于主进程，而不在渲染进程中 。为了能从渲染进程中使用它们，需要用ipc模块来给主进程发送进程间消息。
完成一个HelloWorld页面 首先创建html页面并编写相关内容 创建main.js或index.js作为主进程控制文件，编写整个应用进程的启动逻辑 初始化nodejs文件 启动electron服务...('closed' ,()=>{ mainWindow=null //将主窗口置空，达到关闭效果 }) }) Electron中的主进程与渲染进程 由于Electron基于Chromium...package.json中的main属性声明，一般为main.js或index.js，创建或销毁窗口等所有系统事件，都需要定义在主进程的控制文件中，统一由主进程管理。...每个渲染进程都是独立的，任意一个渲染进程报错或崩溃都不会影响其他渲染进程运行 主进程和渲染进程的区别 主进程通过BrowserWindow创建页面 每个BrowserWindow实例都在自己的渲染进程中运行..., 当BrowserWindow实例被销毁后, 相应的渲染进程也会被终止 Electron运行流程 读取package.json的中的入口文件,即main.js main.js在主进程中创建渲染进程 读取应用页面的布局和样式
创建 HTML 在 Electron 中，每个窗口都可以加载本地或者远程 URL，这里我们先创建一个本地的 HTML 文件。 将 index.html 加载进一个新的 BrowserWindow 实例。...预加载脚本 前面讲到我们会在 HTML 文件中插入 Electron 的版本号。... 入口文件引入 ipcMain 模块，并修改 BrowserWindow 的实例化参数，开启渲染进程的 Node.js 环境。...webContents 是一个 EventEmitter，负责渲染和控制网页，是 BrowserWindow 对象的一个属性。修改一下 index.js 文件。
你通常使用这个模式从你的web内容中调用一个主进程API。我们将通过创建一个简单的应用程序来演示这种模式，该应用程序可以通过编程方式更改窗口的标题。...在下面的例子中，我们将从渲染进程中打开一个选择本地文件对话框，并返回所选文件的路径。 下面是案例涉及的所有代码： index.html 将创建一个调用dialog模块的showOpenDialog方法的函数handleFileOpen()，用于返回用户选择的文件路径的值。...然后在#filePath元素中显示选定的文件路径。...为了演示这个通信模式，将构建一个由菜单栏控制的数字计数器。 index.html <!
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
腾讯会议
云直播
对象存储
