Electron_01 - 快速启动 | blog [ YOG WANG ]

自己创建 Electron 应用

1. 使用 `npm` 初始化一个项目

$ mkdir my-app

$ cd my-app

$ npm init --y
Wrote to E:\my-app\package.json:
{
  "name": "my-app",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

修改入口文件为 main.js 并且添加 start 脚本引导 Node 来执行 Electron

2. 安装 Electron

官方推荐的安装方法是把它作为应用中的开发依赖项，以在不同的应用中使用不同的 Electron 版本。

npm install electron --save-dev

3. 简易的 Electron 主进程

1.在 min.js 中引入 Electron

使用所有 API 和功能

const electron = require('electron')

按需引入

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

Electron 模块所提供的功能都是通过命名空间暴露出来的

在应用程序准备就绪后打开一个窗口

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

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

app.on('ready', createWindow)

完善上述例子，完善应用可能遇到的所有系统事件，那么一个简单的 main.js 就像下面这样：

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

// 保持对window对象的全局引用，如果不这么做的话，当JavaScript对象被
// 垃圾回收的时候，window对象将会自动的关闭
let win

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

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

  // 打开开发者工具
  win.webContents.openDevTools()

  // 当 window 被关闭，这个事件会被触发。
  win.on('closed', () => {
    // 取消引用 window 对象，如果你的应用支持多窗口的话，
    // 通常会把多个 window 对象存放在一个数组里面，
    // 与此同时，你应该删除相应的元素。
    win = null
  })
}

// Electron 会在初始化后并准备
// 创建浏览器窗口时，调用这个函数。
// 部分 API 在 ready 事件触发后才能使用。
app.on('ready', createWindow)

// 当全部窗口关闭时退出。
app.on('window-all-closed', () => {
  // 在 macOS 上，除非用户用 Cmd + Q 确定地退出，
  // 否则绝大部分应用及其菜单栏会保持激活。
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', () => {
  // 在macOS上，当单击dock图标并且没有其他窗口打开时，
  // 通常在应用程序中重新创建一个窗口。
  if (win === null) {
    createWindow()
  }
})

// 在这个文件中，你可以续写应用剩下主进程代码。
// 也可以拆分成几个文件，然后用 require 导入。

4. 创建想展示的 index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
  </head>
  <body>
    <h1>Hello World!</h1>
    We are using node <script>document.write(process.versions.node)</script>,
    Chrome <script>document.write(process.versions.chrome)</script>,
    and Electron <script>document.write(process.versions.electron)</script>.
  </body>
</html>

5. 启动应用

创建并初始化完成 main.js 、 index.html 和 package.json 之后，
就可以在当前工程的根目录执行 npm start 命令来启动刚刚编写好的 Electron 应用了。

$ npm start

> my-app@1.0.0 start E:\my-app
> electron .

基础结构

所以一个最基础的 Electron 应用应有以下目录结构：

my-app/
├── package.json
├── main.js
└── index.html

快速启动

官方 DEMO Electron-quick-start

# 克隆示例项目的仓库
$ git clone https://github.com/electron/electron-quick-start

# 进入这个仓库
$ cd electron-quick-start

# 安装依赖并运行
$ npm install && npm start

使用 Electron-forge 创建项目

$ npm i -g @electron-forge/cli

$ electron-forge init my-app

$ cd my-app

$ npm start