当我们执行 electron . 命令后, Electron 会运行当前目录(.)下的 package.json 文件中 main 字段指定的文件。而运行该文件的进程既是主进程。
在Electron中,进程通过开发人员定义的“通道”与ipcMain模块和ipcRenderer模块进行通信。这些通道是任意的(您可以任意命名它们)和双向的(您可以为两个模块使用相同的通道名称)。要从渲染进程向主进程发送单向IPC消息,可以再预渲染脚本preload.js里使用ipcRenderer发送API发送消息,然后在main.js里用ipcMain.on接收。你通常使用这个模式从你的web内容中调用一个主进程API。我们将通过创建一个简单的应用程序来演示这种模式,该应用程序可以通过编程方式更改窗口的标题。
有个mini-electron程序,在渲染进程调用await ipcRenderer.invoke,然后主进程处理完后通知渲染进程,emitIPCEvent -》ipcRenderer.on:
我们知道开发Electron应用,难免要涉及到跨进程通信,以前Electron内置了remote模块,极大的简化了跨进程通信的开发工作,但这也带来了很多问题,具体的细节请参与我之前写的文章:
窗口A的渲染进程发消息给主进程 const { clipboard, ipcRenderer, remote } = require('electron'); ipcRenderer.send('imgUploadMain', { id: dom.id, siteId: this.siteId, url: dom.src }); 主进程收到
在Electron12时候被废弃,使用必须配置enableRemoteModule
昨日(2016.09.13)本文发表后,获得了一定的阅读和转发量,但经部分网友反馈和仔细审核后发现,在与 NW.js 对比的环节,言辞欠妥,且数据的真实性有待考究,特此将争议部分删除,同时借此诚挚地向 NW.js 的作者以及各位读者反馈表示感谢,期待更多深入的交流和分享,修订后的版本如下: Stack Overflow 联合创始人 Jeff Wood 曾说过,任何一个能用 JavaScript 编写的应用系统,最终都必将使用 JavaScript 实现。 简介 Electron 是一款可以通过 Web前端技
通过前面的学习,我们知道在Electron中,主进程和渲染进程是被换分成不同的功能的,主进程有完整的Node环境,而渲染进程默认是运行的是浏览器环境。这样划分的好处是:
Electron 可以让你使用纯 JavaScript 调用丰富的原生(操作系统) APIs 来创造桌面应用。 你可以把它看作一个 Node. js 的变体,它专注于桌面应用而不是 Web 服务器端。
前阵子将排课系统的一些功能,提供给 solar 编辑器使用,solar 是基于互动课件编辑器 Cocos ICE 进行二次定制和个性化开发的课件制作系统,其底层是 Cocos Creator。而 Cocos Creator 是基于 Electron 进行开发的,所以学习了一些关于 Electron IPC 通信的相关知识,在这里做一个总结。 文章的开始,先让我们来了解下 Electron 是什么。 1. 什么是 Electron? Electron 官网只有一句简单的话: 使用 JavaScript,HTM
Electron作为一种基于JS语言搭建的桌面框架,其基础视图容器是包含了Chromium内核的窗口,称为BrowserWindow。对于更复杂的项目,如果需要在窗口内部嵌入第三方业务的页面,则有BrowserView、webView Tag和Iframe三种方案可供选择。
使用 JavaScript, HTML 和 CSS 构建的跨平台桌面应用,能够兼容 Mac, Windows 和 Linux 环境,我们所熟悉的 Skype, Gihub Desktop, Visual Studio Code, Atom 等等软件,都是通过 Electron 进行构建的。
使用webview标签 <webview src="https://www.baidu.com" preload="./preload.js"></webview> 向webview注入JS // preload.js const { contextBridge } = require('electron') contextBridge.exposeInMainWorld('apiKey', { fn: () => {} }) // 在webview页面使用 window.apikey.fn()
昨天给大家介绍了 ElectronEgg 这款开源桌面应用开发框架。那么我们能不能搭配使用Python语言开发一套自己的工具箱呢!
vue引入electron的ipcRenderer等其它模块会出现这种情况 解决方案 自定义事件 使用渲染进程捕捉
electron分主进程和渲染进程,渲染进程又分主窗口的渲染进程和子窗口的渲染进程
在 Electron 在实现渲染进程到主进程通信时,无论是单向通信还是双向通信都必须经过:编写处理函数(主进程)、注册事件监听(主进程)、暴露 API(预加载脚本)和执行 API(渲染进程)4 个步骤。其中除了编写处理函数和执行 API 两个与业务代码紧相关的步骤外,注册事件监听和暴露 API 均具有共性且需要重复编码的特点,这一特点又恰巧符合 AOP 切面编程中反射技术的应用场景,所以我选择使用 TypeScript 装饰器来实现这部分代码的优化。
最近一直在做批量测试工具的开发,打包的exe,程序运行也是一个黑乎乎的dos窗口。
目前网上有好多关于electron相关的文章,但是本人在开发的时候发现,网上大部分文章可以说是千篇一律,没有真正的痛点解析啥的很无语 ,好多的问题都需要自己去找、去试,这无异于加大了开发成本与学习成本,所以本篇博客会从electron 的api 到 electron +vue 组合式开发到 打包 及开发过程中遇见的问题分门别类的进行说明, 当然在最后的文末我会将我写的 electron + vue全家桶的git开源项目附上,需要的话就去git 吧
Dear,大家好,我是“前端小鑫同学”,😇长期从事前端开发,安卓开发,热衷技术,在编程路上越走越远~ Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。 嵌入 Chromium 和 Node.js 到 二进制的 Electron 允许您保持一个 JavaScript 代码代码库并创建 在Windows上运行的跨平台应用 macOS和Linux——不需要本地开发 经验。 前情概要: 上一篇通过快速入门我们搭建了最基础的HelloWorld模型,我们接下来就要在这
简单来说,Electron就是可以让你用Javascript、HTML、CSS来编写运行于Windows、macOS、Linux系统之上的桌面应用的库。本文的目的是通过使用Electron开发一个完整但简单的小应用:记事本,来体验一下这个神器的开发过程。本文犹如Hello World一样的存在,是个入门级笔记,但如果你之前从未接触过Electron,而又对它有兴趣,某想信这会是一篇值得一看的入门教程。 PS:这篇文章是基于Windows的开发过程,未对macOS、Linux作测试。
remote在旧版本是内置的模块, 但是在新版本将被弃用,要用@electron/remote进行代替
Electron中,与GUI相关的模块(如 dialog, menu 等)只存在于主进程,而不在渲染进程中
在nwjs里,宿主页面与做过特殊标记的iframe页面(nwdisable nwfaketop和nwUserAgent)通信,并没有什么特别的地方
目前Electron在github上面的star量已经快要跟React-native一样多了 这里吐槽下,webpack感觉每周都在偷偷更新,很糟心啊,还有Angular更新到了8,Vue马上又要出正
使用Electron开发客户端的时候,我们可以做在线激活,也可以做本地激活,这里我们就先实现一个本地激活的方式。
相信看了前面的文章,大家对于预加载脚本已经非常了解了,对于之前篇章中已经测试并解释清楚的部分,不会再次详细解释
这些只是Electron的依赖项,跨平台最关键的自然是适配层,由供node调用的C++模块来完成平台适配,提供系统级的平台接口
如果您想要手动在亮/暗模式之间切换,您可以通过在nativeTheme模块的themeSource属性中设置所需的模式来做到这一点。此属性的值将传播到您的渲染进程。任何与prefers-color-scheme相关的CSS规则都将相应地更新。
hello,好久不见,最近笔者花了几天时间入门Electron,然后做了一个非常简单的应用,本文就来给各位分享一下过程,Electron大佬请随意~
基于跨平台技术Electron集成Vite.js构建桌面端React18后台管理系统应用ElectronRAdmin。支持dark/light主题、中英文/繁体国际化、动态组件权限验证、内置三种布局模板、tabs路由菜单标签栏等功能。
https://www.slimjet.com/chrome/google-chrome-old-version.php
Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。 嵌入 Chromium 和 Node.js 到 二进制的 Electron 允许您保持一个 JavaScript 代码代码库并创建 在Windows上运行的跨平台应用 macOS和Linux——不需要本地开发 经验。
在上一篇 Electron 进程通信 中,介绍了 Electron 中的两种进程通信方式,分别为:
社交魔方平台是京东的 SNS 活动搭建平台,其内置了很多模板,每一个模板都有一个模板 JSON 用于生成表单,运营同学、商家配置了这个表单后就可以生成活动页面了。模板 JSON 是标准的结构化数据,包含名称、类型、控件类型、校验器、默认值等等字段。以往都是采用手写 JSON 的方式,这是非常低效的,而且容易出错。针对其结构化数据的特点可以用 GUI 的方式去编辑,我们基于 Electron[1] 参考 Github Desktop 客户端[2] 的架构编写了一个 JSON 编辑器(参见下图),通过填写表单的方式生成 JSON。所以在这里记录下这个 Electron 编辑器开发过程中可以记录的点和从 Github Desktop 客户端代码中值得学习的点。
有句话叫做“有需求就有市场”,技术领域也同样是如此。在过往的前端领域之上,当面临需要涉及操作系统的时候,前端coder往往显得力不从心。这便是桌面应用的需求造就了 Electron 的到来。
本文由 IMWeb 团队成员 laynechen 首发于 IMWeb 社区网站 imweb.io。点击阅读原文查看 IMWeb 社区更多精彩文章。 Electron 中的两种进程通信方式,分别为: 使用 ipcMain 和 ipcRenderer 两个模块 使用 remote 模块 相比于使用两个 IPC 模块,使用 remote 模块相对来说会比较自然一点。 remote 模块帮我们屏蔽了内部的进程通信,使得我们在调用主进程的方法时完全没有感知到主进程的存在。 remote 底层依旧是通过 ipc 模块
使用Electron开发客户端程序已经有一段时间了,整体感觉还是非常不错的,其中也遇到了一些坑点,本文是从【运行原理】到【实际应用】对Electron进行一次系统性的总结。【多图,长文预警~】
Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。 嵌入 Chromium 和 Node.js 到 二进制的 Electron 允许您保持一个 JavaScript 代码代码库并创建 在Windows上运行的跨平台应用 macOS和Linux——不需要本地开发 经验。
在前一章中,我们为第一个Electron项目打下了基础,这是一个笔记应用程序,它从左窗格中取出Markdown,并在右窗格中将其呈现为HTML。我们设置了主进程并将其配置为生成一个呈现器。我们建立了package.json,安装了必要的依赖项,创建了主进程和呈现器进程,并布置了UI。我们还探索了使我们的应用程序看起来像桌面应用程序的方法,但是我们还没有添加一个传统web应用程序所不能做的功能。
GYP是一种构建自动化工具。node程序中需要调用一些其他语言编写的 工具 甚至是dll,需要先编译一下,否则就会有跨平台的问题,例如在windows上运行的软件copy到mac上就不能用了,但是如果源码支持,编译一下,在mac上还是可以用的。node-gyp在较新的Node版本中都是自带的(平台相关),用来编译原生C++模块。
从搭建开始 使用的是electron-vue 毕竟方便一点 如果只想安装electron 请参见我的另一个文章 https://segmentfault.com/a/11...
Electron 在运行时分为主进程和渲染器进程(渲染进程),主进程可以用NodeJS的 api,渲染进程可以用浏览器的 api
React作为日常使用比较频繁的框架,这里就不详细说明了,这里主要是想通过几篇文章让大家快速上手Electron以及与React完美融合。
要创建自定义菜单,你需要使用 Electron 的 Menu 模块。下面是个例子:
Electron相当于一个浏览器的外壳,可以把网页程序嵌入到壳里面,可以运行在桌面上的一个程序,可以把网页打包成一个在桌面运行的程序,通俗来说就是软件,比如像QQ、优酷、网易音乐等等。功能的强大超出你的想象,可以构建跨平台桌面程序, 本身支持node.js,可以使用node.js的一些模块
领取专属 10元无门槛券
手把手带您无忧上云