一、Electron輕松入門

? ? ? ? 1.搭建開發環境：

? ? ? ? 一般情況下開發者會使用node.js來創建electron項目，node.js是一個基于Chrome V8引擎的javascript運行環境，所以首先需要到官網去下載安裝node.js

????????? 下載鏈接：https://nodejs.org/enhttps://nodejs.org/en

? ? ? ? 另外，需要使用yarn依賴包管理工具,安裝命令：npm? install? -g? yarn

? ? ? ? 接下來，我們創建第一個electron應用，先創建一個目錄，再次目錄下打開命令行，執行如下命令創建第一個node.js項目：yarn? init

? ? ? ? 上述命令執行完成后，會有一系列提示，要求用戶輸入項目名稱、項目版本等信息。之后項目創建完成之后，在該目錄下會生成一個package.json文件，該文件為為該項目的配置文件

????????2.安裝electron依賴包：

? ? ? ? 國內用戶一般在阿里巴巴搭建好的electron的鏡像網站：????????????????? ?https://npm.taobao.org/mirrors/electronhttps://npm.taobao.org/mirrors/electron? ? ?

?????????

然后設置指令：yarn? config? set? ELECTRON_MIRROR?https://cdn.npm.taobao.org/dist/electron

? ? ? ? 之后環境變量設置號之后還需要在命令行中執行以下命令來安裝electron:

? ? ? ? yarn add electron? --dev? --platform=win64

????????3.安裝成功之后，項目目錄下會增加一個node_modules子目錄，在該目錄下存放著項目運行時依賴的node.js包

? ? ? ? 4.為了可以使用electron依賴包，可以在package.jsopn中增加一個script配置;

? ? ? ? "script" : { "start" : "electron? ./index.js" }

? ? ? ? 上述自定義腳本，代表我們可以使用yarn start使用electron來啟動本項目

二、創建窗口界面

? ? ? ? 1.在項目的根目錄下新建index.html文件

? ? ? ? 2.啟動窗口：在項目的根目錄下創建index.js文件

? ? ? ? 其中app代表整個應用，通過它可以獲取應用程序生命周期中的各個事件。我們在app的ready事件中創建窗口并且把窗口對象交給一個全局引用，這樣做的目的是不讓javascript執行引擎在垃圾回收時回收這個窗口對象

? ? ? ? 在創建窗口時，我們傳入了配置對象 webPreferences: {nodeIntergration: true},此配置對象告訴electron需要為頁面集成node.js環境并賦予index.html頁面中的javascript訪問node.js的能力

? ? ? ? 窗口創建完成后，窗口加載了index.html

? ? ? ? 在窗口關閉時，將這個win全局置為空，所有的窗口關閉即可以退出app

? ? ? ? 執行yarn start 后，窗口成功啟動???????????????????????????????? ? ?

三、引用javascript

? ? ? ? 1.electron給index.js提供了完整的node.js環境的訪問能力，index.js可以像所有node.js程序一樣，通過require引入其他的js文件