html转换成窗体electron,用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和功能。
项目需求
为我们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页面中，使用 标签加载 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 事件，来监听用户键盘按键操作，保存时写入配置文件。