温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

electron 部分常用功能的实现

发布时间:2020-07-31 10:45:51 来源:网络 阅读:7720 作者:lixiaoyu1223 栏目:开发技术

(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文件;


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线程向渲染线程发送消息

main.js:

//发送消息
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。

更多详情见文档:http://electron.atom.io/docs/

中文文档:https://github.com/electron/electron/tree/master/docs-translations/zh-CN


向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI