用electron将vue.js项目改造成桌面应用-CFANZ编程社区

关于Electron

按我的理解，就是用让你用 JavaScript 代码去操作系统的API，达到与原生应用相似的体验，当然GUI则是一个web界面，简而言之就是个chrome内核的浏览器。

Electron用法

Electron Application使用 JavaScript 开发，工作原理与方法与 node.js 相同，引入 electron 模块，包含了 Electron 提供的所有API和功能。

项目需求

功能实现

app显示web站点

引入 electron 模块，使用 BrowserWindow 类渲染窗口。

const { app, BrowserWindow } = require('electron')

//创建主页面
function createWindow() {

    mainWindow = new BrowserWindow({
        show: false,
        autoHideMenuBar: true,
        title: 'ElectronApp'
    })
    //最大化
    mainWindow.maximize();
    // 然后加载应用的 index.html。
    mainWindow.loadFile('./app/index.html');
    //窗口关闭时触发
    mainWindow.on('closed', () => {
        mainWindow = null
    });
    //打开开发者工具
    mainWindow.webContents.openDevTools();
    //渲染完成后
    mainWindow.on('ready-to-show', function () {
        //显示窗口
        mainWindow.show();
        //页面聚焦
        mainWindow.focus();
    });

}

系统配置

在 electron 模块中引入，globalShortcut（全局快捷键），Menu（菜单），Tray（托盘），ipcMain(异步通信)，shell（系统命令）。

const {app, BrowserWindow, globalShortcut, Menu, Tray, ipcMain, shell} = require('electron')


let tray
//托盘右键菜单
let template = [
    {
        label: '访问地址、快捷键、开机启动设置', click: function () {
            createConfig();
        }
    },
    {
        label: '打开主界面', click: function () {
            mainWindow.show();
        }
    },
    {
        label: '即时通讯'
    },
    {
        label: '使用系统浏览器打开web站点', click: function () {
            shell.openExternal(configuration.readSettings('global_url'));
        }
    },
    {
        label: "退出", role: 'quit'
    }
];

app.on('ready', () => {
    //创建窗口
    createWindow();
    //系统托盘
    tray = new Tray('./app/img/app-icon.ico');
    //设置此托盘图标的悬停提示内容
    tray.setToolTip('中科天翔');
    const contextMenu = Menu.buildFromTemplate(template);
    tray.setContextMenu(contextMenu);
    tray.on("click", function () {
        //闪烁时点击弹出即时通讯页面
        if (flashTrayTimer) {
            mainWindow.show();
            //显示即时通讯
            mainWindow.webContents.send('ping', 'openMessage');
            //停止闪烁
            flashTray(false);
            tray.setImage('./app/img/app-icon.ico')
        } else {
            //主窗口显示隐藏切换
            mainWindow.isVisible() ? mainWindow.hide() : mainWindow.show();
        }
    })
    //设置默认配置参数
    setBootStart();
    //设置全局快捷键
    setGlobalShortcuts();
})

即时通讯闪烁图标

//收到消息
webview.addEventListener('dom-ready', () => {
    var currCookies = webview.getWebContents().session.cookies;
    webview.getWebContents().openDevTools();
    //监听cookie
    currCookies.addListener('changed', (event, cookie, cause, removed) => {
        //客户端打开即时通讯
        if (cookie.name == 'electron' && cookie.value == 'open') {
            ipcRenderer.send('open-message');
        }
        //有新消息提醒闪烁
        if (cookie.name == 'electron' && cookie.value == 'new') {
            ipcRenderer.send('receive-message');
        }
    });

})


//即时通讯
ipcMain.on('receive-message', function () {
    //先关闭再闪烁
    flashTray(false);
    tray.setImage('./app/img/app-icon.ico');
    flashTray(true);
});

ipcMain.on('open-message', function () {
    //关闭托盘闪烁
    flashTray(false);
    tray.setImage('./app/img/app-icon.ico');
});