Electron系列教程——第二篇：第一個示例
一、楔子
在正式開始音樂播放器項目之前，還需要來個簡單的案例，以便更好的理解Electron。如果你已經使用過Electron，可以跳過這篇。
本篇將實現：
1，Electron的Windows運行環境配置；
2，Electron開發時的源碼結構講解；
3，結構中每一個文件的作用；
4，運行第一個Windows客戶端
二、目錄
三、正文
一：安裝electron
1.依賴管理工具的安裝：
yarn是一個快速、可靠、安全的依賴管理工具。點擊前往yarn中文網，下載最新版本。
你也可以使用npm。
2.安裝electron包：
cmd命令窗口下，執行如下命令，下載最新版本的electron：
>yarn global add electron
OR
>npm install electron -g3.驗證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是主進程的入口文件。這裏的問題是：什麼是主進程？難道還有別的進程？
關於這個問題，我們下篇講述。
祝平安夜平安。