关注公众号：微信搜索 `前端工具人` ; 收货更多的干货 ## 一、需求主要是一下几个常见的需求： - 自定义顶部菜单栏，可拖拽； - 自定义最小化、最大化、退出按钮、刷新按钮（类似浏览器的重新加载、用于开发阶段调试）； - 小窗口 - 中窗口 - 全屏窗口，相互切换； ## 二、electron 解读 `electron` 区分了两种进程：主进程和渲染进程 ### 2.1 主进程： - 创建进程、窗口... - 控制应用生命周期（启动、退出APP、事件监听..） - 调用系统底层功能 (`Electron API`)、调用原生`API`（`Node.js` 与本地交互...） ### 2.2 渲染进程 - 主要是内置 `Chromium` 浏览, 来实现页面的渲染； - 可以理解成 `electron` 渲染进程为 `Chromium` 的窗口；所以和日常开发区别不大 ## 三、需求实现项目入口文件 `render.js`，主进程事件文件 `ipc.event.js` `render.js` ``` 'use strict' import { app, protocol, BrowserWindow, Menu } from 'electron' import { createProtocol } from 'vue-cli-plugin-electron-builder/lib' // import installExtension, { VUEJS_DEVTOOLS } from 'electron-devtools-installer' import initIpcEvent from './services/ipc.event' const path = require('path'); const isDevelopment = process.env.NODE_ENV !== 'production' // Scheme must be registered before the app is ready protocol.registerSchemesAsPrivileged([ { scheme: 'app', privileges: { secure: true, standard: true } } ]) async function createWindow () { // Create the browser window. const win = new BrowserWindow({ width: 400, height: 500, center: true, frame: false, useContentSize: true, // resizable: false, webPreferences: { webSecurity: false, enableRemoteModule: true, // Use pluginOptions.nodeIntegration, leave this alone // See nklayman.github.io/vue-cli-plugin-electron-builder/guide/security.html#node-integration for more info nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION, contextIsolation: !process.env.ELECTRON_NODE_INTEGRATION }, icon: path.join(__dirname, '../public/favicon32.ico') }) if (process.env.WEBPACK_DEV_SERVER_URL) { // Load the url of the dev server if in development mode await win.loadURL(process.env.WEBPACK_DEV_SERVER_URL) // win.webContents.openDevTools() if (!process.env.IS_TEST) win.webContents.openDevTools() } else { createProtocol('app') // Load the index.html when not in development win.loadURL('app://./index.html') } win.setMenu(null) global.mainWindow = win // 初始化进程之间事件监听 initIpcEvent() // 隐藏菜单 createMenu() } // Quit when all windows are closed. app.on('window-all-closed', () => { // On macOS it is common for applications and their menu bar // to stay active until the user quits explicitly with Cmd + Q if (process.platform !== 'darwin') { app.quit() } }) app.on('activate', () => { // On macOS it's common to re-create a window in the app when the // dock icon is clicked and there are no other windows open. if (BrowserWindow.getAllWindows().length === 0) createWindow() }) // This method will be called when Electron has finished // initialization and is ready to create browser windows. // Some APIs can only be used after this event occurs. app.on('ready', async () => { if (isDevelopment && !process.env.IS_TEST) { // Install Vue Devtools try { // await installExtension(VUEJS_DEVTOOLS) } catch (e) { console.error('Vue Devtools failed to install:', e.toString()) } } createWindow() }) // Exit cleanly on request from parent process in development mode. if (isDevelopment) { if (process.platform === 'win32') { process.on('message', (data) => { if (data === 'graceful-exit') { app.quit() } }) } else { process.on('SIGTERM', () => { app.quit() }) } } // 设置菜单栏 function createMenu() { // darwin表示macOS，针对macOS的设置 if (process.platform === 'darwin') { const template = [{ label: 'Electron', submenu: [{ role: 'about' }, { role: 'quit' }] }] const menu = Menu.buildFromTemplate(template) Menu.setApplicationMenu(menu) } else { // windows及linux系统 Menu.setApplicationMenu(null) } } ``` `ipc.event.js` ``` import { ipcMain, app, BrowserWindow } from 'electron' export default function () { ipcMain.on('toggle-mini', (event, params) => { if (params.value) { global.mainWindow.hide() } else { global.mainWindow.show() } }) ipcMain.on('window-min', () => { global.mainWindow.minimize() global.mainWindow.setResizable(true) }) ipcMain.on('window-login', () => { global.mainWindow.setMinimumSize(400, 500) global.mainWindow.center() global.mainWindow.setResizable(false) }) ipcMain.on('window-password', () => { global.mainWindow.setSize(1366, 768) global.mainWindow.center() global.mainWindow.setResizable(true) }) ipcMain.on('window-max', () => { if (global.mainWindow.isMaximized()) { global.mainWindow.restore() } else { global.mainWindow.maximize() } // global.mainWindow.setMinimumSize(1600, 900) global.mainWindow.setMinimumSize(1200, 800) global.mainWindow.center() }) ipcMain.on('window-hide', () => { global.mainWindow.hide() }) ipcMain.on('window-show', () => { global.mainWindow.show() }) ipcMain.on('window-refresh', () => { global.mainWindow.reload(); }) // 关闭当前窗口 ipcMain.on('window-close', () => { console.log("window-close") global.mainWindow.close() }) // 关闭所有窗口 ipcMain.on('window-all-close', () => { console.log("window-all-close") const wins = BrowserWindow.getAllWindows() for (let i = 0; i < wins.length; i++) { wins[i].close() } }) // 所有窗口都将立即被关闭，而不询问用户，而且 before-quit 和 will-quit 事件也不会被触发。 ipcMain.on('app-exit', () => { app.exit() }) ipcMain.on('quit-and-open', (event, data) => { global.downloadFile = data app.quit() }) } ``` ### 3.1 自定义顶部导航栏首先要隐藏调自带的顶部导航栏 ``` // createMenu() 方法就是隐藏顶部导航栏 / 拖拽，样式 -webkit-app-region: drag; ``` ### 3.2 自定义最小化、最大化、退出按钮、刷新按钮； ``` ``` ### 3.3 小窗口 - 中窗口 - 全屏窗口，相互切换； - 初始化登录界面是小窗口类似于微信登录一样 `400 * 500`； - 登录后跳转到程序主界面， `全屏`； - 忘记密码界面（中窗口）1366 * 788 自己开发时，在全屏状态下切换回小窗口切换不了，百度了蛮久，也没结果；后面发现改变全屏状态后就能切换... 方法：先`最小化窗口`、在 `setMinimumSize` 改变尺寸， `在显示`，相当于加了个过渡一下，变换过程也没那么死板 **具体看`3.2` 的 `onChangeWindow` 里的 `logout` 方法** 有不对之处欢迎指正，代码有删减，没做测试；只是作为分享，让有需要的少走弯路，节省百度时间