天天看点

electron 部分常用功能的实现

(windowds下测试,其他系统未测)

1,系统托盘图标,

main.js:

const Tray = require('electron').Tray;
const Menu = require('electron').Menu;
let tray;
tray = new Tray(__dirname + '/build/img/icon.png');//系统托盘图标
tray.setToolTip('miaoLian.in');//鼠标放到系统托盘图标上时的tips;
const menu = Menu.buildFromTemplate([   // 定义右建菜单
    {label: "主页", click: goHomeHandle},
    {label: "注册", click: registerHandle},
    {label: "注销", click: logoutHandle},
    {label: "退出", click: closeHandle}
]);
tray.setContextMenu(menu);//应用右建菜单
tray.on('click', function () { // 左键单击时显示窗口
    mainWindow.show();
});      

2,渲染线程向main线程发送消息

渲染线程:你的正常项目中的文件

main线程:electron要求必须有的main.js文件;

//接收消息
const ipcMain = require('electron').ipcMain;
ipcMain.on('closeWindow', function () { // closeWindow  可自己随意定义
    app.quit();
});
ipcMain.on('minimize', function () { //minimize 可自己随意定义
    mainWindow.hide();
});      

project XX.js:

//发送消息
const ipcRenderer = global.require('electron').ipcRenderer;
minimizeBtnClickHandle() {
    ipcRenderer.send('minimize')// 和接收消息的字符串对应
};      

3,main线程向渲染线程发送消息

//发送消息
const BrowserWindow = electron.BrowserWindow;
let mainWindow;
mainWindow = new BrowserWindow({ XX:XX,XX:XX});
function closeHandle() {      //见(1)系统托盘图标中右键菜单中的退出选项
                              // closeFunc 可自己随意定义 与接收消息对应即可
    mainWindow.webContents.send("closeFunc"); 
}      

project XX.JS:

//接收消息
const ipcRenderer = global.require('electron').ipcRenderer;
ipcRenderer.once('closeFunc',this.closeHandle.bind(this));
closeHandle() {
    /*自己的逻辑处理*/
     ipcRenderer.send('closeWindow');
}      

注意:所有的监听中,都可以用on 或者once 但两者有区别,on是一直监听,触发事件之后还能继续监听。但once只能被触发一次,然后就会被自动取消监听,请在合适的时候用合适的方法。

4,打开默认浏览器并跳转到指定网页

const shell = require('electron').shell;
shell.openExternal(`https://miaolian.in`);      

另:

electron 中的API 不是在任何文件中都可以用的。

有一部分只能在main线程中用,比如ipcMain

有一部分只能在渲染线程中用,比如ipcrenderer

还有一部分是通用的,比如shell。

继续阅读