Electron实战之基坑

1、任务栏图标(可配置 | | 可设置)

    //系统托盘图标目录
    const iconPath = path.join(__dirname, '../../static/imgs/logo.ico')
    const emptyPath = path.join(__dirname, '../../static/imgs/empty.ico')
    const trayUrl = nativeImage.createFromPath(iconPath);
    const emptyUrl = nativeImage.createFromPath(emptyPath);

    //(配置)
    let mainWindow = new BrowserWindow({
        height: 600,
        width: 1000,
        minHeight: 600,
        minWidth: 800,
        useContentSize: true,
        frame: false,
        backgroundColor: '#eeeeee',
        icon: trayUrl,
        title: '金淘返利客服机器人'
    });

    //(设置)
    mainWindow.setIcon(trayUrl);

2、系统托盘图标及菜单
系统托盘,即在电脑屏幕右下角的程序图标。

    //系统托盘右键菜单
    let trayMenuTemplate = [
        {
            label: '退出4',
            click: function () {
                mainWindow.destroy()
            }
        }
    ];

    let tray = new Tray(trayUrl);
    
    //设置鼠标hover时显示的标题
    tray.setToolTip('金淘返利客服机器人')

    // 图标的上下文菜单
    const contextMenu = Menu.buildFromTemplate(trayMenuTemplate)
    // 设置此图标的上下文菜单
    tray.setContextMenu(contextMenu)
    // 单击此图标显示窗口
    tray.on('click', () => {
        //清除消息提醒
        clearInterval(timer)
        count = 0;
        tray.setImage(trayUrl)
        mainWindow.flashFrame(false)

        if (!mainWindow.isVisible()) {
            mainWindow.show();
            mainWindow.setSkipTaskbar(false);
            tray.setHighlightMode('never');
        } else if (mainWindow.isMinimized() || !mainWindow.isFocused()) {
            mainWindow.restore()
            mainWindow.focus()
        }
    })

3、任务栏 预览窗口的图标和标题

Electron实战之基坑_第1张图片

这个困扰了我很久,new BrowserWindow时配置title属性 和 用mainWindow.setTitle("自定义预览窗口标题")均不起作用。
原因可能是因为我把原生的应用菜单给隐藏掉了,用的是我自定义的顶部菜单:

Electron实战之基坑_第2张图片

后来发现,原来预览窗口的图标和标题其实就是当前网页的图标和标题,所以只需设置下document.title为自定义标题即可。至于图标怎么设置,我还没弄好,不知道这个打包工具是怎么给我加上去的,导致路径不对,一直显示不出来。 

4、记录一下打包的流程吧,别忘了~~

流程:
1、npm run build
2、然后用NSIS打包,选取这个目录下的.exe文件和当前目录,然后走下去就可以了。
具体NSIS的安装与用法,可以仔细看下下面这个教程。
(附:win7下nsis打包exe安装程序教程:https://blog.csdn.net/arvin0/article/details/56482370)
Electron实战之基坑_第3张图片

你可能感兴趣的:(ELECTRON)