Electron介绍
Electron集成了chromium(支持最新特性的浏览器)与Node.js(javascript运行时,可实现文件读写)Native API是(提供统一原生界面操作的能力)
工作流程:启动APP 启动主进程,创建窗口,加载指定界面,开启渲染进程,渲染进程需要进行通信(如新增歌曲打开文件夹选择MP3文件)需通过主进程调用原生API进行操作
主进程可以看做是package.json中的main属性所对应的文件,一个应用只有一个主进程,只有主进程可以进行GUI操作,windows中展示的界面通过渲染进程实现,一个应用有多个渲染进程。
官网中含有起步项目
electron实质是在node环境下使用electron包
生命周期
ready: app 初始化完成
dom-ready: 一个窗口中的文本加载完成
did-finsh-load: 导航完成时触发窗口
window-all-closed: 所有窗口都被关闭时触发
before-quit: 在关闭窗口之前触发
will-quit: 在窗口关闭并且应用退出时触发
quit: 当所有窗口被关闭时触发
closed: 当窗口关闭时触发,此时应删除窗口引用
自启动配置
可以将窗体默认不去显示,然后监听窗体的ready-to-show事件让窗体进行显示
渲染进程是html通过<script>
标签导入的js,在渲染进程引入const o = require('electron')
去创建窗口(须在创建主进程窗口时添加如下红框中的配置),ctrl+shift+i调出调试的面板
通过remote模块与主进程进行通信
自定义窗口样式可将frame设置为false隐藏,然后在html文件中通过css来设置,js的编写下载DOMContentLoaded的监听中,通过原生方法获取元素
window.onbeforeunload 是一个JavaScript 事件处理器,在用户关闭当前页面(标签页)之前触发。
模态窗口,子窗口没有关闭之前父窗口不允许使用
自定义菜单
主进程模块下的Menu模块
角色和类型,配置项的role字段和type字段,设置快捷键
动态创建菜单:
自定义右键菜单:1)用Menu创建一个自定义菜单内容2)在鼠标右击行为发生之后显示出来
主进程与渲染进程之间通信
ipcMain模块是在主进程通信需要用到的
渲染进程的消息是在浏览器中查看到的,同步APIsend加上Sync
主进程给渲染进程通信,需要现有一个menu,主进程获取当前窗口使用APIgetFocusedWindow()
渲染进程和渲染进程之间通信
一种方式是通过主进程,另一种方式是要通过localStorage
通过id获取到窗口
dialog模块、shell模块和iframe模块
消息通知
全局快捷键globalShortcut模块
剪切板操作(clipboard字剪切,nativeImage图片剪切模块)