electron核心我们可以分成2个部分,主进程和渲染进程. 主进程: 主进程连接着操作系统和渲染进程,可以把她看做页面和计算机沟通的桥梁. Electron 运行 package.json 的 main 脚本的进程被称为主进程. 在主进程中运行的脚本通过创建web页面来展示用户界面. 一个 Electron 应用总是有且只有一个主进程. 渲染进程: 渲染进程就是我们所熟悉前端环境了.只是载体改变了,从浏览器变成了window.传统的web环境我们是不能对用户的系统就行操作的.而electron…

Visual Studio Code调试electron主进程 作者: jekkay 分类: electron 发布时间: 2017-06-11 14:56  一·概述 此文原出自[水滴石]: http://www.easysb.cn 对于窗口中的javascript脚本,我们可以通过谷歌浏览器的很多插件来调试,比如DevTools等.但是对于Electron中的主程序,我们需要额外的工具和方法来进行调试. 对于Electron程序,可以通过以下的命令启动程序,以方便外部调试工具通过V8调试协议…

一介绍 electron分为主进程和渲染进程,主进程负责和原生交互,控制窗口等. 渲染进程就是普通网页.主进程和渲染进程可以通过ipcMain(主进程使用)及ipcRenderer(渲染进程用)通信 quick-start中main.js为主进程入口文件 index.html为渲染进程入口文件 另外很重要的一点使用electron没有跨域限制!!! 二 打包 1.快速运行quick-start(开发时启动) git clone https://github.com/electron/electr…

本文由葡萄城技术团队于博客园原创并首发 转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者.   在开始之前,我想您一定会有这样的困惑:标题里的Electron 是什么?Electron能做什么?许多伟大的公司使用Electron框架的原因又是什么? 带着这些问题和疑惑,通过本文的介绍,可助您全面地认识Electron这门新兴的技术,迅速找到其入门途径,并理解Electron为何被称为当下开发桌面App的最佳选择.   初探Electron一.Electro…

背景 目前社区两大Vue+Electron的脚手架:electron-vue和vue-cli-plugin-electron-builder, 都有这样那样的问题,且都还不支持Vue3,然而Vue3已是大势所趋, Vite势必也将成为官方Vue脚手架, 下图是尤雨溪在开发好Vite之后与webpack之父的对话 所以开发一个Vite+Vue3+Electron的脚手架的需求日趋强烈 我前段时间做了一个, 但是发现了一些与Vite有关的问题, 比如:Vite会把开发环境的process对象吃掉的问…

Electron团队提供remote模块给开发者, 主要目的是为了简化渲染进程和主进程互访的难度, 这个目的却是达到了. 但也带来了很多问题, 归纳起来主要分为以下四点: 第一:它很慢 通过remote模块可以访问主进程的对象.类型.方法, 但这些操作都是跨进程的, 跨进程操作性能上的损耗可能是进程内操作的几百倍甚至上千倍. 假设你在渲染进程通过remote模块创建了一个BrowserWindow对象, 不但你创建这个对象的过程很慢, 后面你使用这个对象的过程也很慢. 小到更新这个对象的属性,…

新用户购买<Electron + Vue 3 桌面应用开发>,加小册专属微信群,参与群抽奖,送<深入浅出Electron>.<Electron实战>作者签名版. 1等奖:<深入浅出Electron>+<Electron实战> 2等奖:<深入浅出Electron> 3等奖:<Electron实战> 抽奖活动是掘金组织的,仅限近几日加入微信群的新成员(目前人还不多),我负责抽奖.邮寄,11月20日开始抽奖.凡参与抽奖的读者都有…

MySQL可以很好的支持大数据量的存取,但是一般说来,数据库中的表越小,在它上面执行的查询也就会越快.因此,在创建表的时候,为了获得更好的性能,我们可以将表中字段的宽度设得尽可能小. 如果重复代码只是相似但不是完全相同,运用 塑造模板函数(Form Template Method) 获得一个 模板方法模式(Template Method) . 与我们所依赖的构件一样,插件也是基于坐标保存在我们的Maven仓库当中的.在用到插件的时候会先从本地仓库查找插件,如果本地仓库没有则从远程仓库查找插件并下…

生态系统 Redux 是一个体小精悍的库,但它相关的内容和 API 都是精挑细选的,足以衍生出丰富的工具集和可扩展的生态系统. 如果需要关于 Redux 所有内容的列表,推荐移步至 Awesome Redux.它包含了示例.样板代码.中间件.工具库,还有很多其它相关内容.要想学习 React 和 Redux ,React/Redux Links 包含了教程和不少有用的资源,Redux Ecosystem Links 则列出了 许多 Redux 相关的库及插件. 本页将只列出由 Redux 维护者…

ipcMain https://electronjs.org/docs/api/ipc-main 当在主进程中使用时,它处理从渲染器进程(网页)发送出来的异步和同步信息, 当然也有可能从主进程向渲染进程发送消息 ipcRenderer https://electronjs.org/docs/api/ipc-renderer 使用它提供的一些方法从渲染进程 (web 页面) 发送同步或异步的消息到主进程. 也可以接收主进程回复的消息 使用自定义的 最小化,最大化,关闭按钮 渲染进程 html 片段…

对于electron以及nodejs开发,是一只小菜鸟,第一次想做个应用 只能边学边做,遇到各种各样的问题. 1.不想把所有的主进程函数放到一个文件中,这样文件比较乱,并且不好处理 想法:将另一个js文件引入到该文件中,进行调用等 问题:js不存在互相调用的功能 解决方案: 自定义nodejs模块,并在main.js中导入,然后进行处理(以下代码来自网络) 'use strict'; const electron = require('electron'); const app = electr…

上一篇讲了使用electron进行打包的配置相关文件,这篇主要讲electron中很重要的通信方式. 首先解释一个概念: electron打包的应用包含两个部分 electron的环境(node),也就是主进程. web渲染环境,副进程. 这两个环境之间是相互隔离的,无法直接进行数据通信,所以有了这篇文章. 三个角色: ipcRender ipcMain webContents ipcRenderer用于渲染进程 ipcRenderer.on(channel, listener) --> cha…

1.打开VS Code,使用文件->打开,打开程序目录 2.切换到调试选项卡 3.打开launch.json配置文件 4.在“附加到进程”节点上增加localhost配置 5.使用命令行启动electron 6.在VS Code里启动附加到进程调试 7.命令行中brk的意思是在第一行就开始断点,在main.js中设置断点,执行继续(F5)即可以跳到main.js断点处…

背景 由于某个Electron应用,需要主进程.渲染进程.webview之间能够互相通讯. 不过因为Electron仅提供了主进程与渲染进程的通讯,没有渲染进程之间或渲染进程与webview之间通讯的办法,所以只能寻找其他方案来解决. 研究一:ipcMain/ipcRenderer Electron主进程与渲染进程的通讯,就是用ipcMain/ipcRenderer这两个对象. // 在主进程中. const { ipcMain } = require('electron') ipcMain.o…

本章主要内容: 使用Electron的dialog模块实现一个本机打开文件对话框 促进主进程和渲染器进程之间的通信 将功能从主进程暴露给渲染器进程 使用Electron的remote模块从主进程导入功能到渲染器进程 使用webContents模块将信息从主进程发送到呈现器进程,并使用ipcRenderer模块为来自主进程的消息设置监听器 在前一章中,我们为第一个Electron项目打下了基础,这是一个笔记应用程序,它从左窗格中取出Markdown,并在右窗格中将其呈现为HTML.我们设置了主进程…

我的electron教程系列 electron教程(一): electron的安装和项目的创建 electron教程(二): http服务器, ws服务器, 进程管理 electron教程(三): 使用ffi-napi引入C++的dll   引言   这次, 我们一起通过几个例子, 进一步了解node.js+electron.   三个例子:   搭建一个http服务器, 通过web对服务器进行访问 搭建一个ws服务器, 通过web向服务器发送消息 进程管理, 打开/关闭一个外部进程   例子1…

Electron结合React,在渲染进程中使用 node 模块 问题 将create-react-app与electron集成在了一个项目中.但是在React中无法使用electron.当在React中使用require('electron')时就会报TypeError: fs.existsSync is not a function的错误.因为React中无法使用Node.js的模块. 解决方法1 利用window.require引入 const electron = window.requ…

我们知道开发Electron应用,难免要涉及到跨进程通信,以前Electron内置了remote模块,极大的简化了跨进程通信的开发工作,但这也带来了很多问题,具体的细节请参与我之前写的文章: https://www.cnblogs.com/liulun/p/15217180.html Electron团队把remote模块拿掉之后,开发者就只能使用ipcRenderer,ipcMain,webContents等模块收发跨进程消息了,这并没有什么问题,但写起来非常麻烦,跨进程消息多了之后,也很难管…

…

目录结构: index.js是主进程js. const electron = require('electron') const app = electron.app const BrowserWindow = electron.BrowserWindow //主进程 const ipc = require('electron').ipcMain; app.on('ready',function(){ var mainWindow = new BrowserWindow({ width: 800…

对于electron是个新手,下面纯属个人理解.如有错误,欢迎指出.   一.安装 如果你本地按照github上的 # Install the `electron` command globally in your $PATH npm install electron-prebuilt -g 安装不起来的话,没事.按照这个博友的方法来安装即可.Electron安装   二.Electron是什么 类似NW.js.但是好像比它强大很多.而且社区很活跃,很有前途.   三.废话不多说,直接上实例.…

Electron能干嘛 Vscode 基于Electron开发的,他是用来开发桌面软件的,可以轻易的跨平台 他的前身是atomshell,图标很丑,不用在意,一点也不像vscode也不用在意.   Let's go Electron 是基于Node Chromium V8 组合而来,目前的版本是1.3.3   https://github.com/electron/electron/releases/download/v1.3.3/electron-v1.3.3-win32-x64.zip  …

1.全局安装electron npm install electron -g 在cmd 直接输入 electron 直接启electron 2.编写第一个Electron应用 在任何地方,建立一个app的目录并新建3个文件: app/ ├── package.json ├── main.js └── index.html package.json { "name" : "your-app", "version" : "0.1.0&quo…

一个能让你用Web技术开发桌面应用的开源项目.这里做一个笔记(非正式文章): 官网地址:http://electron.atom.io/ API相关 Electron提供的主进程接口.渲染进程接口.共用接口等. Process(进程):继承NodeJS的process模块,增加属性和方法.事件. Chrome 命令行开关 :Chrome相关的配置. <webview> Tag :单独的进程中运行(与iframe相比),并增强很多地方,比iframe好用. window.open相关接口. 主进…

现在需要做一个桌面应用,心里有点不甘,因为想做出一个简单的客户端,你要么使用Java的Swing编程,要么会使用MFC等等,这样学习的代价太高,也不便维护,于是了解了一下Electron,Electron提供了丰富的本地(操作系统)的API,使你能够使用纯JavaScript来创建桌面应用程序.与其它各种的Node.js运行时不同的是Electron专注于桌面应用程序而不是Web服务器,这并不意味着Electron是一个绑定图形用户界面(GUI)的JavaScript库,取而代之的是,Elect…

XCEL 是由凹凸实验室推出的一个 Excel 数据清洗工具,其通过可视化的方式让用户轻松地对 Excel 数据进行筛选. XCEL 基于 Electron 和 Vue 2.0 进行开发,充分利用 Electron 多进程任务处理等功能,使其拥有高性能.跨平台(windows 7+.Mac 和 Linux)的特性. 落地页:https://xcel.aotu.io/ ✨✨✨ 项目地址:https://github.com/o2team/xcel ✨✨✨ 项目背景 用户研究的定量研究和轻量级数据处…

一.main process 和 web page 通信 electron框架主进程(Main Process)与嵌入的网页(web page,也就是renderer process)之间的通信 Main.js里添加代码 //通信模块,mian process与renderer process(web page) const {ipcMain} = require('electron') //监听web page里发出的message ipcMain.on('asynchronous-messa…

创建简单的Electron程序 1.首先,切换到你的项目空间,我的在 D:\ProjectsSpace\ElectronProjects\ElectronTest,ElectronTest是案例项目文件夹 ①.打开cmd,切换到自己的项目文件目录 然后输入命令 npm init创建 package.json文件, 然后按照步骤一步一步来,一直到最后 最后成功的图: 内容为: { "name": "package.json", "version":…

使用 electron 做个播放器 本文同步更新在:https://github.com/whxaxes/blog/issues/8 前言 虽然 electron 已经出来好长时间了,但是最近才玩了一下,写篇博文记录一下,以便日后回顾. electron 的入门可以说是相当简单,官方提供了一个 quick start,很流畅的就可以跑起来一个应用.因此,如何入门就不赘述了,直接说一下如何做个播放器. 为啥要做个播放器呢,因为我在很久很久以前写过一个网页版的音频可视化播放器,但是因为是在页端,所以…

Electron 提供了一个实时构建桌面应用的纯 JavaScript 环境.Electron 可以获取到你定义在 package.json 中 main 文件内容,然后执行它.通过这个文件(通常我们称之为 main.js),可以创建一个应用窗口,这个应用窗口包含一个渲染好的 web 界面,还可以和系统原生的 GUI 交互. 具体来说,就是当你启动了一个 Electron 应用,就有一个主进程(main process )被创建了.这条进程将负责创建出应用的 GUI(也就是应用的窗口),并处理用…