Electron系列教程——第二篇：第一个示例

一、楔子

在正式开始音乐播放器项目之前，还需要来个简单的案例，以便更好的理解Electron。如果你已经使用过Electron，可以跳过这篇。

本篇将实现：

1，Electron的Windows运行环境配置；
2，Electron开发时的源码结构讲解；
3，结构中每一个文件的作用；
4，运行第一个Windows客户端

二、目录

Electron系列教程第二篇第一个示例
- 一楔子
- 二目录
- 三正文
  - 一安装electron
    - 依赖管理工具的安装
    - 安装electron包
    - 验证electron安装成功
    - 解释下弹出的窗体
  - 二源代码编写
    - 创建源码文件
      - 1目录结构是这样的
      - 2各个文件的内容分别如下所示
        21packagejson
        
        22mainjs
        
        23indexhtml
  - 三运行代码
  - 四总结

三、正文

一：安装electron

1.依赖管理工具的安装：

yarn是一个快速、可靠、安全的依赖管理工具。点击前往yarn中文网，下载最新版本。
你也可以使用npm。

2.安装electron包：

cmd命令窗口下，执行如下命令，下载最新版本的electron：

>yarn global add electron
OR
>npm install electron -g

3.验证electron安装成功：

随意开启一个cmd窗口，运行命令：electron ，如果你见到弹出如下窗体，说明安装成功。

3.解释下弹出的窗体：

如你所见，这个窗体是，默认情况下弹出的引导性窗体。所谓默认情况，是指还没有编写任何自定义源码的情况。

二：源代码编写

为了简洁起见，我们将编写一个窗体，界面中显示Hello，Electron！。

1.创建源码文件：

找一个目录，比如：E:\electron_workspace，在其下新建文件夹名为：greeting，进入greeting文件夹，新建文件3个：package.json，main.js，index.html。

1.1：目录结构是这样的：

greeting/
├── package.json
├── main.js
└── index.html

说明如下：
（1）这个结构，我认为是最简洁的，没有之一，后期将看到，更复杂的组织形式。
（2）在这个结构中的文件里，你将定义自己的客户端，长什么样子，有什么功能等等。

1.2：各个文件的内容分别如下所示：

1.2.1，package.json

{"name"    : "greeting","version" : "0.1.0","main"    : "main.js"
}

说明如下：
（1）这个文件，不能有注释符号。//或者/*。
（2）name属性，可以自定，TA会在以后有些地方用得到。
（3）version属性，当前客户端版本。这个主要用于客户端版本更新，或者用于将来查看当前版本号。
（4）main属性，熟悉C语言或者java语言的小伙伴，不会陌生。TA指定了主进程执行的入口。

1.2.2，main.js

const {app, BrowserWindow} = require('electron')
//声明我们的greeting窗体变量
let greetingWin;//当app完成初始化时，执行窗体的创建。
app.on('ready', createGreetingWindow)function createGreetingWindow(){//构建一个高600，宽800的窗体，可以认为，一个窗体是一个浏览器的tab选项卡。greetingWin = new BrowserWindow({width: 800, height: 600})//窗体中显示的内容是index.html文件中的内容，将按照google浏览器的渲染方式，渲染显示。//__dirname,表示main.js所在的目录路径greetingWin.loadURL(__dirname + "/index.html")//监听窗体关闭事件，当窗体已经关闭时，将win赋值为null，垃圾回收。greetingWin.on('closed', () => {win = null})
}

说明如下：
（1）客户端启动时，主进程执行main.js；
（2）窗体中显示的内容是index.html文件中的内容

1.2.3，index.html

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>Hello Electron!</title></head><body><h1>Hello Electron!</h1> </body>
</html>

三：运行代码

进到greeting文件夹所在的目录，按住Shit键，鼠标右击，单击“在此处打开命令窗口”，然后输入如下命令：

 >electron greeting

你看到的，应该是这个样子：

四：总结

好了，经过这简单的步骤，第一个Demo就运行起来了。十分简单。

除了输入命令行运行方式外，你还可以将文件夹greeting拖拽到，默认的electron窗体内，运行程序。

我们在解释package.json文件内容是，提到说：main.js是主进程的入口文件。这里的问题是：什么是主进程？难道还有别的进程？

关于这个问题，我们下篇讲述。

祝平安夜平安。