用electron将vue.js项目改造成桌面应用

关于Electron

Electron是由Github开发，用HTML，CSS和JavaScript来构建跨平台桌面应用程序的一个开源库。
Electron通过将Chromium和Node.js合并到同一个运行时环境中，并将其打包为Mac，Windows和Linux系统下的应用来实现这一目的。

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

Electron用法

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

electron官方文档

项目需求

为我们web端服务做的前期demo，功能上很简单，APP显示我们的web站点，当即时通讯有消息送达时，系统托盘需要闪烁，右键点击系统托盘需要有如下功能

功能实现

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();
    });

}

这里加载html方法有两种：

1.使用 loadURL('https://electronjs.org') 直接指向某个地址。

2.使用 loadFile('./app/index.html') 指向html文件，在index页面中，使用 <webview> 标签加载 url 地址。

在实际使用中，第一种适配我们项目时有bug，推荐使用第二种加载方式。

系统配置

在 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();
})

即时通讯闪烁图标

整体思路大概是这样的，通过事件监听cookie变化，web端即时通讯收到消息以后，将 cookie 值变为 new ，触发异步通信 ipcRenderer 发送消息，ipcMain 监听消息，触发函数开始闪烁图标（就是将图标与空白图标来回切换），当然打开托盘即时通讯也有类似操作。

//收到消息
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');
});

修改配置

修改配置思路比较简单，通过 nconf 模块，将配置保存在本地，app初始化的时候读取配置。

唤醒/隐藏界面快捷键

在配置界面的html中，将唤醒/隐藏界面的 input 标签加上 onkeydown 事件，来监听用户键盘按键操作，保存时写入配置文件。