Electron-開發第一個桌面應用

1.開始配置

開始一個electron桌面應用的開發，首先需要配置好三個檔案
 + package.json 檔案，這個檔案基本是開發标配了，主要是對Electron工程進行一些配置
 + index.js    檔案檔案名可換，但是一般預設都是index
 + index.html	Electron桌面應用的入口檔案，用于主視窗UI的桌面檔案
           

通過npm init 腳手架來建立上述三個檔案

實際上package.json中必要的字段就是前面幾個，一個是name：表名稱，version:表版本号， main:入口檔案,

在package.json中的devDependencies 配置一下安裝electron版本，可能你會奇怪已近全局安裝了electron，怎麼在這裡還需要局部安裝一下 electron，主要是因為啟動起來友善，當然這裡也可以選擇本地不安裝electron, 那麼本地啟動electron項目的時候就會略複雜，需要增加一個extern tool 的設定或者是 在webstorm右上角用add configuration增加一個node的環境配置。

這裡為了最簡單，就本地再安裝一次 electron。

開發代碼

這裡簡單說明，就用最簡單的代碼來示範。index.html視圖層就是展示一串字元串

在邏輯層的處理也很簡單，首先引入electron這個子產品，然後監聽應用主體，當應用主體在系統上初始化完成之後再内嵌我們的頁面（在這裡就是index.html頁面），代碼如下：

解釋下：

const {app, BrowserWindow} = require('electron');
           

這一句意思如下：

BrowserWindow:

electron提供的一個類，一個類可代表一個本地視窗，而這個視窗内嵌了v8核心的浏覽器，這個浏覽器内嵌本地頁index.html）

app:

整個應用程式的本身，對整個應用程式有一些全局的事件。

然後既可以在項目的根目錄下輸入下面指令

electron .
           

注意electron 後面有個空格

執行個體如下：

至此，一個非常簡單的基于electron的桌面應用程式就開發完成了。