Electron学习笔记

环境搭建

npm install -g yarn
yarn initgit clone git@gitee.com:zzf35/electron-quick-start.git
cd electron-quick-start
将electron镜像文件加入文件夹中
npm i
npm run start

快速入门工具地址

  • https://www.electronjs.org/fiddle

package.json 配置

"start": "nodemon --watch main.js --exec \"electron .\""

主进程 - Main Preocess

  • 可以使用和系统对接的Electron API -创建菜单,长传文件等
  • 创建 渲染进程 - Renderer Process
  • 全面支持 Node.js
  • 只有一个,作为整个程序的入口点

渲染进程 - Renderer Prodess

  • 可以有多个,每个对应一个窗口
  • 每个都是一个单独的进程
  • 全面支持Node.js 和 DOM API
  • 可以使用一部分Electron 提供的API

进程之间的通讯方式

  • 使用IPC在进程之间进行通讯

Domo

main.js

const {app ,BrowserWindow , ipcMain} = require('electron')app.on('ready',() => {// 创建主窗口const mainWindow = new BrowserWindow({width: 800,height: 600,webPreferences: {// 可以使用node.js 的 APInodeIntegration: true}})// 调用文件mainWindow.loadFile('index.html')// 第一个是事件对象(复杂结构),第二个接受的事件数据ipcMain.on('message',(event,arg)=>{console.log(arg)// event.sender -触发该事件的发送者 === mainWindowevent.sender.send('reply', 'hello from main') })// 创建子窗口const secondWindow = new BrowserWindow({width: 800,height: 600,webPreferences: {// 可以使用node.js 的 APInodeIntegration: true},parent:mainWindow  // 依赖父窗口,当父窗口关闭,子窗口也关闭})// 调用文件secondWindow.loadFile('second.html')
})

renderer.js

const { ipcRenderer } = require('electron')window.addEventListener('DOMContentLoaded', () => {ipcRenderer.send('message', 'hello from renderer') // 事件名称,事件数据ipcRenderer.on('reply', (event, arg) => {document.getElementById('message').innerHTML = arg;})
})

使用Electron store 持久化数据

  • 主进程与渲染进程都可以使用
  • app.getPath(‘userData’) 查看保存数据的文件位置

使用方式

  1. npm install electron-store --save
const Store = require('electron-store');const store = new Store({'name':'DATA_NAME'}); // 重命名
// 设置
store.set('key', '												

Electron学习笔记相关推荐

  1. Electron学习笔记(五) 通过Addon(n-api)实现可扩展接口

    Electron学习笔记(四) Electron使用的API接口 一方面electron给开发者提供了不少API, 另一方面, 也可以使用node.js的API. 但是, 有时候开发者还是想用自己实现 ...

  2. Electron学习笔记(技术胖)

    Electron学习笔记(技术胖) 标签(空格分隔): 前端 桌面 技术胖 Electron 安装 前提:已经安装node,并且是10以上的版本 cnpm install electron --sav ...

  3. Electron学习笔记 4 添加系统功能

    通知 (Windows, Linux, macOS) 所有三个操作系统都提供了应用程序向用户发送通知的手段. Electron允许开发者使用 HTML5 Notification API 发送通知,并 ...

  4. 无人驾驶车辆路径规划及轨迹跟踪控制学习笔记(2)

    目录 汇总 学习笔记 汇总 在关键交通场景中,轨迹规划和轨迹跟踪控制是自动驾驶车辆避免碰撞的两个关键.它不仅需要系统功能,而且需要强大的实时性. 我们集成了自动驾驶汽车的轨迹规划器和跟踪控制器,通过轨 ...

  5. Effective Java(第三版) 学习笔记 - 第四章 类和接口 Rule20~Rule25

    Effective Java(第三版) 学习笔记 - 第四章 类和接口 Rule20~Rule25 目录 Rule20 接口优于抽象类 Rule21 为后代设计接口 Rule22 接口只用于定义类型 ...

  6. ARM学习笔记--LPC1788引脚分析

    http://zgmgypb.blog.163.com/blog/static/962028192012730104640980/ RM学习笔记--LPC1788引脚分析 一.电源分析 要弄清楚单片机 ...

  7. Elasticsearch-7.x学习笔记

    本文转载自:阅读原文 文章目录 1. 单节点安装 2. ES安装head插件 3. Elasticsearch Rest基本操作 REST介绍 CURL创建索引库 查询索引-GET DSL查询 MGE ...

  8. 深度学习与智能故障诊断学习笔记(一)——故障诊断体系介绍

    1.引言 智能故障诊断(IFD)是指将机器学习理论,如人工神经网络(ANN).支持向量机(SVM)和深度神经网络(DNN)应用于机器故障诊断.这种方法利用机器学习理论,从采集的数据中自适应地学习机器的 ...

  9. PyTorch 学习笔记(六):PyTorch hook 和关于 PyTorch backward 过程的理解 call

    您的位置 首页 PyTorch 学习笔记系列 PyTorch 学习笔记(六):PyTorch hook 和关于 PyTorch backward 过程的理解 发布: 2017年8月4日 7,195阅读 ...

最新文章

  1. UVA - 11584 Partitioning by Palindromes(划分成回文串)(dp)
  2. boost::safe_numerics::interval相关的测试程序
  3. (转)Linux后台开发应该具备技能
  4. C语言实用算法系列之学生管理系统_对整个结构体操作_冒泡排序_提取排序规则
  5. 《动手学深度学习 PyTorch版》学习笔记(三):线性回归
  6. ajax获取session值_java程序员你真的了解session与cookie吗?
  7. Java虚拟机 —— 内存和线程
  8. 互联网架构设计漫谈 (2)
  9. Buffer、ArrayBuffer、DataView互转(node.js)
  10. [No00002E]关于大数据,你不知道的6个迷思
  11. 使用 C# 生成 EMF 矢量图形文件
  12. 《最重要的事,只有一件》读书笔记
  13. vue鼠标右击事件@contextmenu.prevent
  14. [js]调用google,51ditu和mapbar的地图API
  15. 模版之家第三方解析下载不用开年或终身会员也能下载
  16. 手机如何制作gif?简单三步在线合成gif动图
  17. 苏宁搭台品牌唱戏,净水市场将变天
  18. int型整数的最小值和最大值是多少(精确值)
  19. TeamViewer用户注意:请尽快将其更新为最新版本
  20. 计算机中常见的信息存储格式,信息保存在计算机中的基本形式是什么?

热门文章

  1. 良心安利通用模板素材网站
  2. geotools应用-JTS生产四叉树索引和R树索引
  3. 2, excel vba 来一个简单好玩的
  4. Cisco AP-如何识别思科胖瘦AP
  5. GEE注册详细指南,第二次注册,亲测成功.
  6. shell怎么使用制表符_shell中vi替换特殊字符(制表符\t等)的方法
  7. WindowManager
  8. 配置OPENCV出现的问题
  9. 超哥笔记--shell 基本命令(4)
  10. 关于我重装ubuntu系统后所做的那些事