# Electron简介
[TOC]
## Electron简介
Electron是一个能让你使用 JavaScript, HTML 和 CSS 来创建桌面应用程序的框架。 这些应用程序可以打包后在 macOS、Windows 和 Linux 上直接运行，或者通过 Mac App Store 或微软商店进行分发。
## 什么时候使用Electron
1.公司没有专门的桌面应用开发者，而需要前端兼顾来进行开发时，用Electron就是一个不错的选择。
2.一个应用需要同时开发Web端和桌面端的时候，那使用Electron来进行开发就对了。
3.开发一些效率工具，比如API类的工具。
## 环境
检查 Node.js 是否正确安装：
```
node -v
npm -v
```
## 安装Electron
- 新建项目文件夹my-electron-app
cmd下运行命令
```
npm init -y
npm i --save-dev electron
```
最小的 Electron 应用程序具有以下结构：
my-electron-app/
├── package.json
├── main.js
└── index.html
- 创建index.html
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
<meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
</head>
<body style="background: white;">
<h1>Hello World!</h1>
<p>
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>.
</p>
</body>
</html>
```
- 创建main.js
```
//BrowserWindow控制桌面应用窗口
const { app, BrowserWindow } = require('electron')
function createWindow () {
const win = new BrowserWindow({
width: 800,
height: 600,
//可以使用node.js下的所有模块
webPreferences: {
// 解决require is not defined问题
nodeIntegration: true
}
})
win.loadFile('index.html')//加载index.html页面
}
app.whenReady().then(createWindow)
// 关闭窗口，释放内存
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit()
}
})
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow()
}
})
```
- 创建package.json
- 自动初始化生成package.json
```
npm init --yes //生成package.json
```
- 手动创建package.json
默认情况下，`npm start`命令将用 Node.js 来运行主脚本。 要使用 Electron 来运行脚本，您需要将其更改为这样：
```
{
"name": "my-electron-app",
"version": "0.1.0",
"author": "your name",
"description": "My Electron app",
"main": "main.js",
"scripts": {
"start": "electron ."
}
}
```
## 关于安装
- 无法下载electron的情况下
设置淘宝镜像源
```
npm config set ELECTRON_MIRROR https://npm.taobao.org/mirrors/electron/
```
- 局部安装
在项目文件夹下运行开发环境安装electron到项目中
```
npm i --save-dev electron 或 npm install electron --save-dev
```
- 全局安装
```
npm install -g electron
```
- 全局安装启动命令
```
electron .
```
- 局部安装启动命令，运行下面文件
```
./node_modules/.bin/electron .
```
## 检查Electron安装是否成功
~~~
npx electron -v
~~~
## 运行Electron
启动Electron
```
electron .
```
