• Electron 创建一个空白的界面


    添加应用

    首先添加一个Lorikeet版本的Electron应用。

     1 'use strict'
     2 const electron = require('electron');
     3 const app = electron.app;
     4 const BrowserWindow = electron.BrowserWindow;
     5 
     6 let mainWindow = null;
     7 
     8 app.on('window-all-closed', () => {
     9     if (process.platform !== 'darwin') {
    10         app.quit();
    11     }
    12 });
    13 
    14 app.on('ready', () => {
    15     mainWindow = new BrowserWindow();
    16     mainWindow.loadURL(`file://${app.getAppPath()}/index.html`);
    17     mainWindow.on('closed', () => {
    18         mainWindow = null;
    19     });
    20 });

     

    菜单设置

     1. 永久隐藏菜单

    const electronMenu=electron.Menu;
    electronMenu.setApplicationMenu(null);
    另:也可以直接设置mainWindow.setMenu(null);
     1 'use strict'
     2 const electron = require('electron');
     3 const app = electron.app;
     4 const BrowserWindow = electron.BrowserWindow;
     5 const electronMenu=electron.Menu;
     6 
     7 let mainWindow = null;
     8 
     9 app.on('window-all-closed', () => {
    10     if (process.platform !== 'darwin') {
    11         app.quit();
    12     }
    13 });
    14 
    15 app.on('ready', () => {
    16     electronMenu.setApplicationMenu(null);
    17     mainWindow = new BrowserWindow();
    18     mainWindow.loadURL(`file://${app.getAppPath()}/index.html`);
    19     mainWindow.on('closed', () => {
    20         mainWindow = null;
    21     });
    22 });
    View Code

    2. 自动隐藏菜单

    设置BrowserWindow的属性,autoHideMenuBar: true。
    设置autoHideMenuBar隐藏后,按Alt,可显示出菜单选项。
     1 'use strict'
     2 const electron = require('electron');
     3 const app = electron.app;
     4 const BrowserWindow = electron.BrowserWindow;
     5 
     6 let mainWindow = null;
     7 
     8 app.on('window-all-closed', () => {
     9     if (process.platform !== 'darwin') {
    10         app.quit();
    11     }
    12 });
    13 
    14 app.on('ready', () => {
    15     mainWindow = new BrowserWindow({autoHideMenuBar:true});
    16     mainWindow.loadURL(`file://${app.getAppPath()}/index.html`);
    17     mainWindow.on('closed', () => {
    18         mainWindow = null;
    19     });
    20 });
    View Code

    另:自定义菜单设置,可参考https://segmentfault.com/a/1190000008473121

    窗口设置

     直接设置Window的属性

    mainWindow = new BrowserWindow({600,height:400,icon: 'images/myIcon.ico'});
    另:如果需要隐藏window的标题栏,可以设置frame:false;

    图上:Demo

     注:GitHub官方文档与Demo: electron-api-demos-Zh_CN

  • 相关阅读:
    vue+element-ui 字体自适应不同屏幕
    nginx——前端服务环境
    定位问题 vue+element-ui+easyui(兼容性)
    四叶草(css)
    vue-cil 打包爬坑(解决)
    el-tree文本内容过多显示不完全问题(解决)
    v-for(:key)绑定index、id、key的区别
    top 命令详解
    uptime 命令详解
    w 命令详解
  • 原文地址:https://www.cnblogs.com/kybs0/p/9788661.html
Copyright © 2020-2023  润新知