electron桌面应用程序搭建及简单运行

下面是详细的“electron桌面应用程序搭建及简单运行”的完整攻略。

一、什么是Electron?

Electron 是由 Github 开发，用 HTML，CSS 和 JavaScript 来构建跨平台桌面应用程序的一个开源库。通过 Electron，可以使用 Web 技术如 HTML，CSS 和 JavaScript 来设计和构建 Windows、MacOS 和 Linux 等跨平台桌面应用程序。

二、Electron开发环境安装

1. 安装Node.js

Electron 是基于 Node.js 运行的，所以必须先安装 Node.js。安装方法可以上 Node.js 官网下载对应的安装包。

2. 安装Electron

在命令行中执行以下命令安装 Electron：

npm install electron -g

3. 使用Electron

创建一个新的项目目录，进入该目录，新建一个 package.json 文件（用于管理项目依赖），然后执行命令安装 Electron 的依赖：

npm init
npm install electron --save-dev

安装完成后，在项目的根目录下创建一个 main.js 文件，文件内容如下：

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

function createWindow () {
  // 创建窗口对象
  let win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      // 使用nodejs
      nodeIntegration: true
    }
  })

  // 窗口加载html页面
  win.loadFile('index.html')
}

// electron初始化完成时触发
app.on('ready', createWindow)

在项目根目录下新建一个 index.html 文件，文件内容如下：

<!DOCTYPE html>
<html>
<head>
  <title>Hello World!</title>
</head>
<body>
  <h1>Hello World!</h1>
</body>
</html>

接下来，在命令行中输入以下命令运行应用程序：

electron .

运行成功后，将会在桌面上弹出一个 Electron 应用程序，窗口中将会显示一个 “Hello World!” 的标题。

三、示例说明

下面我们来实现一个简单的托盘应用程序和一个文件选择器应用程序。

1. 托盘应用程序

创建一个名为 tray-app 的项目目录。

在该目录下创建如下文件：

index.html 文件：

<!DOCTYPE html>
<html>
<head>
  <title>Tray App</title>
  <script type="text/javascript">
    const { app, Menu, Tray } = require('electron')

    let tray

    function createTrayIcon() {
      tray = new Tray('./icon.png')
      const contextMenu = Menu.buildFromTemplate([
        { role: 'quit' }
      ])
      tray.setToolTip('Tray App')
      tray.setContextMenu(contextMenu)
    }

    app.whenReady().then(() => {
      createTrayIcon()
    })
  </script>
</head>
<body>
  <p>Tray App</p>
</body>
</html>

main.js 文件：

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

let win

function createWindow () {
  win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  })

  win.loadFile('index.html')
}

app.whenReady().then(() => {
  // 监听关闭事件
  app.on('window-all-closed', function () {
    // 判断是不是 Mac 系统
    if (process.platform !== 'darwin') {
      app.quit()
    }
  })

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

  // 创建菜单栏
  const template = [{
    label: 'Edit',
    submenu: [
      {role: 'undo'},
      {role: 'redo'},
      {role: 'cut'},
      {role: 'copy'},
      {role: 'paste'},
      {role: 'selectall'}
    ]
  }]

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

  createWindow()
})

将图片文件 icon.png 放在项目根目录下。

在命令行中输入以下命令运行应用程序：

electron .

运行成功后，将会在系统托盘中看到 Tray App 图标。

2. 文件选择器应用程序

在上面的 tray-app 项目目录下创建一个名为 dialog-app 的项目目录。