在Electron中更改Windows大小

Question

我对电子很新,但很喜欢它.但是,我坚持一件事,所以经过一些指导,如果可能的话.

我有一个小测试应用程序,我将用于用户登录页面.

在我的main.js文件中,我将mainWindow属性设置如下:

function createWindow() {

  mainWindow = new BrowserWindow({frame:false,
    width: 1024,
    height: 565,
    minWidth: 1024,
    minHeight: 565,
    frame: false,
    resizable: false,
    show: false,
    center: true,
    backgroundColor: '#312450',
    icon: path.join(__dirname, 'assets/icons/png/64x64.png')
  })

  mainWindow.loadURL(`file://${__dirname}/login.html`)

    mainWindow.once('ready-to-show', () => {
      mainWindow.show()
    })

    //mainWindow.webContents.openDevTools({detach: true})

    mainWindow.on('closed', function() {
      mainWindow = null
    })
  }

然后在app.on事件中启动它.

到目前为止,这一切都很好.

我还将一个eventlistener添加到login.html页面中的按钮,如下所示:

btnSignIn.addEventListener('click', function(){

const email = txtEmail.value;
const pass = txtPassword.value;

firebase.auth().signInWithEmailAndPassword(email, pass).then(function(){
    document.location.href = 'loggedin.html';
}).catch(function(error){
    if(error != null){
        alert(error.message);
        return;
    }
})

},false);

这一切都运作得很好.我唯一的问题是我希望第二页(loggedin.html)的大小不同.

我认为我必须更改之前指定的mainWindow选项,但我无法实现它.

任何指针都非常感激.

问候

Ĵ

Answer 1

在渲染器进程(从中加载js脚本login.html)中,您应该能够加载Electron和Node模块.

const {ipcRenderer} = require('electron');

// Right after the line where you changed the document.location
ipcRenderer.send('resize-me-please')

在main.js中

const {ipcMain} = require('electron')
ipcMain.on('resize-me-please', (event, arg) => {
  mainWindow.setSize(width,height)
})

Answer 2

要添加 Leonardo 的答案，如果您的应用程序可能有多个窗口，您可以通过从 IPC 事件中提取该窗口来解析发送者窗口，如下所示：

main.js

const {ipcMain} = require('electron')

ipcMain.on('resize-window', (event, width, height) => {
    let browserWindow = BrowserWindow.fromWebContents(event.sender)
    browserWindow.setSize(width,height)
})

渲染器

const {ipcRenderer} = require('electron');

// ...
ipcRenderer.send('resize-window', 1280, 720)