不论是学习语言亦或是各种框架,最开始上手都必然是"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>