如何從電子托盤圖標打開一個新窗口

Question

如何從電子托盤圖標打開一個新窗口

目前我正在嘗試創建一個窗口小部件。 我遇到了3個問題。

1. 在托盤圖標右鍵單擊菜單中創建復選框之前，它是成功的。 但是我想在單擊復選框時顯示一個新窗口。 （因為我想做一個設置菜單）

我試圖在托盤圖標上打開一個新窗口，但很難理解，因為使用“遠程”有很多過時的信息。 （遠程目前已棄用。https://www.electronjs.org/docs/api/remote ）

2. 對於第二個問題，我在托盤圖標的右鍵菜單中設置了“始終在最前面”，但不起作用。

3. 我想添加app關閉時記住窗口位置和啟動app時恢復坐標的過程，但是出現錯誤。

---

const {app, BrowserWindow, Menu, Tray} = require('electron')
const path = require('path')
const url = require('url')


// Multiple execution prevention
const doubleboot = app.requestSingleInstanceLock();
if(!doubleboot){
  app.quit();
}

let win

function createWindow () {
  // Create the browser window.
  win = new BrowserWindow({
    width: 800,
    height: 600,
    transparent:true,
    frame:false,
    resizable:false,
    webPreferences: {
      nodeIntegration: true,
    },
    alwaysOnTop : false,
    })

  // and load the index.html of the app.
  win.loadURL(url.format({
    pathname: path.join(__dirname, 'index.html'),
    protocol: 'file:',
    slashes: true
  }))

  // Open the DevTools.
  win.webContents.openDevTools()

  // Restore window position
  if (localStorage.getItem("windowPosition")) {
    var pos = JSON.parse(localStorage.getItem("windowPosition"));
    win.setPosition(pos[0], pos[1]);
}

  // Emitted when the window is closed.
  win.on('closed', function () {
    // Dereference the window object, usually you would store windows
    // in an array if your app supports multi windows, this is the time
    // when you should delete the corresponding element.
    // win = null

    // Save window position when closed
    localStorage.setItem("windowPosition", JSON.stringify(win.getPosition()));
  })
}

// https://www.electronjs.org/docs/api/tray

app.whenReady().then(() => {
  tray = new Tray('./img/icon.ico')
  const contextMenu = Menu.buildFromTemplate([
    { label: 'Always on top', type: 'checkbox'},
    { label: "Focus", click: function () { win.focus(); } },
    { label: 'Settings', click: function () { window.open()} },
    { label: "Exit", click: function () { win.close(); } }
  ])
  tray.setToolTip('This is my application.')
  tray.setContextMenu(contextMenu)
  contextMenu.items[0].checked = false


//always on top 
  function checked(){
    if (contextMenu.items[0] === 0 ){
      win.alwaysOnTop = true;
    }
    else {
      win.alwaysOnTop = false;
    }
}

})

app.on('ready', createWindow) 


// app.on('window-all-closed', () => {
//   if (process.platform !== 'darwin') {
//     app.quit()
//   }
// })

// app.on('activate', () => {
//   if (win === null) {
//     createWindow()
//   }
// })

Answer 1

第二，您可以使用 window.getBounds() 獲取窗口狀態並將其存儲到 userData

const saveWindowState = (file: any, window: Electron.BrowserWindow) => {
      const windowState = window.getBounds();
      try {
        fs.writeFileSync(file, JSON.stringify(windowState));
      } catch (e) {
        log.error(e);
      }
    }

然后在關閉窗口時保存狀態

mainWindow.on("blur", () => {
        saveWindowState(boundsInfoPath, mainWindow);
      });

並在啟動時從 userData 中檢索信息

const boundsInfoPath = path.join(app.getPath("userData"), "bounds-info.json");
let windowOptions: Electron.BrowserWindowConstructorOptions;
try {
  windowOptions = JSON.parse(fs.readFileSync(boundsInfoPath, "utf-8"));
  if (!windowOptions) {
    throw new Error(
      "Provided bounds info file does not validate, using defaults instead."
    );
  }
} catch (e) {
 
  
}

並將 windowOptions 屬性應用到 mainWindow