創建簡單的Electron程序
1、首先，切換到你的項目空間，我的在 D:\ProjectsSpace\ElectronProjects\ElectronTest，ElectronTest是案例項目文件夾
①、打開cmd，切換到自己的項目文件目錄 
然後輸入命令 npm init創建 package.json文件， 
然後按照步驟一步一步來，一直到最後 
最後成功的圖： 
內容爲：
{
"name": "package.json",
"version": "1.0.0",
"description": "hello word",
"main": "app/main.js",
"dependencies": {
"electron-prebuilt": "^1.4.0"
},
"devDependencies": {
"electron-prebuilt": "^1.4.0"
},
"scripts": {
"test": "start",
"start": "electron ."
},
"author": "pengxiang",
"license": "ISC"
}- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
②、然後執行一次 npm install --save-dev electron
③、在根目錄下創建app文件夾，在app/下創建main.js,內容如下：
const electron = require('electron');
// 控制應用生命週期的模塊
const {app} = electron;
// 創建本地瀏覽器窗口的模塊
const {BrowserWindow} = electron;
// 指向窗口對象的一個全局引用，如果沒有這個引用，那麼當該javascript對象被垃圾回收的
// 時候該窗口將會自動關閉
let win;
function createWindow() {
// 創建一個新的瀏覽器窗口
win = new BrowserWindow({width: 1104, height: 620});//570+50
// 並且裝載應用的index.html頁面
win.loadURL(`file://${__dirname}/html/index.html`);
// 打開開發工具頁面
// win.webContents.openDevTools();
// 當窗口關閉時調用的方法
win.on('closed', () => {
// 解除窗口對象的引用，通常而言如果應用支持多個窗口的話，你會在一個數組裏
// 存放窗口對象，在窗口關閉的時候應當刪除相應的元素。
win = null;
});
}
// 當Electron完成初始化並且已經創建了瀏覽器窗口，則該方法將會被調用。
// 有些API只能在該事件發生後才能被使用。
app.on('ready', createWindow);
// 當所有的窗口被關閉後退出應用
app.on('window-all-closed', () => {
// 對於OS X系統，應用和相應的菜單欄會一直激活直到用戶通過Cmd + Q顯式退出
if (process.platform !== 'darwin') {
app.quit();
}
});
app.on('activate', () => {
// 對於OS X系統，當dock圖標被點擊後會重新創建一個app窗口，並且不會有其他
// 窗口打開
if (win === null) {
createWindow();
}
});
// 在這個文件後面你可以直接包含你應用特定的由主進程運行的代碼。
// 也可以把這些代碼放在另一個文件中然後在這裏導入。- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
④、然後在app/html下創建index.html文件，內容如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>我的世界</title>
</head>
<body>
<p>Hello World</p>
</body>
</html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
⑤、配置VS Code啓動環境
先裝全局： glup：npm install gulp -g
再裝本地： npm install --save-dev gulp
然後根目錄下創建gulpfile.js配置文件,內容如下：
// 獲取依賴
var gulp = require('gulp'),
childProcess = require('child_process'),
electron = require('electron');
// 創建 gulp 任務
gulp.task('run', function () {
childProcess.spawn(electron, ['--debug=5858','.'], {stdio:'inherit'});
});- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
⑥啓動項目
兩種方法：
1、使用cmd命令啓動
運行gulp任務：gulp run
2、使用VS Code編輯器啓動項目
首先，用VSC打開項目文件夾， 
然後，按下快捷鍵ctrl+shift+b,第一次啓動的時候會提示你配置生成任務，點擊
接着，選擇如圖， 
會自動配置task.json文件，修改此文件內容爲；
{
// See https://go.microsoft.com/fwlink/?LinkId=733558
// for the documentation about the tasks.json format
"version": "0.1.0",
"command": "gulp",
"isShellCommand": true,
"args": [
"--no-color"
],
"tasks": [ {
"taskName": "run",
"args": [],
"isBuildCommand": true
}]
}- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
保存，再使用ctrl+shift+b運行程序，基本就OK了，如圖
