electron是什么?

使用 JavaScript，HTML 和 CSS 构建跨平台的桌面应用程序
官网：http://www.electronjs.org/

环境搭建

使用原生的Node.js开发环境来开发Electron应用。 为了打造一个Electron桌面程序的开发环境，只需要安装好Node.js、npm、一个顺手的代码编辑器以及对你的操作系统命令行客户端有基本了解。

创建第一个electron应用

Electron 可以让你使用纯 JavaScript 调用丰富的原生(操作系统) APIs 来创造桌面应用。 你可以把它看作一个 Node. js 的变体，它专注于桌面应用而不是 Web 服务器端。
从开发的角度来看, Electron application 本质上是一个 Node. js 应用程序。 与 Node.js 模块相同，应用的入口是 package.json 文件。 一个最基本的 Electron 应用一般来说会有如下的目录结构：

1
2
3
4
your-app/
 |- package.json
 |- index.js
 |- index.html

创建项目

创建项目空文件夹以及基本配置

首先为项目创建空文件夹electron-demo，然后在命令行输入如下命令：

1
2
cd electron-demo
npm init

然后一直回车到底，或者将npm init替换成npm init -y快速初始化。

配置启动命令

在上一步执行完成后会在electron-demo目录下创建package.json文件，修改package.json文件：

1
2
3
4
5
6
7
8
9
10
11
12
{
  "name": "electron-demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "electron ." // 启动项
  },
  "author": "",
  "license": "ISC"
}

配置好后，后期就可以直接在命令行输入：npm run start即可运行项目。

安装 Electron

在electron-demo命令行下输入如下命令进行安装electron：

1
npm i electron -S

开发

Electron apps 使用JavaScript开发，其工作原理和方法与Node.js 开发相同。 electron模块包含了Electron提供的所有API和功能，引入方法和普通Node.js模块一样。
在electron-demo下新建index.js，然后引入electron：

1
const electron = require('electron')

electron 模块所提供的功能都是通过命名空间暴露出来的。 比如说： electron.app负责管理Electron 应用程序的生命周期， electron.BrowserWindow类负责创建窗口。
下面是一个简单的index.js文件，它将在应用程序准备就绪后打开一个窗口：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const { app, BrowserWindow } = require('electron')

function createWindow () {   
  // 创建浏览器窗口
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  })
  // 并且为你的应用加载index.html
  win.loadFile('index.html')
}
app.whenReady().then(createWindow)