1. Electron简介：Electron 是由 Github 开发，是一个用 HTML，CSS 和 JavaScript 来构建跨平台桌面应用程序的一个 开源库。
原理：Electron 通过将 Chromium 和 Node.js 合并到同一个运行时环境中，并 将其打包为 Mac，Windows 和 Linux 系统下的应用来实现这一目的。
现状：目前 Electron 已成为开源开发者、初创企业和老牌公司常用的开发工具。
核心理念：保持 Electron 的体积小 和 可持续性开发。
学习electron的基础：电脑需要安装 nodejs，电脑上面需要安装 git，需要有 Html css js 以及 nodejs 基础。
2. Electron的安装搭建：
2.1 全局安装electron：npm install -g electron。
2.2 克隆仓库electron-quick-start项目：
# 克隆示例项目的仓库
git clone https://github.com/electron/electron-quick-start
# 进入这个仓库
cd electron-quick-start
# 安装依赖并运行
npm install && npm start
2.3 手动创建项目：
（1）、新建一个项目目录 例如：electrondemo01
（2）、在 electrondemo01 目录下面新建三个文件: index.html、main.js 、package.json
（3）、index.html 里面用 css 进行布局（以前怎么写现在还是怎么写）
（4）、在 main.js 中写如下代码：
var electron =require('electron');
//electron 对象的引用
const app=electron.app;
//BrowserWindow 类的引用
const BrowserWindow=electron.BrowserWindow;
let mainWindow=null;
//监听应用准备完成的事件
function createWindow(){
mainWindow=new BrowserWindow(
{
width: 800,
height: 600,
frame: false, //默认为true，设置为false表示不显示窗口的头部导航栏（最大，最小，关闭栏）
}
);
mainWindow.loadFile('index.html'); //入口加载文件，mainWindow.loadURL(`file://${__dirname}/index.html`)
mainWindow.webContents.openDevTools(); //开启调试
mainWindow.on('closed', function () {
mainWindow = null;
})
}
app.on('ready',createWindow)
//监听所有窗口关闭的事件
app.on('window-all-closed', function () {
if (process.platform !== 'darwin') { //mac上需要单独处理 窗口关闭
app.quit();
}
})
app.on('activate', () => {
// 对于 OS X 系统，当 dock 图标被点击后会重新创建一个 app 窗口，并且不会有其他
// 窗口打开
if (mainWindow === null) {
createWindow();
}
})
（5）、运行：
electron. //注意后面的点
2.4 electron-forge 搭建一个 electron 项目：
npm install -g electron-forge
electron-forge init my-new-app
cd my-new-app
npm start
2.5 electron-vue 环境搭建、创建项目：
npm install -g vue-cli
vue init simulatedgreg/electron-vue my-project
cd my-project
yarn # or npm install
yarn run dev # or npm run dev
注意：Nodejs 在主进程和渲染进程中都可以使用。
3. electron的主进程与渲染进程各自的模块，以及公共模块：
4. electron的自定义顶部菜单，右键菜单：
const { Menu } = require('electron');
let template = [
{
label: '文件',
submenu: [
{
label: '新建窗口',
click: () => {
console.log('aaa')
}
},
{
type: 'separator'
},
{
label: '打开文件',
accelerator:'ctrl+x',
click: () => {
console.log('bbb')
}
},
]
},
{
label :'编辑',
submenu: [
{
role:'cut',
label:'剪切'
},
{
role:'copy',
label:'复制'
}
]
}
];
//1.自定义软件顶部菜单以及绑定快捷键
var m=Menu.buildFromTemplate(template);
Menu.setApplicationMenu(m);
//2.自定义右键菜单
window.addEventListener('contextmenu', (e) => {
e.preventDefault();
m.popup({window: remote.getCurrentWindow()});
}, false);
5. electron主进程与渲染进程，渲染进程与渲染进程之间的通信：
参考：https://blog.csdn.net/qq_42231156/article/details/103135237。
//1 、获取当前窗口的 id：
const winId = BrowserWindow.getFocusedWindow().id;
//2、 监听当前窗口加载完成的事件
win.webContents.on('did-finish-load',(event) => {
})
//3、同一窗口之间广播数据
win.webContents.on('did-finish-load',(event) => {
win.webContents.send('msg',winId,'我是 index.html 的数据');
}）
//4、 通过id查找窗口
let win = BrowserWindow.fromId(winId);
6. electron的shell模块和<webview> 标签：
<webview id="webview" src="https://www.itying.com" style="position:fixed; width:100%;height:100%"></webview>
<stript>
var shell = require('shell');
shell.openExternal('https://github.com');
</stript>
7. electron的Dialog模块：
const {dialog}=require('electron');//渲染进程中：const {dialog}=require('electron').remote
dialog.showErrorBox('title','content');
dialog.showMessageBox({
type:'info',
title: 'message',
message: 'hello',
buttons:['ok','cancel']
},(index) => {
if ( index == 0 ) {
console.log('You click ok.');
} else {
console.log('You click cancel');
}
})
dialog.showOpenDialog({
properties:['openFile','openDirectory']
}, (files) => {
console.log(files);
})
dialog.showSaveDialog({
title: 'save some file',
filters: [
{ name: 'Images', extensions: ['jpg', 'png', 'gif'] },
{ name: 'Movies', extensions: ['mkv', 'avi', 'mp4'] },
{ name: 'Custom File Type', extensions: ['as'] },
{ name: 'All Files', extensions: ['*'] }
]
},(filename) => {
console.log(filename);
})
8. electron的创建任务栏图标以及任务栏图标右键菜单：
var { Menu, Tray,app,BrowserWindow } = require('electron');
const path = require('path');
var appIcon = new Tray(path.join(__dirname,'lover.png')); //设置托盘时的图标
const menu = Menu.buildFromTemplate( [
{
label: '设置',
click: function () {}
},
{
label: '帮助',
click: function () {}
},
{
label: '关于',
click: function () {}
},
{
label: '退出',
click: function () {
BrowserWindow.getFocusedWindow().webContents().send('close-main-window');
app.quit();
}
}
])
appIcon.setToolTip('my best app'); //设置托盘时，鼠标放上去的提示文字
appIcon.setContextMenu(menu); //设置托盘时，右键菜单
9. electron的监听任务栏图标的单击、双击事件：
var { Menu, Tray,app,BrowserWindow } = require('electron');
var appIcon = new Tray(path.join(__dirname,'lover.png'));
appIcon.on('double-click',()=>{
console.log(win);
win.show();
})
10. electron的点击右上角关闭按钮隐藏任务栏图标：
const win = BrowserWindow.getFocusedWindow();
win.on('close',(e)=>{
console.log(win.isFocused());
if(!win.isFocused()){
win=null;
}else{
e.preventDefault(); /*阻止应用退出*/
win.hide(); /*隐藏当前窗口*/
}
})
11. electron的实现任务栏闪烁图标：
let timer=setInterval(function() {
count++;
if (count%2 == 0) {
appIcon.setImage(path.join(__dirname,'empty.ico'))
} else {
appIcon.setImage(path.join(__dirname,'lover.png'))
}
}, 500);
11. electron的消息通知是基于 h5 的通知 api 实现的：
const option = {
title: 'title',
body: 'body',
icon: path.join('main-process/favicon2.ico')
}
const myNotification = new window.Notification(option.title,option);
myNotification.onclick = () =>{
console.log('clicked');
}
12. electron的监听网络变化：
window.addEventListener('online', function(){});
window.addEventListener('offline', function(){});
13. electron注册全局快捷键（globalShortcut）：
var app = require('app');
var globalShortcut = require('electron').globalShortcut;
app.on('ready', function() {
// Register a 'ctrl+x' shortcut listener.
var ret = globalShortcut.register('ctrl+x', function() {
console.log('ctrl+x is pressed');
})
if (!ret) {
console.log('registration failed');
} // Check whether a shortcut is registered.
console.log(globalShortcut.isRegistered('ctrl+x'));
});
app.on('will-quit', function() {
// Unregister a shortcut.
globalShortcut.unregister('ctrl+x');
// Unregister all shortcuts.
globalShortcut.unregisterAll();
});
14. electron的clipboard 件 剪切板事件 clipboard 模块以及 nativeImage模块：
const { clipboard, nativeImage } = require('electron');
clipboard.writeText("这是一个机器码");
console.log(clipboard.readText());
let img = nativeImage.createFromPath('static/favicon2.ico');
clipboard.writeImage(img);
const imgDataURL = clipboard.readImage().toDataURL();
const img3 = new Image();
img3.src = imgDataURL;
document.body.appendChild(img3);
15. electron的中隐藏顶部菜单：
mainWindow.setMenu(null)
16. electron的中隐藏关闭，最小化，最大化按钮 ：
mainWindow = new BrowserWindow({
height: 620,
useContentSize: true,
width: 1280
frame: false /*去掉顶部导航 去掉关闭按钮 最大化最小化按钮*/
})
17. electron的中自定义关闭，最小化，最大化按钮 ：
ipc.on('window-min',function(){
mainWindow.minimize();
})
//登录窗口最大化
ipc.on('window-max',function(){
if(mainWindow.isMaximized()){
mainWindow.restore();
}else{
mainWindow.maximize();
}
})
ipc.on('window-close',function(){
mainWindow.close();
})
18. electron的中自定义导航可拖拽：
#可拖拽的 css:
-webkit-app-region: drag;
#不可拖拽的 css:
-webkit-app-region: no-drag;
19. electron中使用vue-socket.io：
//1、npm install vue-socket.io --save
//2、引入插件 建立连接 main.js
import VueSocketio from 'vue-socket.io';
Vue.use(VueSocketio, 'http://118.123.14.36:3000');
//3、App.vue
var vm = new Vue({
sockets:{
connect: function(){
console.log('socket connected')
},
customEmit: function(val){
console.log('this method was fired by the socket server. eg: io.emit("customEmit", data)')
}
},
methods: {
clickButton: function(val){
// $socket is socket.io-client instance
this.$socket.emit('emit_method', val);
}
}
})
20. electron中打包（主要是window下打包）：
20.1 electron 中构建应用最常用的模块：
20.1.1 electron-packager
20.1.2 electron-builder
20.2 electron-forge打包：
electron-forge package
electron-forge make
20.3 electron-vue打包：
npm run build
20.4 修改应用名称、 应用图标、 应用版本号、 应用 用appid：
21. electron中打包遇到的问题：
21.1 创建应用托盘的时候可能会遇到错误：
(1) 把托盘图片放在根目录 static 里面，然后注意下面写法。
var tray = new Tray(path.join(__static,'favicon.ico'));
(2) 如果托盘路径没有问题，还是包托盘相关错误的话，把托盘对应的图片换成.png格式重试
21.1 模块问题可能会遇到的错误解决如下：
1、删掉 node_modules 然后重新用 npm install 安装依赖
2、如果上面方法还是解决不了。可以通过安装 yarn 用 yarn 来安装模块
(1) cnpm install -g yran
(2) cd 到对于目录里面执行 yran 替代（npm install /cnpm install）安装依赖
3、如果上面两个方法都不可行，用手机创建一个热点电脑连上热点。重试上面任意一种方法。
来源：CSDN
作者：Ace.斗皇
链接：https://blog.csdn.net/qq_42231156/article/details/103793765