既然說Electron.js能夠開發桌面應用程序,那起碼我們學習過程中最基本的就是能夠開發一個顯示`Helle World`的桌面應用程序吧。那我們直接進入教程吧:
- 在`D盤`(當然其他盤也可以)創建一個`electronjs`的目錄,用做Electron.js開發的項目的工作空間。
- 在`electronjs`目錄下,創建一個`Hello Electron`的文件夾。
- 在`Hello Electron`下面創建三個文件:
- `package.json` 這個文件主要是配置應用程序基本信息和啟動文件
- `app.js` 應用程序的入口,也就是上面說的啟動文件
- `index.html` 一個輸出Hello World的HTML頁面。
- 在 `package.json`中,鍵入以下代碼,如:
```
{
"name":"My First Electron App", // 應用程序名稱
"version":"0.0.1", // 應用程序版本
"main":"app.js" // 應用程序入口文件
}
```
- 在 `app.js`中鍵入下面代碼,如:
```
// 載入electron模塊
const electron=require("electron");
// 創建應用程序對象
const app=electron.app;
// 創建一個瀏覽器窗口,主要用來加載HTML頁面
const BrowserWindow=electron.BrowserWindow;
// 聲明一個BrowserWindow對象實例
let mainWindow;
定義一個創建瀏覽器窗口的方法
function createWindow(){
// 創建一個瀏覽器窗口對象,并指定窗口的大小
mainWindow=new BrowserWindow({
width:300,
height:300
});
// 通過瀏覽器窗口對象加載index.html文件,同時也是可以加載一個互聯網地址的
mainWindow.loadURL('file://'+__dirname+'/index.html');
// 同時也可以簡化成:mainWindow.loadURL('./index.html');
// 監聽瀏覽器窗口對象是否關閉,關閉之后直接將mainWindow指向空引用,也就是回收對象內存空間
mainWindow.on("closed",function(){
mainWindow = null;
});
}
// 監聽應用程序對象是否初始化完成,初始化完成之后即可創建瀏覽器窗口
app.on("ready",createWindow);
// 監聽應用程序對象中的所有瀏覽器窗口對象是否全部被關閉,如果全部被關閉,則退出整個應用程序。該
app.on("window-all-closed",function(){
// 判斷當前操作系統是否是window系統,因為這個事件只作用在window系統中
if(process.platform!="darwin"){
// 退出整個應用程序
app.quit();
}
});
// 監聽應用程序圖標被通過點或者沒有任何瀏覽器窗口顯示在桌面上,那我們應該重新創建并打開瀏覽器窗口,避免Mac OS X系統回收或者銷毀瀏覽器窗口
app.on("activate",function(){
if(mainWindow===null){
createWindow();
}
});
```
- 在 `index.html`中鍵入下面代碼,如:
```
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello World</title>
</head>
<body>
Hello World!
</body>
</html>
```
- 到處位置我們就已經完成基本的初始化了,我們只需要通過命令行輸入:`d:`回車,進入`D盤`,然后再輸入`cd electronjs/Hello Electron`進入當前的`Hello Electron`文件夾中。
- 然后輸入`electron .`,神奇的事情就發生了。你可要看到下圖所示:

到這里,一個簡單的windows應用程序就已經開發完畢。
-----
如果你覺得此教程對你有價值,并且愿意讓她繼續寫下去,你可以資助這個教程的編寫,為作者加油打氣。
