Electron指南 - 快速入門

SQC 發布于2019-08-19 18:25 / 2165人閱讀

摘要：快速入門提供了豐富的本地操作系統的，使你能夠使用純來創建桌面應用程序。這并不意味著是一個綁定圖形用戶界面的庫。每個頁面在里是運行在自己的進程里，這些進程被稱為渲染進程。有些只能在該事件發生后才能被使用。

快速入門

Electron提供了豐富的本地（操作系統）的API，使你能夠使用純JavaScript來創建桌面應用程序。與其它各種的Node.js運行時不同的是Electron專注于桌面應用程序而不是Web服務器。

這并不意味著Electron是一個綁定圖形用戶界面（GUI）的JavaScript庫。取而代之的是，Electron使用Web頁面作為它的圖形界面，所以你也可以將它看作是一個由JavaScript控制的迷你的Chrominum瀏覽器。

主進程

在Electron里，運行package.json里的main腳本的進程被稱為 主進程 ，運行在主進程里的腳本能夠通過創建Web頁面來顯示GUI。

渲染進程

因為Electron使用Chrominum來顯示Web頁面，所以Chrominum的多進程架構也同樣被使用。每個頁面在Electron里是運行在自己的進程里，這些進程被稱為 渲染進程 。
在瀏覽器里，Web頁面通常運行在一個沙盒環境里，它不能訪問本地的資源。但在Electron里，在Web頁面中通過使用Node.js API可以進行底層的操作系統交互。

主進程與渲染進程的不同

主進程通過構造 BrowserWindow 實例來創建Web頁面。每個 BrowserWindow 實例在自己的渲染進程里運行Web頁面。當一個 BrowserWindow 被銷毀后，相應的渲染進程也同樣被終止。

主進程管理所有的Web頁面以及相關的渲染進程。每個渲染進程都是互相隔離的，并且只知道運行在該進程里的Web頁面。

在Web頁面里，調用本地GUI是不允許的，因為在Web頁面里管理本地GUI資源是非常危險的而且非常容易導致資源泄露。如果你想在Web頁面進行GUI操作，該Web頁面的渲染進程必須通過和主進程通信來請求主進程處理這些操作。

在Electron里，主進程和渲染進程有很多通信的方法。比如 ipcRanderer 和 ipcMain 模塊是用來發送消息的，remote 模塊支持RPC風格的通信。可以參考FAQ里的如何在不同的Web頁面里共享數據

編寫第一個Electron應用

通常，一個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"
}

注意如果在package.json 中的 main 字段沒有指定，那么Electron將嘗試裝載一個名為 index.js 的腳本。

main.js 應當創建窗口并且處理系統事件，一個典型的例子如下：

const electron = require("electron");
// 控制應用生命周期的模塊
const {app} = electron;
// 創建本地瀏覽器窗口的模塊
const {BrowserWindow} = electron;

// 指向窗口對象的一個全局引用，如果沒有這個引用，那么當該javascript對象被垃圾回收的
// 時候該窗口將會自動關閉
let win;

function createWindow() {
  // 創建一個新的瀏覽器窗口
  win = new BrowserWindow({width: 800, height: 600});

  // 并且裝載應用的index.html頁面
  win.loadURL(`file://${__dirname}/index.html`);

  // 打開開發工具頁面
  win.webContents.openDevTools();

  // 當窗口關閉時調用的方法
  win.on("closed", () => {
    // 解除窗口對象的引用，通常而言如果應用支持多個窗口的話，你會在一個數組里
    // 存放窗口對象，在窗口關閉的時候應當刪除相應的元素。
    win = null;
  });
}

// 當Electron完成初始化并且已經創建了瀏覽器窗口，則該方法將會被調用。
// 有些API只能在該事件發生后才能被使用。
app.on("ready", createWindow);

// 當所有的窗口被關閉后退出應用
app.on("window-all-closed", () => {
  // 對于OS X系統，應用和相應的菜單欄會一直激活直到用戶通過Cmd + Q顯式退出
  if (process.platform !== "darwin") {
    app.quit();
  }
});

app.on("activate", () => {
  // 對于OS X系統，當dock圖標被點擊后會重新創建一個app窗口，并且不會有其他
  // 窗口打開
  if (win === null) {
    createWindow();
  }
});

// 在這個文件后面你可以直接包含你應用特定的由主進程運行的代碼。
// 也可以把這些代碼放在另一個文件中然后在這里導入。

最后 index.html 則是你想要展示在窗口中：



  
    
    Hello World!
  
  
    Hello World!
    We are using node ,
    Chrome ,
    and Electron .

運行你的應用

一旦你建立了你的 main.js, index.html, 以及 package.json 文件，你也許會想要嘗試在本地運行應用來測試它，確保應用是按照你預期的方式工作。

electron-prebuilt

electron-prebuilt 是一個 npm 的模塊，它包含了一個預編譯的Electron版本。

如果你已經通過 npm 將該模塊全局安裝了，那么你只需要在你應用的源代碼目錄西下運行下面的命令：

electron .

如果你只是在本地安裝了該模塊，那么運行：

./node_modules/.bin/electron .

手動下載Electron二進制包

如果手動下載了Electron二進制包，你可以通過執行其中包含的二進制文件來直接執行你的應用。

Windows

$ .electronelectron.exe your-app

Linux

$ ./electron/electron your-app/

OS X

$ ./Electron.app/Contents/MacOS/Electron your-app/

這里的 Electron.app 是Electron發布包的一部分，你可以在這里下載。

運行發布

在完成應用開發之后，你可以按照應用發布指導創建一個發布，然后執行打包的應用。

嘗試例子

通過使用 atom/electron-quick-start 來克隆并且運行教程的代碼。

注意運行該例子需要在你的系統中安裝Git以及Node.js（它也包含了npm)。

# 克隆倉庫
$ git clone https://github.com/electron/electron-quick-start
# 進入克隆的倉庫
$ cd electron-quick-start
# 安裝依賴然后運行應用
$ npm install && npm start

翻譯自這里

云服務器 GPU云服務器 python入門指南前端快速入門云計算快速入門 css快速入門

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/79592.html

Electron 快速入門

摘要：當一個實例被銷毀后，相應的渲染進程也會被終止。之所以命名為，主要是為了與主進程這個概念對應。部分在事件觸發后才能使用。當全部窗口關閉時退出。主進程接收到消息并處理之后，會返回處理結果。簡介 Electron 是一個可以使用 Web 技術如 JavaScript、HTML 和 CSS 來創建跨平臺原生桌面應用的框架。借助 Electron，我們可以使用純 JavaScript 來調用豐...

Drummor 2019-08-20 17:49 評論0 收藏0
系統架構

強力推薦！那些你不能錯過的 GitHub 插件和工具以代碼托管平臺起家的 GitHub 網站，已然成為全球程序員工作和生活中不可或缺的一份子。從優秀的企業，到優秀的程序員，都將自己最優秀的代碼作品存放在這片開源凈土里，供彼此學習交流。 GitHub Trending 欄目甚至已經成為 IT 從業人員的新聞日報，每日必讀。在之前的一… PostgreSQL 數據庫的前世今生編輯：IT大咖說閱讀字...

Gilbertat 2019-06-24 17:55 評論0 收藏0
系統架構

強力推薦！那些你不能錯過的 GitHub 插件和工具以代碼托管平臺起家的 GitHub 網站，已然成為全球程序員工作和生活中不可或缺的一份子。從優秀的企業，到優秀的程序員，都將自己最優秀的代碼作品存放在這片開源凈土里，供彼此學習交流。 GitHub Trending 欄目甚至已經成為 IT 從業人員的新聞日報，每日必讀。在之前的一… PostgreSQL 數據庫的前世今生編輯：IT大咖說閱讀字...

k00baa 2019-08-22 11:21 評論0 收藏0
【Electron】酷家樂客戶端開發實踐分享 — 入坑篇

摘要：系列文章酷家樂客戶端開發實踐分享入坑篇酷家樂客戶端開發實踐分享軟件自動更新酷家樂客戶端開發實踐分享瀏覽器啟動客戶端酷家樂客戶端開發實踐分享進程通信酷家樂客戶端開發實踐分享下載管理器不定期更新本文的初衷所使用的技術棧和前端工程師完美契合。作者：鐘離，酷家樂PC客戶端負責人原文地址：https://webfe.kujiale.com/electron-ku-jia-le-ke-hu-d...

jay_tian 2019-08-02 15:16 評論0 收藏0
【Electron】酷家樂客戶端開發實踐分享 — 入坑篇

摘要：系列文章酷家樂客戶端開發實踐分享入坑篇酷家樂客戶端開發實踐分享軟件自動更新酷家樂客戶端開發實踐分享瀏覽器啟動客戶端酷家樂客戶端開發實踐分享進程通信酷家樂客戶端開發實踐分享下載管理器不定期更新本文的初衷所使用的技術棧和前端工程師完美契合。作者：鐘離，酷家樂PC客戶端負責人原文地址：https://webfe.kujiale.com/electron-ku-jia-le-ke-hu-d...

TwIStOy 2019-08-23 18:05 評論0 收藏0