【electron】electron入門 教你如何建立第一個electron應用 並進行打包【超詳細】
前言
electron 是一個可以讓我們使用js建立桌面應用程式的框架,並且可以很簡單的實現跨平臺,讓我們可以更輕鬆的書寫業務邏輯,而不用擔心跨平臺的問題。事實上,electron可以被看做一個精簡版的Chrome,內部的V8直譯器固然很強大,但是對比起傳統的桌面應用程式,也有略顯不足的地方。
但是這樣的框架只有electron一個嗎?當然不是,與之相對應的,還有一款出名的框架NW.js,至於二者的差別以及如何選擇,這裡暫不作出詳細的說明,當前我們只關心electron的問題。
編寫第一個electron應用
首先我們要安裝electron-prebuilt,它是一個npm模組,因此我們可以使用Npm來進行安裝,它是一個electron的預編譯版本。
npm install -g electron-prebuilt
接下來安裝electron-packager ,它也是一個npm模組,是一個用於打包electron應用的工具,具體使用方法我們稍後會詳細說明。
npm install -g electron-packager
現在開始進入正題,我們如何建立一個electron應用。
我們現在僅僅需要3個檔案。
index.html
main.js
package.json
index.html使我們想要顯示的頁面,main.js為此應用的入口,package.json為npm專案的配置檔案。現在整體看倆與普通的Node.js專案並無多大的差別。
cd進自己的專案進行初始化(目前我已經建立了一個專案資料夾叫myApp)
cd myApp
npm init
填好一些相關資訊後,我的package.json大概是這樣的:
{
"name": "zzh",
"version": "0.0.1",
"description": "a simple application",
"main": "main.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "zzh" ,
"license": "ISC"
}
我們再來看一下index.html,我給它加入了一個標題Hello World,其餘沒有什麼變動。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<h1>hello electron</h1>
</body>
</html>
接下來是main.js
const {app, BrowserWindow} = require('electron');
let win;
let windowConfig = {
width:800,
height:600
};
function createWindow(){
win = new BrowserWindow(windowConfig);
win.loadURL(`file://${__dirname}/index.html`);
//開啟除錯工具
win.webContents.openDevTools();
win.on('close',() => {
//回收BrowserWindow物件
win = null;
});
win.on('resize',() => {
win.reload();
})
}
app.on('ready',createWindow);
app.on('window-all-closed',() => {
app.quit();
});
app.on('activate',() => {
if(win == null){
createWindow();
}
})
第一行載入app ,以及BrowserWindow模組。
app模組是為了控制整個應用的宣告週期而設計的,它可以監聽很多的事件,做出相應的響應。
BrowserWindow模組可以建立一個窗體,目前我們需要這麼多就行了。
然後聲明瞭一個win變數,實際上我們可以把它看做窗體物件的引用。直到現在還沒賦初始值。
let win;
緊接著我建立了一個窗體的配置JSON,內部指明瞭該窗體的大小(寬高)。
let windowConfig = {
width:800,
height:600
};
然後宣告一個createWindow的函式用於建立窗體,在app模組被觸發ready事件後執行。
內部為win變數進行賦值,它是一個BrowserWindow物件的例項。
win.loadURL用於載入一個html頁面供顯示,這裡填入的是我上面建立的index.html。
當win被賦值為窗體物件後,對它的resize和close事件進行監聽,意思是當窗體寬高大小發生變化後進行”重繪“,而close事件是監聽窗體的關閉,當窗體被關閉時,令win = null,以便觸發V8的GC機制時,回收掉BrowserWindow物件。
win = new BrowserWindow(windowConfig);
win.loadURL(`file://${__dirname}/index.html`);
//開啟除錯工具
win.webContents.openDevTools();
win.on('close',() => {
//回收BrowserWindow物件
win = null;
});
win.on('resize',() => {
win.reload();
})
下面是app的事件監聽
ready事件,當electron完成初始化時觸發,並執行createWindow建立窗體。
window-all-closed ,當所有窗體都被關閉時觸發,此時執行app.quit()用於結束整個應用。
activate ,當應用被啟用時觸發,此事件對於Mac使用者很有用,比如DOCK上點選就相當於觸發了activate事件,此時我們需要手動呼叫createWindow進行窗體建立。
app.on('ready',createWindow);
app.on('window-all-closed',() => {
app.quit();
});
app.on('activate',() => {
if(win == null){
createWindow();
}
})
執行我們的應用
到現在,程式碼基本沒有問題,我們需要讓我們的應用跑起來。
為了方便,我們編輯package.json檔案,新增start欄位:
"start": "electron ."
package.json
{
"name": "zzh",
"version": "0.0.1",
"description": "a simple application",
"main": "main.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "electron ."
},
"author": "zzh",
"license": "ISC"
}
我們可以看到應用已經完美的跑了起來,我們開啟了devTools因此,我們的應用應該是這樣的。
打包自己的應用
現在整個過程進行到最後一步,我們需要打包我們自己的應用,那麼如何打包,這就需要用到我們先前已經安裝的electron-packager
開啟命令列我們可以這樣使用它:
electron-packager . HelloWorld --win --out ../HelloWorldApp --arch=x64 --version=0.0.1
那麼它大概形如這樣
electron-packager <應用目錄> <應用名稱> <打包平臺> --out <輸出目錄> <架構> <應用版本>
於是我們愉快的進行打包。
發現它並不行!
報出一個提示
Unable to determine Electron version. Please specify an Electron version
他說我們需要指明Electron version。這個引數是當前安裝Electron的版本,不知道的可以直接electron就能看到了,我這裡是1.4.13,經過改進後如下
electron-packager . HelloWorld --win --out ../HelloWorldApp --arch=x64 --version=0.0.1 --electron-version=1.4.13
執行完畢後,看到父級目錄下已經產生了我們希望看到的應用資料夾。
至此,一個quick start就已經完畢了。
electron github:https://github.com/electron/ 大家可以進行更進一步的學習!