返回

善用Electron，打造自己的桌面应用宝藏！

前端

Electron框架的魅力之所在

Electron是一款基于Chromium和Node.js构建的开源框架，它允许开发者使用熟悉的前端技术来创建跨平台的桌面应用程序。Electron应用可以访问本地文件系统、系统通知、菜单栏等系统资源，让Web页面在桌面上拥有原生的应用体验。

打包Web页面为桌面应用的步骤

1. 初始化项目

首先，创建一个新的Electron项目。您可以在终端中输入以下命令：

npm init electron-app my-app

2. 安装Electron

安装Electron框架：

npm install electron --save-dev

3. 创建主进程文件

主进程文件是Electron应用的入口，负责创建应用窗口、处理菜单事件等。您可以在项目的根目录下创建main.js文件，并添加以下代码：

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

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

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

  // 当窗口关闭时退出应用
  win.on('closed', () => {
    app.quit()
  })
}

// Electron启动后创建窗口
app.whenReady().then(createWindow)

// 所有窗口关闭时退出应用
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

// 激活应用程序时创建窗口
app.on('activate', () => {
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow()
  }
})

4. 创建渲染进程文件

渲染进程文件负责显示Web页面内容。您可以在项目的根目录下创建index.html文件，并添加以下代码：

<!DOCTYPE html>
<html>
  <head>
    
  </head>
  <body>
    <h1>Hello, Electron!</h1>
  </body>
</html>

5. 打包应用

您可以使用Electron的内置打包工具electron-packager将应用打包为可执行文件。在终端中输入以下命令：

electron-packager . --platform=darwin --arch=x64 --icon=icon.icns --out=dist

探索Electron的更多奥秘

1. 访问系统资源

Electron允许您访问本地文件系统、系统通知、菜单栏等系统资源。您可以使用require函数来加载内置的Node.js模块，例如：

const fs = require('fs')

fs.readFile('file.txt', 'utf8', (err, data) => {
  if (err) {
    console.error(err)
    return
  }
  console.log(data)
})

2. 创建原生菜单栏

您可以使用Menu模块来创建原生菜单栏。例如：

const { Menu } = require('electron')

const template = [
  {
    label: '文件',
    submenu: [
      {
        label: '新建',
        click: () => {
          // 创建一个新的窗口
          const win = new BrowserWindow({ width: 800, height: 600 })
          win.loadFile('index.html')
        }
      },
      {
        label: '打开',
        click: () => {
          // 打开一个文件选择器
          const { dialog } = require('electron')
          dialog.showOpenDialog((filePaths) => {
            if (filePaths) {
              // 加载选定的文件
              const win = new BrowserWindow({ width: 800, height: 600 })
              win.loadFile(filePaths[0])
            }
          })
        }
      },
      {
        label: '保存',
        click: () => {
          // 保存当前窗口的内容
          const { BrowserWindow } = require('electron')
          const win = BrowserWindow.getFocusedWindow()
          win.webContents.printToPDF({}, (err, data) => {
            if (err) {
              console.error(err)
              return
            }
            // 将PDF文件保存到磁盘
            const { dialog } = require('electron')
            dialog.showSaveDialog((filePath) => {
              if (filePath) {
                fs.writeFile(filePath, data, (err) => {
                  if (err) {
                    console.error(err)
                    return
                  }
                  console.log('PDF文件已保存')
                })
              }
            })
          })
        }
      },
      {
        label: '退出',
        click: () => {
          // 退出应用
          app.quit()
        }
      }
    ]
  },
  {
    label: '编辑',
    submenu: [
      {
        label: '撤销',
        click: () => {
          // 撤销上一次的操作
          const { webContents } = require('electron')
          webContents.getFocusedWebContents().undo()
        }
      },
      {
        label: '重做',
        click: () => {
          // 重做上一次的操作
          const { webContents } = require('electron')
          webContents.getFocusedWebContents().redo()
        }
      },
      {
        label: '剪切',
        click: () => {
          // 剪切选中的内容
          const { webContents } = require('electron')
          webContents.getFocusedWebContents().cut()
        }
      },
      {
        label: '复制',
        click: () => {
          // 复制选中的内容
          const { webContents } = require('electron')
          webContents.getFocusedWebContents().copy()
        }
      },
      {
        label: '粘贴',
        click: () => {
          // 粘贴复制的内容
          const { webContents } = require('electron')
          webContents.getFocusedWebContents().paste()
        }
      }
    ]
  },
  {
    label: '帮助',
    submenu: [
      {
        label: '关于',
        click: () => {
          // 显示关于对话框
          const { dialog } = require('electron')
          dialog.showMessageBox({
            title: '关于',
            message: '这是一个使用Electron框架开发的应用'
          })
        }
      }
    ]
  }
]

const menu = Menu.buildFromTemplate(template)
Menu.setApplicationMenu(menu)

3. 处理事件

Electron允许您监听各种事件，例如窗口事件、菜单事件、键盘事件等。您可以使用on()方法来监听事件，例如：

win.on('closed', () => {
  app.quit()
})

win.on('maximize', () => {
  console.log('窗口已最大化')
})

结语

Electron框架为Web开发