快速入门：用electron、vite和react打造截图桌面软件

2023-05-05 16:01:13

打造功能强大的截图桌面软件：Electron、Vite 和 React 携手出击

简介：Electron、Vite 和 React 的强强联合

为您的截图需求打造功能全面的桌面软件？使用 Electron、Vite 和 React，您便能轻松实现！Electron 是一个跨平台的开发框架，使用 JavaScript、HTML 和 CSS 构建桌面应用程序。Vite 是一个高效的前端构建工具，提供热模块重新加载和按需编译等功能。而 React 是一个流行的 JavaScript 库，用于构建响应式用户界面。

安装开发环境

首先，使用以下命令安装必要的软件包：

npm install electron vite react

创建 Electron 项目

使用以下命令创建新的 Electron 项目：

npx create-vite-electron-app my-app

启动开发服务器

通过以下命令启动开发服务器：

npm run dev

打开 Electron 应用程序

通过以下命令打开 Electron 应用程序：

npm run start

实现截图功能

Electron 提供了 Screenshot API，您可以使用它实现截图功能：

const {app, BrowserWindow, dialog, screenshot} = require('electron')
const fs = require('fs')

function createWindow () {
  // 创建浏览器窗口
  const win = new BrowserWindow({width: 800, height: 600})

  // 加载index.html文件
  win.loadFile('index.html')

  // 截图
  win.webContents.capturePage().then(image => {
    const savePath = dialog.showSaveDialogSync({
      title: '保存截图',
      defaultPath: '截图.png',
      filters: [{name: '图像文件', extensions: ['png', 'jpg', 'jpeg']}]
    })

    if (savePath) {
      fs.writeFile(savePath, image.toPNG(), (err) => {
        if (err) throw err
        dialog.showMessageBoxSync({message: '截图已保存'})
      })
    }
  })
}

app.whenReady().then(() => {
  createWindow()

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

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