W3Cschool
恭喜您成為首批注冊用戶
獲得88經驗值獎勵
Electron 可以讓你使用純 JavaScript 調用豐富的原生 APIs 來創(chuàng)造桌面應用。你可以把它看作是專注于桌面應用而不是 web 服務器的,io.js 的一個變體。
這不意味著 Electron 是綁定了 GUI 庫的 JavaScript。相反,Electron 使用 web 頁面作為它的 GUI,所以你能把它看作成一個被 JavaScript 控制的,精簡版的 Chromium 瀏覽器。
在 Electron 里,運行 package.json
里 main
腳本的進程被稱為主進程。在主進程運行的腳本可以以創(chuàng)建 web 頁面的形式展示 GUI。
由于 Electron 使用 Chromium 來展示頁面,所以 Chromium 的多進程結構也被充分利用。每個 Electron 的頁面都在運行著自己的進程,這樣的進程我們稱之為渲染進程。
在一般瀏覽器中,網頁通常會在沙盒環(huán)境下運行,并且不允許訪問原生資源。然而,Electron 用戶擁有在網頁中調用 io.js 的 APIs 的能力,可以與底層操作系統(tǒng)直接交互。
主進程使用 BrowserWindow 實例創(chuàng)建網頁。每個 BrowserWindow 實例都在自己的渲染進程里運行著一個網頁。當一個 BrowserWindow 實例被銷毀后,相應的渲染進程也會被終止。
主進程管理所有頁面和與之對應的渲染進程。每個渲染進程都是相互獨立的,并且只關心他們自己的網頁。
由于在網頁里管理原生 GUI 資源是非常危險而且容易造成資源泄露,所以在網頁面調用 GUI 相關的 APIs 是不被允許的。如果你想在網頁里使用 GUI 操作,其對應的渲染進程必須與主進程進行通訊,請求主進程進行相關的 GUI 操作。
在 Electron,我們提供用于在主進程與渲染進程之間通訊的 ipc 模塊。并且也有一個遠程進程調用風格的通訊模塊 remote。
大體上,一個 Electron 應用的目錄結構如下:
your-app/
├── package.json
├── main.js
└── index.html
package.json
的格式和 Node 的完全一致,并且那個被 main
字段聲明的腳本文件是你的應用的啟動腳本,它運行在主進程上。你應用里的 package.json
看起來應該像:
{
"name" : "your-app",
"version" : "0.1.0",
"main" : "main.js"
}
注意:如果 main
字段沒有在 package.json
聲明,Electron會優(yōu)先加載 index.js
。
main.js
應該用于創(chuàng)建窗口和處理系統(tǒng)事件,一個典型的例子如下:
var app = require('app'); // 控制應用生命周期的模塊。
var BrowserWindow = require('browser-window'); // 創(chuàng)建原生瀏覽器窗口的模塊
// 保持一個對于 window 對象的全局引用,不然,當 JavaScript 被 GC,
// window 會被自動地關閉
var mainWindow = null;
// 當所有窗口被關閉了,退出。
app.on('window-all-closed', function() {
// 在 OS X 上,通常用戶在明確地按下 Cmd + Q 之前
// 應用會保持活動狀態(tài)
if (process.platform != 'darwin') {
app.quit();
}
});
// 當 Electron 完成了初始化并且準備創(chuàng)建瀏覽器窗口的時候
// 這個方法就被調用
app.on('ready', function() {
// 創(chuàng)建瀏覽器窗口。
mainWindow = new BrowserWindow({width: 800, height: 600});
// 加載應用的 index.html
mainWindow.loadURL('file://' + __dirname + '/index.html');
// 打開開發(fā)工具
mainWindow.openDevTools();
// 當 window 被關閉,這個事件會被觸發(fā)
mainWindow.on('closed', function() {
// 取消引用 window 對象,如果你的應用支持多窗口的話,
// 通常會把多個 window 對象存放在一個數組里面,
// 但這次不是。
mainWindow = null;
});
});
最后,你想展示的 index.html
:
<!DOCTYPE html>
<html>
<head>
<title>Hello World!</title>
</head>
<body>
<h1>Hello World!</h1>
We are using io.js <script>document.write(process.version)</script>
and Electron <script>document.write(process.versions['electron'])</script>.
</body>
</html>
一旦你創(chuàng)建了最初的 main.js
, index.html
和 package.json
這幾個文件,你可能會想嘗試在本地運行并測試,看看是不是和期望的那樣正常運行。
如果你已經用 npm
全局安裝了 electron-prebuilt
,你只需要按照如下方式直接運行你的應用:
electron .
如果你是局部安裝,那運行:
./node_modules/.bin/electron .
如果你手工下載了 Electron 的二進制文件,你也可以直接使用其中的二進制文件直接運行你的應用。
$ .\electron\electron.exe your-app\
$ ./electron/electron your-app/
$ ./Electron.app/Contents/MacOS/Electron your-app/
Electron.app
里面是 Electron 發(fā)布包,你可以在這里下載到。
在你完成了你的應用后,你可以按照
應用部署指導發(fā)布一個版本,并且以已經打包好的形式運行應用。
Copyright©2021 w3cschool編程獅|閩ICP備15016281號-3|閩公網安備35020302033924號
違法和不良信息舉報電話:173-0602-2364|舉報郵箱:jubao@eeedong.com
掃描二維碼
下載編程獅App
編程獅公眾號
聯系方式:
更多建議: