Electron学习笔记（一）：入门到环境搭建

发表于

什么是Electron

Electron是由Github研发的使用HTML、CSS、Javascript开发跨平台桌面应用程序的开源开发框架。Electron通过把Chromium和Node.js结合进一个运行时中实现，它开发的app能够被打包为Mac、Windows和Linux平台的应用程序。

提到跨平台桌面应用开发，最先想到的应该是JavaFx。JavaFx的一大特点是传统的XML语言结合Java进行开发，能够跨平台运行。但是我个人认为JavaFx那些控件写起来远不如Android当中的控件写起来更方便。这次偶然得知使用HTML来开发跨平台应用的框架，我很兴奋，毕竟用HTML来做UI是非常方便的，得益于它丰富的框架和成熟的体系。

Electron官方网站
学习参考教程

Hello Electron

必备环境：Node.js

按照教程所说，建议把Electron安装到每一个项目的依赖中，那么安装完Node.js之后，我们就可以着手开始做第一个App了

第一个App的名字就叫HelloEla，建立一个文件夹（D:\Work\ElectronProject\HelloEla），进入这个文件夹，右键点击空白处选择 Git Bash Here

输入并执行npm init：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
name: (helloela)
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author: peceoqicka
license: (ISC)
About to write to D:/Work/ElectronProject/HelloEla/package.json:

{
    "name": "helloela",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
    },
    "author": "peceoqicka",
    "license": "ISC"
}

Is this ok? (yes) yes

一路回车即可，在提示author时输入你的名称，最后确认时回车会在HelloEla目录下生成一个名为package.json的文件

输入以下命令安装Electron：

1
$ npm install -g electron

安装完成后可以输入以下命令检测是否正确安装，如果正确安装会提示版本号（我的是v2.0.4）：

1
$ electron -version

新建一个文件名为main.js，并输入以下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
const {app, BrowserWindow} = require('electron') 
const url = require('url') 
const path = require('path')  

let win  

function createWindow() { 
   win = new BrowserWindow({width: 800, height: 600}) 
   win.loadURL(url.format ({ 
      pathname: path.join(__dirname, 'index.html'), 
      protocol: 'file:', 
      slashes: true 
   })) 
}  

app.on('ready', createWindow)

打开刚才生成的package.json，修改main的值为main.js

接着再新建一个文件命名为index.html，打开文件，拷贝以下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html>
   <head>
      <meta charset = "UTF-8">
      <title>Hello Electron!</title>
   </head>
   
   <body>
      <h1>Hello Electron!</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>

然后在刚才打开的bash窗口中输入命令运行App：

1
$ electron ./main.js

能够看到一个弹出的窗口：