Electro桌面应用开发之HelloWorld
简介
Electron (http://http😕/electron.atom.io)提供了一个使用Node.js进行桌面应用开发的环境。 本文介绍了一个基于Electron的HelloWorld应用的开发过程。
第一步： 创建应用源代码文件
在本地新建一个HelloWorld目录, 并创建如下文件
- package.json
{
"name": "HellowworldApp",
"version": "0.1.0",
"main": "main.js"
}
- main.js
const {app, BrowserWindow} = require('electron')
// Global reference of the window object
let win
function createWindow () {
// Create the browser window.
win = new BrowserWindow({width: 800, height: 600})
// and load the index.html of the app.
win.loadURL(`file://${__dirname}/index.html`)
// Emitted when the window is closed.
win.on('closed', () => {
win = null
})
}
// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
app.on('ready', createWindow)
// Quit when all windows are closed.
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit()
}
})
app.on('activate', () => {
if (win === null) {
createWindow()
}
})
- index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
</head>
<body>
<h1>Hello World!</h1>
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>.
</body>
</html>
第二步： 安装Electron
在HelloWorld目录下运行如下命令以下载和安装Electron
npm install electron --save-dev
该命令将Electron安装在node_modules目录下，同时也在package.json文件中添加Electron的相关信息
- package.json
{
"name": "HellowworldApp",
"version": "0.1.0",
"main": "main.js",
"devDependencies": {
"electron": "^1.4.4"
}
}
第三步： 运行HelloWorld应用
在HelloWorld目录下运行如下命令以运行HelloWorld应用。
.\node_modules\.bin\electron .
第四步： 打包HelloWorld应用
使用electron-packager生成可以在本地直接运行的应用程序。
首先使用-g选项安装electron-packager。
npm install electron-packager -g
其次在HelloWorld目录下运行如下命令以安装HelloWorld应用。
npm install .
然后运行如下命令将HelloWorld应用打包
electron-packager .
在Windows 7环境下该命令会生成HellowworldApp-win32-x64目录，包含HellowworldApp.exe和其它所需的文件。
总结
本文介绍了一个基于Electron的HelloWorld应用的开发过程。
