一、环境搭建
1.1、安装 node.js
首先Electron是依赖node.js的，如果你的机器上还没有 Node.js 和 npm ，请安装它们，在此不做赘述。推荐使用淘宝镜像安装
1.2、全局安装 electron
请使用淘宝镜像安装，不然有可能安装失败
cnpm install electron -g
如果你的机子和我一样是Mac的话则需要加上sudo命令,也就是需要管理员权限，输好密码就可以开始等他安装了。
sudo cnpm install electron -g
全局安装之后，就可以进入项目所在目录，然后通过“electron .”启动应用。
二、Hello Electron
我们现在就先写一个hello world项目
我们先看下一个 Electron 项目的基本框架组成。
2.1、项目框架
参看官方的 demo ，一个 Electron 应用的目录结构大体如下：
your-app/
├── package.json
├── main.js
└── index.html
- package.json
package.json 的格式和 Node 的完全一致，并且那个被 main 字段声明的脚本文件是你的应用的启动脚本，它运行在主进程上。你应用里的 package.json 看起来应该像：
{
"name" : "your-app",
"version" : "0.1.0",
"main" : "main.js"
}
注意：如果 main 字段没有在 package.json 声明，Electron会优先加载 index.js。
- main.js
main.js 应该用于创建窗口和处理系统事件,Electron 的主进程将用它来启动并创建桌面应用。
const electron = require('electron')
const app = electron.app
const BrowserWindow = electron.BrowserWindow
const path = require('path');
const url = require('url');
let mainWindow
// 保持一个对于 window 对象的全局引用，如果你不这样做，
// 当 JavaScript 对象被垃圾回收， window 会被自动地关闭
function createWindow(){
// 创建浏览器窗口。
mainWindow = new BrowserWindow({width:800,height:600});
// 加载应用的 index.html。
mainWindow.loadURL(url.format({
pathname: path.join(__dirname,'index.html'),
protocol:'file',
slashes:true
}))
// 打开开发者工具。
mainWindow.webContents.openDevTools()
//监听 window 的关闭，关闭时这个事件会被触发。
mainWindow.on('closed',function(){
mainWindow = null;
})
}
// 监听Electron的初始化，之后执行函数创建浏览器窗口。
app.on('ready',createWindow)
// 监听当全部窗口关闭时退出，调用执行函数。
app.on('window-all-closed',function(){
if(process.platform!=='darwin'){
app.quit()
}
})
app 模块：会控制应用的生命周期，可以使用app监听各种状态比如：ready、quit等等
BrowserWindow 模块：为你创建窗口。
win 对象：是你应用的主窗口，被声明成 null ，否则当 JavaScript 垃圾回收掉这个对象时，窗口会被关闭。
- index.html
这个文件就是我们的视图层，需要展示的页面UI。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<h1>hello world </h1>
</body>
</html>
2.2、运行项目
使用命令行进入项目所在目录,执行electron . 就可以弹窗我们的hello world应用
cd desktop/your-app
electron .
运行结果如下
image.png
至此，一个简单的Electron应用就完成了。
