安裝Node.js非常簡單，我這裡是Windows X64位元作業系統，這裡我就以我的作業系統為例，我們直接打開Node.js官網：https://nodejs.org/en/，直接在首頁下面就可以看到DownLoad，我們點擊最新版
6.1.0 Current下載即可，你也可以使用穩定版本，如4.4.4LTS版本。我這裡使用的是6.1.0 Current版本。
下載之後，我們直接點擊下一步，下一步即可安裝完成。安裝完成之後，我們只需要使用快速鍵
Window+R打開運行，然後輸入cmd進入命令列，最後鍵入node -v回車，能夠正確顯示你當前Node.js版本，即可安裝完成。
Node.js自帶一個非常棒的包管理工具：npm，npm是可以快速的找到你的包並載入你的Node.js環境中。比如接下來的Electron.js也是通過npm工具來安裝的。
我們可以直接在命令列輸入
npm -v即可查看npm的版本。
我們正式進入Electron.js的安裝。
安裝Electron.js有以下步驟：
·
必須啟動以管理員運行的命令列
·
在命令列中輸入npm install -g electron-prebuilt回車，即可安裝Electron.js
·
等待安裝完成之後，在命令列輸入electron -v能夠顯示Electron.js版本號代表安裝成功。我這裡的版本是v1.1.0版本。
安裝Electron.js就這麼簡單！
Electron.js ----Hello World
既然說Electron.js能夠開發桌面應用程式，那起碼我們學習過程中最基本的就是能夠開發一個顯示Helle World的桌面應用程式吧。那我們直接進入教程吧：
·
在D碟 新建一個electronjs的目錄，用做Electron.js開發的專案的工作空間。
·
在electronjs目錄下，創建一個Hello Electron的資料夾。
·
在Hello Electron下麵創建三個文件：
o package.json 這個檔主要是配置應用程式基本資訊和開機檔案
o app.js 應用程式的入口，也就是上面說的開機檔案
o 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 .，神奇的事情就發生了。你可要看到下圖所示：
https://www.kancloud.cn/winu/electron/154345
沒有留言:
張貼留言