原生特性

禁止多开应用

1. 只允许开一个窗口，不允许多开

// app/main/index.js

const gotTheLock = app.requestSingleInstanceLock() // 是不是有别的进程
if (!gotTheLock) {
    app.quit()
} else {
    app.on('second-instance', () => {
        showMainWindow()
    })
    app.on('ready', () => {
        createMainWindow()
        handleIPC()
        require('./trayAndMenu')
        require('./robot.js')()
    })
    app.on('before-quit', () => {
        closeMainWindow()
    })
    app.on('activate', () => {
        showMainWindow()
    })
}

假关闭

1. 说明：当用户点击窗口❎时，不关闭应用，只是隐藏；当点击退出时才真正关闭
2. 窗口点击，触发 win.on('close'),退出触发 app.on('before-quit')

// app/main/windows/main.js
win.on('close', (e) => {
        if(willQuitApp) {
            win = null
        } else {
            e.preventDefault()
            win.hide()
        }
    })
    

// 退出
app.on('before-quit', () => {
        closeMainWindow()
})

function close() {
    willQuitApp = true
    win.close()
}

托盘

1. 图标注意准备二倍图，系统会根据分辨率自动识别高清

// app/main/trayAndMenu

const {app, Menu, Tray} = require('electron')
const {show: showMainWindow} = require('../windows/main')
const {create: createAboutWindow} = require('../windows/about')
const path = require('path')

let tray
function setTray() {
    tray  = new Tray(path.resolve(__dirname, './icon_darwin.png'))
    tray.on('click', () => {
        showMainWindow()
    })
    tray.on('right-click', () => {
        const contextMenu = Menu.buildFromTemplate([
            {label: '显示', click: showMainWindow},
            {label: '退出', click: app.quit}
        ])
        tray.popUpContextMenu(contextMenu)
    })
}

function setAppMenu() {
    let appMenu = Menu.buildFromTemplate([
        {
            label: app.name,
            submenu: [
                {
                    label: '关于',
                    click: createAboutWindow
                },
                { type: 'separator'  },
                { role: 'services'  },
                { type: 'separator'  },
                { role: 'hide'  },
                { role: 'hideothers'  },
                { role: 'unhide'  },
                { type: 'separator'  },
                { role: 'quit'  }
            ],

        },
    { role: 'fileMenu' },
    { role: 'windowMenu' },
    { role: 'editMenu' }
    ]);
    app.applicationMenu = appMenu
}

app.whenReady().then(() => {
    setTray()
    setAppMenu()
})

关于窗口

1. electron-about-window 可以便捷的美化“关于”的弹框样式

const openAboutWindow = require('electron-about-window').default
const path = require('path')

const create = () => openAboutWindow({
    icon_path: path.join(__dirname, 'icon.png'),
    package_json_dir: path.resolve(__dirname, '/../../../'),
    copyright: 'Copyright (c) 2023 raoju',
    homepage: 'https://github.com/rowin90/electron-remote-control',
})

module.exports = {create}