Electron简介和使用

zhujuyu 2020-06-06

Electron简介和使用

博客说明

文章所涉及的资料来自互联网整理和个人总结，意在于个人学习和经验汇总，如有什么地方侵权，请联系本人删除，谢谢！

简介

Electron 是 GitHub 发布的跨平台桌面应用开发工具，支持 Web 技术开发桌面应用，其本身是基于 C++ 开发的，GUI 核心来自于 Chrome，而 JavaScript 引擎使用 v8

安装Electron

进入工作目录

# 克隆这仓库
git clone https://github.com/electron/electron-quick-start
# 进入仓库
cd electron-quick-start

安装依赖库

npm install

运行应用

npm start

Electron简介和使用

Electron简介和使用

感谢

万能的网络
以及勤劳的自己

关注公众号：归子莫，获取更多的资料，还有更长的学习计划

: zhujuyu

相关推荐

2021适合移动和桌面应用的JavaScript框架是什么

当听到JavaScript这个词的时候，“web开发”会一下子出现在我们的脑海中，因为JavaScript在很长一段时间里一直是web应用开发最广泛使用的语言，Angular、React和Vue等框架目前也很有名。尽管JavaScript主导着web开发领

游走的豚鼠君 0喜欢 / 0评论 2020-11-10

electron与vue集成

vue init simulatedgreg/electron-vue electron-vue -start

sanallen 0喜欢 / 0评论 2020-07-05

Electron实现音乐播放器 - #1

main.js是我们项目的入口文件（主文件），而项目启动时运行main.js的进程就是主进程，创建窗口、对渲染进程进行调度等等一系列操作都要依靠main.js来实现。const electron = require//引入electron模块。const

sanallen 0喜欢 / 0评论 2020-07-04

Electron - 初体验

npm WARN deprecated : <3 is no longer maintained and not recommended for usage due to the number of issues. Please, upgrade y

electronvolt 0喜欢 / 0评论 2020-07-04

Electron整合React使用搭建开发环境的步骤详解

const { app ,BrowserWindow } = require('electron'). let mainWindow;width: 1024,height: 680,nodeIntegration: true,const urlLocati

sanallen 0喜欢 / 0评论 2020-06-14

electron开发采坑小记

需求很简单，提高运营效率的辅助工具，但是因为一些原因需要做成一个桌面端。从前端一下子跨到PC桌面端开发，听起来跨度有点大，但在实际的开发中因为有了electron的加持，这一切都变的非常便利，丝毫没有跨度的痕迹，完全变成了web开发那一套，让人不禁感叹js

moyigg 0喜欢 / 0评论 2020-06-09

大型Electron应用本地数据库技术选型

由于没有索引机制，关联查询、条件查询等操作效率不高，更新了某项数据之后，要持久化更新操作，又要重写整个文件。Cookies存储容量太小，只能存4kb的内容，而且每次与服务端交互，同域下的Cookie还会被携带到服务端，也没有关联查询、条件查询的机制。现在可

疯狂老司机 0喜欢 / 0评论 2020-06-07

Electron中常用对话框-打开文件对话框、保存文件对话框、提示对话框

用HTML和CSS和JS构建跨平台桌面应用程序的开源库Electron的介绍以及搭建HelloWorld：。在上面搭建好项目以及知道怎样进行调试后，那么Electron有哪些常用的对话框。如果要使用渲染器进程中的对话框对象, 可以使用remote来获得。S

moyigg 0喜欢 / 0评论 2020-06-01

Electron中实现拖拽文件进div中通过File对象获取文件的路径和内容

用HTML和CSS和JS构建跨平台桌面应用程序的开源库Electron的介绍以及搭建HelloWorld：。在上面搭建好项目以及知道怎样进行调试后，需要实现将文件拖拽进div后获取文件的路径和内容。

zhujuyu 0喜欢 / 0评论 2020-05-30

SpringBoot + Vue + Electron 开发 QQ 版聊天工具

主要适用于私有云项目内部聊天，企业内部管理通讯等功能，主要通讯协议websocket。文字聊天，互传文件，离线消息，群聊，断线重连等功能。先看一下效果，下图左边是web版，右边为PC版。springboot: 让开发人员快速开发的一款Java的微服务框架。

viewerlin 0喜欢 / 0评论 2020-05-29

极客手中的利器Electron

作为一个前端开发人员，你可能已经听说过Electron了，你知道VS Code是基于这个技术开发的。目前一些大热的软件：飞书、Slack、WhatsApp都是基于这个技术开发的。即使工作不会涉及到，也应该学一下Electron，因为它是极客手里的利器，你可

zhujuyu 0喜欢 / 0评论 2020-05-28

可用于创建桌面应用程序的优秀JavaScript框架

但是现在JavaScript开发人员可以创建用于web开发的桌面应用程序。Electron是一个由GitHub开发和维护的开源框架。Electron使用Chromium和Node.js，因此您可以使用HTML、CSS和JS创建应用程序。NW.js是由英特尔

yanchuncheng 0喜欢 / 0评论 2020-05-12

蒲公英 · JELLY技术周刊 Vol.05: Rust & Electron 的高性能实践 -- Finda

作者从 JavaScript 下载时间、解析时间、执行时间、内存占用四个角度评测了 jQuery、Angular、React、Vue 四个框架，最终得出结论：「框架不值得」，应该选择原生 JavaScript 或选择超轻量级框架或在服务端渲染。此文可配合的

Trustport 0喜欢 / 0评论 2020-05-06

electron学习系列一

Electron是由Github开发,使用Html,CSS,Javascript构件跨平台桌面应用的一个开源库.Electron通过将Chromium和Node.js合并到同一个环境中,并将其打包为Linux,Mac,Windows系统下的应用来实现这一目

chenyijun 0喜欢 / 0评论 2020-05-05

Electron.Net因网络原因导致的坑.

如果没耐心强行退出,会导致下次运行的时候提示 "Electron failed to install correctly",其实问题在于网络导致黄色部分的文件下载失败.解决方式嘛,其实就是将npm转为国内镜像.如果改配置后还是不行, 建

electronvolt 0喜欢 / 0评论 2020-05-04

Electron Windows增加托盘悬浮框功能

在做Electron Windows 桌面应用时候，做鼠标悬浮到托盘图标上时显示一个悬浮框，但因为Windows没有提供托盘mouse-enter/mouse-leave事件，无法直接做这个功能，考虑到还有mouse-move事件，弄个间接的方式实现。//

游走的豚鼠君 0喜欢 / 0评论 2020-05-01

Electron初始化项目并打包

打包安装打包工具npmi-Delectron-builderpackge修增加配置如下：脚本出增加：。"copyright": "甲乙丙丁少版权所有",注意icon的尺寸是256*256的。这就是说明，被墙了，依赖下

electronvolt 0喜欢 / 0评论 2020-04-21

Electron相关知识以及实践

Electron是由Github开发，用HTML，CSS和JavaScript来构建跨平台桌面应用程序的一个开源库。Electron通过将Chromium和Node.js合并到同一个运行时环境中，并将其打包为Mac，Windows和Linux系统下的应用来

游走的豚鼠君 0喜欢 / 0评论 2020-04-18

electron制作上位机软件篇（一）：编译安装serialport

最近打算做个家居环境监测系统，需要制作一个上位机控制下位机stm32对数据的采集，使用的是串口通信，故需要用到serialport，其中走了不少弯路，但是，经过两天的研究，还是成功编译安装成功。- clean - Removes any generated

electronvolt 0喜欢 / 0评论 2020-04-15

React + electronjs 实现桌面软件开发引入 electronjs 及 node api

React 与 electronjs 安装及运行请百度。import { HashRouter as Router, Link, Route } from ‘react-router-dom‘;import { Button } from ‘element

bapinggaitianli 0喜欢 / 0评论 2020-02-29

使用electron-builder打包时下载electron失败解决方案

electron-builder 在打包时会检测cache中是否有electron 包，如果没有的话会从github上拉去，在国内网络环境中拉取的过程大概率会失败，所以你可以自己去下载一个包放到cache目录里。例如在macos平台打包electron应用

chenyijun 0喜欢 / 0评论 2020-02-24

Electron+Vue – 基础学习(2): 项目打包成exe桌面应用

项目创建完成，启动正常，接下来就是项目打包了。将测试Demo打包成exe桌面应用，点击exe文件，运行项目。书接上文，创建项目有三种方式Git拷贝、直接创建；通过electron社群提供的命令行工具 electron-forge 创建项目，看起来对应的项目

chenyijun 0喜欢 / 0评论 2020-02-13

electron && angular 构建桌面应用（二）

Electron由主进程和渲染器进程所组成。每个进程在应用程序中扮演不同的角色，Electron包含不同的模块来帮助您构建应用程序。某些模块，例如从系统剪贴板读写的能力，在这两种类型的进程中都可用。其他的，比如访问操作系统接口的能力，仅限于主进程。Elec

electronvolt 0喜欢 / 0评论 2020-02-12

Electron 的 cookies 无法存取，带测试对比图

Electron 中 BrowserWindow 提供比较简易的浏览器界面，但是没有直接提供 cookies 持久化和恢复的操作，以至于在关闭窗口后，无法恢复cookies。

zhujuyu 0喜欢 / 0评论 2020-02-12

记录 electron node-gyp报错解决

2，npm install --global --production windows-build-tools // c++环境; 以管理员身份运行cmd [--2017]加这个参数为2017版本。3, node-gyp configure --msvs_

zhujuyu 0喜欢 / 0评论 2020-02-11

Windows 下的 electron 编译常见问题

stack Error: `C:\Program Files \MSBuild\14.0\bin\msbuild.exe` failed with exit code: 1. .bin\babylon: Error: ENOENT: no such fil

electronvolt 0喜欢 / 0评论 2020-02-03

Electron中使用sql.js操作SQLite数据库

它使用存储在内存中的虚拟数据库文件，因此不会保留对数据库所做的更改。但是，它允许您导入任何现有的sqlite文件，并将创建的数据库导出为JavaScript类型的数组。　　SQLite是公共领域，sql.js是MIT许可的。　　Sql.js早于WebAss

Plant 0喜欢 / 0评论 2020-02-03

ArchLinux下electronssr无法启动的解决措施

今天重新配置electron-ssr时发现闪退。并且尝试在终端里启动它。安装python2后出现新报错，由于electron—ssr原开发人员已停止维护，实际上我们在镜像源获取的electron-ssr已经不再更新。需要我们重新配置依赖关系。

zhujuyu 0喜欢 / 0评论 2020-01-12

electron安装操作sqlite3数据库（完整版）

仔细阅读我说的每一个字，要不然你可能会安装不成功。我不知道安装这个sqlite会不会和这个有关，在我查找解决问题的时候，很多博客都提醒要安装，我也不知道要不要安装，如果你一下步骤你没有安装成功，那就可以参考安装一下Python和vs。

MFCJCK 0喜欢 / 0评论 2020-01-11

Quark 基于electron 的跨平台应用开发ide

Quark是基于electron包装的跨平台应用快速开发工具，提供了和vscode一样的开发模式，灵活方便。目前官方文档也比较全，同时为了减少内存的占用，Quark 同时做了一些优化，还是挺不错的

chenyijun 0喜欢 / 0评论 2020-01-01

Electron 7.x以上版本安装提示错误解决方法

升级使用最新的Electron 7.x以上版本，运行提示electron不存在，其实是因为electron install时候对应平台的可执行文件没有下载成功，错误提示如下：。在官方的Git Issues找到了解决方案，就是修改使用另一个淘宝镜像地址。

游走的豚鼠君 0喜欢 / 0评论 2020-01-08

electron集成C++ dll 实践

最近需要做桌面端项目，打算尝试使用electron来开发，开发之前需要调研一些可行性，最关键的一点是：集成公司的统一登录 sdk，登录的 sdk 只有 C++ sdk 才能实现单点登录，所以这里就放弃去集成 js 的 sdk。Google全网，最终放弃ad

游走的豚鼠君 0喜欢 / 0评论 2020-01-07

NPM全局安装依赖权限报错Error: EACCES: permission denied

npm WARN deprecated : c<3 is no longer maintained and not recommended for usage due to the number of issues. Please, upgrade

chenyijun 0喜欢 / 0评论 2020-01-07

Theia架构

　　本节描述了Theia的整体架构。　　Theia被设计为一个可以在本地运行的桌面应用程序，也可以在浏览器和远程服务器之间工作。为了支持这两种工作方式，Theia运行在两个独立的进程中，它们被称之为前端和后端，相互之间通过WebSockets上的JSON-

范群松 0喜欢 / 0评论 2020-01-04

electron-edge-js 环境搭建

确保nodejs环境为10.X . 1.创建工程2.使用npm init初始化程序信息3.使用npm install --save-dev electron添加 electron支持4.使用npm install --save-dev electron-

zhujuyu 0喜欢 / 0评论 2019-12-12

Electron调用C++的DLL

注意，若electron是X64的，则dll也应为X64，同理32位。myAddDll是c++的dll名称，funAdd是其中的一个函数。numA和numB是两个input文本框，CalcButton是按钮。将myAddDll.dll拷贝至electron

zhujuyu 0喜欢 / 0评论 2019-12-10

electron node.js 实现文件拖动读取文件

<button onclick="getProcessInfo()">查询系统信息</button>. -- You can also require other files to run in this pro

chenyijun 0喜欢 / 0评论 2019-12-07

Electron桌面应用框架的使用，结合react项目

// 创建浏览器窗口。// 然后加载应用的 index.html。url 及本地文件形式。// 当 window 被关闭，这个事件会被触发。// 通常会把多个 window 对象存放在一个数组里面，// 与此同时，你应该删除相应的元素。// 部分 API

zhujuyu 0喜欢 / 0评论 2019-12-04

electron中JS报错：require is not defined的问题解决方法

Electron已经发布了6.0正式版，升级后发现原来能运行的代码报错提示require is not defined

moyigg 0喜欢 / 0评论 2019-12-02

我是如何从零学习开发一款跨平台桌面软件的

最近一直在学习 Electron 开发桌面应用程序，目的是想做一个桌面编辑器，虽然一直在使用Typore这款神器，但无奈Typore太过国际化，在国内水土不服，无法满足我的一些需求。决定之后，便开始进行 Electron 的系统学习。Electron 运

游走的豚鼠君 0喜欢 / 0评论 2019-11-26

Electron快速入门

Electron 是一个使用 JavaScript、 HTML 和 CSS 等 Web 技术创建跨平台桌面应用程序的框架，它负责比较难搞的部分，你只需把精力放在你的核心业务开发上即可。说到把精力放到核心业务开发上，这听起来特别诱人，但是很多初学者在第一个

moyigg 0喜欢 / 0评论 2019-11-18

nodejs下 electron 使用 Web Termination

// No idea what these are about. Just copied them from the demo code. const shell = process.env[os.platform() === ‘win32‘ ? ‘COM

Sabrina 0喜欢 / 0评论 2019-11-09

ELECTRON 学习三

"test": "echo \"Error: no test specified\" && exit 1","pack": "electron-pac

chenyijun 0喜欢 / 0评论 2019-11-07

ELECTRON 学习四

"test": "echo \"Error: no test specified\" && exit 1","pack": "electron-pac

electronvolt 0喜欢 / 0评论 2019-11-07

electron开发采坑小记

需求很简单，提高运营效率的辅助工具，但是因为一些原因需要做成一个桌面端。实际上我并非直接采用electron，而是使用了更加懒人的electron-vue。我们知道electron，但是electron-vue是个什么东西呢，我们还需要了解一下。从这个介绍

游走的豚鼠君 0喜欢 / 0评论 2019-11-05

Electron 搭建

相关工具安装yarn add -D cross-env concurrently electron-builder. electron比较大，难安装，建议改为淘宝镜像,或者cnpm安装yarn add -D electron. const {app, Br

sanallen 0喜欢 / 0评论 2019-11-04

electron开发过程中遇到的一些坑

场景：在用户退出app时，需要提示用户是否确认退出，此时弹窗出现，如果点击确认就继续退出，执行回调，否则的话，不退出问题：点击叉号的时候，回调中返回的值是0，由于代码中写的buttons顺序为['确认', '取消']，点击“确认”的时候对应的respons

chenyijun 0喜欢 / 0评论 2019-11-03

在优麒麟上使用 Electron 开发桌面应用

使用 Web 标准来创建桌面 GUI，上手快、成本低、跨平台、自适应分辨率，这些都是 Electron 的优势。Electron 通过将 Chromium 和 Node.js 合并到同一个运行时环境中，并将其打包为 Mac、Windows 和 Linux

sanallen 0喜欢 / 0评论 2019-10-29

基于 Electron 的 Redis 图形化客户端 k-Redis

k 目前支持 string、hash、list 等数据类型。k 提供一个简易的命令行执行功能，可以执行一些常见的 redis 命令。redis 订阅发布提供命令行工具黑色主题，来自 Arattian/element-theme-dark背景图片自动切换界面

MornLi 0喜欢 / 0评论 2019-11-02