資訊專欄INFORMATION COLUMN
摘要：快速入門提供了豐富的本地操作系統(tǒng)的，使你能夠使用純來創(chuàng)建桌面應(yīng)用程序。這并不意味著是一個(gè)綁定圖形用戶界面的庫。每個(gè)頁面在里是運(yùn)行在自己的進(jìn)程里，這些進(jìn)程被稱為渲染進(jìn)程。有些只能在該事件發(fā)生后才能被使用。
快速入門
Electron提供了豐富的本地（操作系統(tǒng)）的API，使你能夠使用純JavaScript來創(chuàng)建桌面應(yīng)用程序。與其它各種的Node.js運(yùn)行時(shí)不同的是Electron專注于桌面應(yīng)用程序而不是Web服務(wù)器。
這并不意味著Electron是一個(gè)綁定圖形用戶界面（GUI）的JavaScript庫。取而代之的是，Electron使用Web頁面作為它的圖形界面，所以你也可以將它看作是一個(gè)由JavaScript控制的迷你的Chrominum瀏覽器。
主進(jìn)程在Electron里，運(yùn)行package.json里的main腳本的進(jìn)程被稱為 主進(jìn)程 ，運(yùn)行在主進(jìn)程里的腳本能夠通過創(chuàng)建Web頁面來顯示GUI。
渲染進(jìn)程因?yàn)镋lectron使用Chrominum來顯示W(wǎng)eb頁面，所以Chrominum的多進(jìn)程架構(gòu)也同樣被使用。每個(gè)頁面在Electron里是運(yùn)行在自己的進(jìn)程里，這些進(jìn)程被稱為 渲染進(jìn)程 。
在瀏覽器里，Web頁面通常運(yùn)行在一個(gè)沙盒環(huán)境里，它不能訪問本地的資源。但在Electron里，在Web頁面中通過使用Node.js API可以進(jìn)行底層的操作系統(tǒng)交互。
主進(jìn)程通過構(gòu)造 BrowserWindow 實(shí)例來創(chuàng)建Web頁面。每個(gè) BrowserWindow 實(shí)例在自己的渲染進(jìn)程里運(yùn)行Web頁面。當(dāng)一個(gè) BrowserWindow 被銷毀后，相應(yīng)的渲染進(jìn)程也同樣被終止。
主進(jìn)程管理所有的Web頁面以及相關(guān)的渲染進(jìn)程。每個(gè)渲染進(jìn)程都是互相隔離的，并且只知道運(yùn)行在該進(jìn)程里的Web頁面。
在Web頁面里，調(diào)用本地GUI是不允許的，因?yàn)樵赪eb頁面里管理本地GUI資源是非常危險(xiǎn)的而且非常容易導(dǎo)致資源泄露。如果你想在Web頁面進(jìn)行GUI操作，該Web頁面的渲染進(jìn)程必須通過和主進(jìn)程通信來請求主進(jìn)程處理這些操作。
在Electron里，主進(jìn)程和渲染進(jìn)程有很多通信的方法。比如 ipcRanderer 和 ipcMain 模塊是用來發(fā)送消息的，remote 模塊支持RPC風(fēng)格的通信。可以參考FAQ里的如何在不同的Web頁面里共享數(shù)據(jù)
編寫第一個(gè)Electron應(yīng)用通常，一個(gè)Electron應(yīng)用的結(jié)構(gòu)類似下面：
your-app/ ├── package.json ├── main.js └── index.html
package.json 的格式與Node的模塊格式是一致的，其中 main 字段指定的腳本就是你應(yīng)用的啟動腳本，該腳本將運(yùn)行在主進(jìn)程中。你的 package.json 也許看上去像下面這個(gè)例子：
{
"name" : "your-app",
"version" : "0.1.0",
"main" : "main.js"
}
注意 如果在package.json 中的 main 字段沒有指定，那么Electron將嘗試裝載一個(gè)名為 index.js 的腳本。
main.js 應(yīng)當(dāng)創(chuàng)建窗口并且處理系統(tǒng)事件，一個(gè)典型的例子如下：
const electron = require("electron");
// 控制應(yīng)用生命周期的模塊
const {app} = electron;
// 創(chuàng)建本地瀏覽器窗口的模塊
const {BrowserWindow} = electron;
// 指向窗口對象的一個(gè)全局引用，如果沒有這個(gè)引用，那么當(dāng)該javascript對象被垃圾回收的
// 時(shí)候該窗口將會自動關(guān)閉
let win;
function createWindow() {
// 創(chuàng)建一個(gè)新的瀏覽器窗口
win = new BrowserWindow({width: 800, height: 600});
// 并且裝載應(yīng)用的index.html頁面
win.loadURL(`file://${__dirname}/index.html`);
// 打開開發(fā)工具頁面
win.webContents.openDevTools();
// 當(dāng)窗口關(guān)閉時(shí)調(diào)用的方法
win.on("closed", () => {
// 解除窗口對象的引用，通常而言如果應(yīng)用支持多個(gè)窗口的話，你會在一個(gè)數(shù)組里
// 存放窗口對象，在窗口關(guān)閉的時(shí)候應(yīng)當(dāng)刪除相應(yīng)的元素。
win = null;
});
}
// 當(dāng)Electron完成初始化并且已經(jīng)創(chuàng)建了瀏覽器窗口，則該方法將會被調(diào)用。
// 有些API只能在該事件發(fā)生后才能被使用。
app.on("ready", createWindow);
// 當(dāng)所有的窗口被關(guān)閉后退出應(yīng)用
app.on("window-all-closed", () => {
// 對于OS X系統(tǒng)，應(yīng)用和相應(yīng)的菜單欄會一直激活直到用戶通過Cmd + Q顯式退出
if (process.platform !== "darwin") {
app.quit();
}
});
app.on("activate", () => {
// 對于OS X系統(tǒng)，當(dāng)dock圖標(biāo)被點(diǎn)擊后會重新創(chuàng)建一個(gè)app窗口，并且不會有其他
// 窗口打開
if (win === null) {
createWindow();
}
});
// 在這個(gè)文件后面你可以直接包含你應(yīng)用特定的由主進(jìn)程運(yùn)行的代碼。
// 也可以把這些代碼放在另一個(gè)文件中然后在這里導(dǎo)入。
最后 index.html 則是你想要展示在窗口中：
Hello World!
Hello World!
We are using node ,
Chrome ,
and Electron .
運(yùn)行你的應(yīng)用
一旦你建立了你的 main.js, index.html, 以及 package.json 文件，你也許會想要嘗試在本地運(yùn)行應(yīng)用來測試它，確保應(yīng)用是按照你預(yù)期的方式工作。
electron-prebuiltelectron-prebuilt 是一個(gè) npm 的模塊，它包含了一個(gè)預(yù)編譯的Electron版本。
如果你已經(jīng)通過 npm 將該模塊全局安裝了，那么你只需要在你應(yīng)用的源代碼目錄西下運(yùn)行下面的命令：
electron .
如果你只是在本地安裝了該模塊，那么運(yùn)行：
./node_modules/.bin/electron .手動下載Electron二進(jìn)制包
如果手動下載了Electron二進(jìn)制包，你可以通過執(zhí)行其中包含的二進(jìn)制文件來直接執(zhí)行你的應(yīng)用。
Windows$ .electronelectron.exe your-app
Linux
$ ./electron/electron your-app/
OS X
$ ./Electron.app/Contents/MacOS/Electron your-app/
這里的 Electron.app 是Electron發(fā)布包的一部分，你可以在這里下載。
運(yùn)行發(fā)布在完成應(yīng)用開發(fā)之后，你可以按照應(yīng)用發(fā)布指導(dǎo)創(chuàng)建一個(gè)發(fā)布，然后執(zhí)行打包的應(yīng)用。
嘗試?yán)?/b>通過使用 atom/electron-quick-start 來克隆并且運(yùn)行教程的代碼。
注意 運(yùn)行該例子需要在你的系統(tǒng)中安裝Git以及Node.js（它也包含了npm)。
# 克隆倉庫 $ git clone https://github.com/electron/electron-quick-start # 進(jìn)入克隆的倉庫 $ cd electron-quick-start # 安裝依賴然后運(yùn)行應(yīng)用 $ npm install && npm start
翻譯自這里
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/79592.html
摘要：當(dāng)一個(gè)實(shí)例被銷毀后，相應(yīng)的渲染進(jìn)程也會被終止。之所以命名為，主要是為了與主進(jìn)程這個(gè)概念對應(yīng)。部分在事件觸發(fā)后才能使用。當(dāng)全部窗口關(guān)閉時(shí)退出。主進(jìn)程接收到消息并處理之后，會返回處理結(jié)果。 簡介 Electron 是一個(gè)可以使用 Web 技術(shù)如 JavaScript、HTML 和 CSS 來創(chuàng)建跨平臺原生桌面應(yīng)用的框架。借助 Electron，我們可以使用純 JavaScript 來調(diào)用豐...
強(qiáng)力推薦！那些你不能錯(cuò)過的 GitHub 插件和工具 以代碼托管平臺起家的 GitHub 網(wǎng)站，已然成為全球程序員工作和生活中不可或缺的一份子。從優(yōu)秀的企業(yè)，到優(yōu)秀的程序員，都將自己最優(yōu)秀的代碼作品存放在這片開源凈土里，供彼此學(xué)習(xí)交流。 GitHub Trending 欄目甚至已經(jīng)成為 IT 從業(yè)人員的新聞日報(bào)，每日必讀。在之前的一… PostgreSQL 數(shù)據(jù)庫的前世今生 編輯：IT大咖說閱讀字...
強(qiáng)力推薦！那些你不能錯(cuò)過的 GitHub 插件和工具 以代碼托管平臺起家的 GitHub 網(wǎng)站，已然成為全球程序員工作和生活中不可或缺的一份子。從優(yōu)秀的企業(yè)，到優(yōu)秀的程序員，都將自己最優(yōu)秀的代碼作品存放在這片開源凈土里，供彼此學(xué)習(xí)交流。 GitHub Trending 欄目甚至已經(jīng)成為 IT 從業(yè)人員的新聞日報(bào)，每日必讀。在之前的一… PostgreSQL 數(shù)據(jù)庫的前世今生 編輯：IT大咖說閱讀字...
摘要：系列文章酷家樂客戶端開發(fā)實(shí)踐分享入坑篇酷家樂客戶端開發(fā)實(shí)踐分享軟件自動更新酷家樂客戶端開發(fā)實(shí)踐分享瀏覽器啟動客戶端酷家樂客戶端開發(fā)實(shí)踐分享進(jìn)程通信酷家樂客戶端開發(fā)實(shí)踐分享下載管理器不定期更新本文的初衷所使用的技術(shù)棧和前端工程師完美契合。 作者：鐘離，酷家樂PC客戶端負(fù)責(zé)人原文地址：https://webfe.kujiale.com/electron-ku-jia-le-ke-hu-d...
摘要：系列文章酷家樂客戶端開發(fā)實(shí)踐分享入坑篇酷家樂客戶端開發(fā)實(shí)踐分享軟件自動更新酷家樂客戶端開發(fā)實(shí)踐分享瀏覽器啟動客戶端酷家樂客戶端開發(fā)實(shí)踐分享進(jìn)程通信酷家樂客戶端開發(fā)實(shí)踐分享下載管理器不定期更新本文的初衷所使用的技術(shù)棧和前端工程師完美契合。 作者：鐘離，酷家樂PC客戶端負(fù)責(zé)人原文地址：https://webfe.kujiale.com/electron-ku-jia-le-ke-hu-d...
閱讀 2066·2021-11-23 09:51
閱讀 2212·2021-09-29 09:34
閱讀 3702·2021-09-22 15:50
閱讀 3562·2021-09-22 15:23
閱讀 2580·2019-08-30 15:55
閱讀 706·2019-08-30 15:53
閱讀 3076·2019-08-29 17:09
閱讀 2631·2019-08-29 13:57
