安装electron npm install -g electron
electron官方文档 https://www.electronjs.org/zh/docs/latest/tutorial/quick-start
运行指令 npm start
打开调试工具 loginWindow.webContents.openDevTools({mode:'detach'})调试框分离;默认是mainWindow.webContents.openDevTools()
主进程 main.js 是入口文件控制了主进程， 运行在Node.js环境中，执行特殊操作并管理渲染器进程，这就表示渲染进程之间的切换或是关闭都必须由主进程来完成。
app 它控制应用程序的事件生命周期。
BrowserWindow 它创建和管理应用程序 窗口。
ipcMain 当在主进程中使用时，它处理从[渲染器]进程（网页）发送出来的异步和同步信息,当然也有可能从主进程向渲染进程发送消息。
app.isPackaged 如果应用已经打包，返回true ，否则返回false 。
app.disableHardwareAcceleration();//禁用硬件加速
渲染进程 每一个页面都是一个渲染进程
ipcRenderer 使用它提供的一些方法从渲染进程 (web 页面) 发送同步或异步的消息到主
进程,也可以接收主进程回复的消息。
//初始化 登录窗口
let home=null; //渲染进程
function createWindow ( ) { //arg是接受的参数
//关闭渲染进程 home
if (home && !home.isDestroyed()) { //isDestroyed 方法判断是否销毁
home.close(); //清除进程
home = null;
}
//创建渲染进程
if (test == null || test.isDestroyed()){
test=new BrowserWindow({
width:600,
height:300,
frame: true, //是否保留边框（自定义菜单必须保留）
show: false, //初始化创建的时候false 隐藏渲染进程
transparent: false, //窗口是否透明.
resizable: false, //窗口大小是否可调整。
maximizable: false, //窗口是否可最大化。
webPreferences: {
webviewTag: true, // 是否启用 [`<webview>` tag]标签. 默认值为 `false`. 为 `< webview>` 配置的
nodeIntegration: true, // 开启node模块
enableRemoteModule: true, // 开启remote模块
webSecurity: false, // 它将禁用同源策略 (通常用来测试网站), 如果此选项不是由开发者设置的，还会把 allowRunningInsecureContent设置为 true. 默认值为 true。
contextIsolation: false //禁用上下文隔离
},
})
test.loadURL(`file://${__dirname}/index.html`) // 加载 index.html(推荐用http协议加载)
//test.loadFile("index.html") //加载index.html 加载本地文件
// loginWindow.webContents.openDevTools({mode:'detach'}); //调式工具
test.once("ready-to-show", () => { //当页面已经渲染完成(但是还没有显示) 并且窗口可以被现实时触发 只触发一次
//初始化窗口默认隐藏了记得打开 这里可以配置初始化一些操作
test.show(); //显示渲染进程
});
test.webContents.on('did-finish-load', () => { //如需初始化进程通讯，在导航完成时触发
//下面的这行代码要在上面的BrowserWindow加载完成之后调用
test.webContents.send(事件名,值);
})
}
app.whenReady().then(() => { //初始化完成
createWindow();
}
shell 模块提供了集成其他桌面客户端的关联功能.主进程和渲染进程都可以使用
openExternal:以桌面的默认方式打开给定的文件。
const { shell } = require('electron')
// 点击打开浏览器
shell.openExternal('https://www.csdn.net/');
//打开word文件 注意：路径分隔符要用/，不要使用\
shell.openExternal('C:/Users/onion/Desktop/a.doc')
进程通讯
//进程通讯 例一
// 渲染进程中
const ipcRenderer = require('electron').ipcRenderer; //引入模块
//向主进程发起事件
ipcRenderer.send(事件名, 值); //值（没有可以省略）
//渲染进程监听推荐写在mounted里 如果在methods里会触发多次
ipcRenderer.on(事件名, (event, arg) => {})
//主进程中通过ipcMain.on() 注册渲染进程发过来的事件
const ipcMain = require('electron')
ipcMain.on(事件名, (event, arg) => { //arg 接受参数
//主进程向渲染进程发送消息
event.sender.send(事件名, 值); //异步
// event.reply(事件名, 值); //同步 请注意, 此方法的同步特性意味着它在完成任务时会阻止其他操作
})
禁用右键
//在主进程中
//win 当前主进程变量
win.once("ready-to-show", () => {
preventDragbarContext(win);
});
// 禁用右键
function preventDragbarContext(win) {
var WM_INITMENU = 0x116;//278
win.hookWindowMessage(WM_INITMENU, function (e) {
win.setEnabled(false);
setTimeout(() => {
win.setEnabled(true);
}, 100);
return true;
})
}
所有窗口关闭时 退出程序
//当所有的窗口都被关闭时触发
//app.exit() 此方法直接强制关闭
app.on("window-all-closed", function () {
if (process.platform !== "darwin") app.quit();
});
点击底部菜单时重新启动窗口
//点击底部菜单时重新启动窗口
app.on("activate", function () {
if (BrowserWindow.getAllWindows().length === 0) createWindow();
});
托盘菜单
//主进程文件main.js中引入的ipcMain.js文件代码：
var { Menu, Tray, BrowserWindow, app } = require('electron');
var path = require('path');
// 创建拖盘
//支持png、jpg win10支持.ico mac支持.icns
var iconTray = new Tray(path.join(__dirname,'app.ico')); //logo图标 也可以用绝对路径
// 鼠标悬停托盘提示
iconTray.setToolTip('Electron应用');
// 配置右键菜单
var trayMenu = Menu.buildFromTemplate([
{
label: '设置',
click: function () {
console.log('setting')
}
},
{
label: '升级',
click: function () {
console.log('update')
}
},
{
label: '退出',
click: function () {
if (process.platform !== 'darwin') {
app.quit();
}
}
}
]);
// 绑定右键菜单到托盘
iconTray.setContextMenu(trayMenu);
setTimeout(function(){
var win = BrowserWindow.getFocusedWindow();
// 点击关闭按钮让应用保存在托盘
win.on('close', (e) => {
if (!win.isFocused()) {
win = null;
} else {
// 阻止窗口的关闭事件
e.preventDefault();
win.hide();
}
});
})
// 任务栏图标双击托盘打开应用
iconTray.on('double-click', function () {
win.show();
});
webview标签 用来嵌入Web页面
//
<webview src="https://www.github.com/"></webview>
右上菜单
//在渲染进程中
const { ipcRenderer, remote } = window.require("electron");
// 最小化窗口
toMin () {
remote.getCurrentWindow().minimize();
},
// 最大化和正常切换
toMax () {
const browserWindow = remote.getCurrentWindow();
if (this.isMaxed) { //默认false
browserWindow.unmaximize();
} else {
browserWindow.maximize();
}
this.isMaxed = !this.isMaxed;
},
// 关闭窗口 由主进程来完成
toCloseReady () {
ipcRenderer.send("closeStuHomeWin", "");
}
