不论是学习语言亦或是各种框架，最开始上手都必然是"Hello World"类型的简单编程。那么我作为一个Electron的初学者自然也不例外。
Electron应用从开发的角度来看可以视作是一个Node.js应用。所以一个基本的Electron应用的文件目录应该会是下面这个样子的（当然了，除了package.json其他文件的文件名都不一定）：
Hello World/
├── package.json
├── main.js
└── index.html
文章目录
package.json
那么既然是可以看作是Node.js应用，那么程序的入口也与Node.js相同是package.json文件。而一个基本的package.json文件有三个字段：
{
"name" : "Hello-World-App",
"version": "1.0.0",
"main" : "main.js"
}
其中又属main字段最为重要，因为Electron运行main字段所指脚本的进程为主进程。在主进程中运行的脚本通过创建web页面来展示用户界面。 一个 Electron 应用总是有且只有一个主进程。值得注意的是，如果省略了main字段，那么将会去尝试加载index.js。
main.js
接着就来看main.js。
'user strict'
const {app, BrowserWindow} = require('electron');
let mainWindow = null; //应用窗口的引用
app.on('window-all-closed', ()=>{
if(process.platform !== 'darwin'){
app.quit();
}
});
app.on('ready', ()=>{
mainWindow = new BrowserWindow();
mainWindow.loadFile('index.html');
mainWindow.on('closed', ()=>{
mainWindow = null;
});
});
app对象是Electron应用对象的引用，控制着应用程序的事件生命周期。 例如ready事件，它将会在应用程序初始化之后被触发。
而BroswerWindow对象则负责创建和控制窗口。在官方文档中是这么描述的
主进程使用 BrowserWindow 实例创建页面。 每个 BrowserWindow 实例都在自己的渲染进程里运行页面。 当一个 BrowserWindow 实例被销毁后，相应的渲染进程也会被终止。
所以new BroswerWindow()这一操作可以理解为新打开一个浏览器窗口，而mainWindow.loadFile(‘index.html’)则可以理解为是在这一新打开的窗口中访问index.html页面。
index.html
这一部分没有什么新鲜的，就是写一个普通的网页。
<!DOCTYPE html>
<html>
<head>
<title>Hello World</title>
<meta charset="utf-8"/>
<script type="text/javascript">
function clickHandler(e){
alert('Hello world');
}
</script>
<style>
*{
margin: 0;
padding: 0;
}
html, body, section{
height: 100%;
}
section{
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(45deg, #ececec 0%, #fff 100%);
text-align: center;
}
button{
width: 200px;
height: 60px;
}
</style>
</head>
<body>
<section>
<button onclick="clickHandler()">Click Me!</button>
</section>
</body>
</html>
效果
