Electron入门实践(5):窗口管理与自动更新

引言 在Electron应用程序中,窗口管理和自动更新是两个关键特性,它们对用户体验和应用程序的可靠性至关重要。在本篇文章中,我们将探讨如何在Electron应用程序中有效地管理窗口,以及如何实现自动更新机制。

1. 窗口管理 Electron应用程序通常由多个窗口组成,如主窗口、对话框、弹出窗口、登录窗口等。有效地管理这些窗口对于创建一个流畅的用户界面至关重要。

创建窗口

在Electron中,我们直接使用BrowserWindow类来创建窗口。你可以设置窗口的各种属性,如大小、位置、图标等,下面是一个简单例子。

javascript 复制代码
// 主进程中的代码
const { app, BrowserWindow } = require('electron');
function createWindow() {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  });
  // 加载页面或文件
  win.loadFile('index.html');
  // 打开开发者工具(如果需要)
  // win.webContents.openDevTools();
  // 处理窗口关闭事件
  win.on('closed', () => {
    win = null;
  });
}
app.whenReady().then(createWindow);

窗口事件

窗口支持多种事件,如closedmovedresized等。你可以监听这些事件来响应窗口的各种状态变化。

窗口间通信

窗口之间可以通过ipcMainipcRenderer进行通信。这允许你在主进程和渲染进程之间,或者在不同渲染进程之间传递数据。

以下是我封装了一个window的示例,用于登录窗口切换主窗口:

javascript 复制代码
// window.js
import { app, BrowserWindow, globalShortcut, ipcMain } from 'electron'
import { join } from 'path'
import { buildMenu } from './menu'
import { createTray } from './tray'
import icon from '../../resources/icon.png?asset'
import { checkForUpdates } from './updater'

// 快捷键注册
function registryShortcut() {
  globalShortcut.register('CommandOrControl+K', () => {
    // 获取当前窗口,并注册快捷键
    BrowserWindow.getFocusedWindow().webContents.openDevTools()
  })
}

let loginWindow
let mainWindow

// 创建窗口的公共方法
function createWindow(config, url) {
  const baseConfig = {
    show: false,
    webPreferences: {
      preload: join(__dirname, '../preload/index.js'),
      sandbox: false,
      webSecurity: false,
      // nodeIntegration: true, // 根据需要设置
      // contextIsolation: false, // 根据需要设置
      devTools: true
    }
  }

  if (process.platform === 'linux') {
    baseConfig.icon = icon
  }

  const finalConfig = { ...baseConfig, ...config }
  const win = new BrowserWindow(finalConfig)

  if (!app.isPackaged && process.env['ELECTRON_RENDERER_URL']) {
    win.loadURL(process.env['ELECTRON_RENDERER_URL'])
  } else {
    win.loadFile(url)
  }

  win.once('ready-to-show', () => win.show())

  return win
}

// 创建登录窗口
function createLoginWindow() {
  loginWindow = createWindow(
    {
      width: 600,
      height: 670,
      autoHideMenuBar: true
    },
    join(__dirname, '../renderer/index.html')
  )

  // 加载 /login 路由
  loginWindow.webContents.on('did-finish-load', () => {
    loginWindow.webContents.send('replace', '/login')
  })

  ipcMain.once('login', () => {
    loginWindow.close()
    createMainWindow()
  })
}

// 创建主窗口
function createMainWindow() {
  mainWindow = createWindow(
    {
      width: 1024,
      height: 768,
      autoHideMenuBar: false
    },
    join(__dirname, '../renderer/index.html')
  )

  ipcMain.once('open-window', () => {
    createMainWindow()
  })

  ipcMain.once('logout', () => {
    mainWindow.close()
    createLoginWindow()
  })

  // 检查更新
  ipcMain.on('checkUpdate', () => {
    checkForUpdates(mainWindow, ipcMain)
  })

  // 主要用于创建顶部窗口导航栏
  buildMenu(mainWindow)
  // 托盘
  createTray(mainWindow)
}

app.whenReady().then(() => {
  createLoginWindow()
  // 注册快捷键
  if (!app.isPackaged && process.env['ELECTRON_RENDERER_URL']) {
    registryShortcut()
  }
})

app.on('activate', () => {
  if (BrowserWindow.getAllWindows().length === 0) {
    createLoginWindow()
  }
})

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

export default {
  createLoginWindow,
  createMainWindow
}

2. 自动更新

自动更新是保持应用程序最新和安全的常用方法。Electron提供了electron-updater库来实现自动更新机制。

使用electron-updater

首先,你需要安装electron-updater库。

bash 复制代码
npm install electron-updater

然后,在主进程中初始化electron-updater,并配置更新选项。

javascript 复制代码
// 主进程中的代码
const { app, BrowserWindow, ipcMain, dialog } = require('electron');
const { autoUpdater } = require('electron-updater');
function createWindow() {
  // ...创建窗口的代码
}
app.whenReady().then(createWindow);
// 设置自动更新
autoUpdater.on('update-available', (info) => {
  dialog.showMessageBox({
    type: 'info',
    title: '更新可用',
    message: '有新的更新可用,是否下载并安装?',
    button: ['是', '否']
  }).then((result) => {
    if (result.response === 0) {
      autoUpdater.downloadUpdate();
    }
  });
});
autoUpdater.on('update-downloaded', (info) => {
  dialog.showMessageBox({
    type: 'info',
    title: '更新下载完成',
    message: '更新已下载,是否重启以安装?',
    button: ['是', '否']
  }).then((result) => {
    if (result.response === 0) {
      autoUpdater.quitAndInstall();
    }
  });
});
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

那么, 我们如何在本地调试更新呢?

首先,我们要本地打包一次,我的window系统,所以依次执行

arduino 复制代码
npm run build
npm run build:win

打包成功后,把dist目录下app-update.yml文件代码复制给根目录app-update.yml,如下图所示

然后,update.js文件增加这串代码

修改version版本(必须比当前版本低)

最后本地运行

arduino 复制代码
npm run dev
相关推荐
前端 贾公子3 分钟前
Monorepo + vite 怎么热更新
前端
然我39 分钟前
不用 Redux 也能全局状态管理?看我用 useReducer+Context 搞个 Todo 应用
前端·javascript·react.js
前端小巷子44 分钟前
Web 实时通信:从短轮询到 WebSocket
前端·javascript·面试
神仙别闹1 小时前
基于C#+SQL Server实现(Web)学生选课管理系统
前端·数据库·c#
web前端神器1 小时前
指定阿里镜像原理
前端
枷锁—sha1 小时前
【DVWA系列】——CSRF——Medium详细教程
android·服务器·前端·web安全·网络安全·csrf
枷锁—sha1 小时前
跨站请求伪造漏洞(CSRF)详解
运维·服务器·前端·web安全·网络安全·csrf
群联云防护小杜1 小时前
深度隐匿源IP:高防+群联AI云防护防绕过实战
运维·服务器·前端·网络·人工智能·网络协议·tcp/ip
汉得数字平台2 小时前
【鲲苍提效】全面洞察用户体验,助力打造高性能前端应用
前端·前端监控
花海如潮淹2 小时前
前端性能追踪工具:用户体验的毫秒战争
前端·笔记·ux