Electron: 使用純 JavaScript 調用原生 API創造桌面應用

時間 2019-11-11

標籤 electron 使用 javascript 調用原生 api 創造桌面應用欄目 JavaScript 简体版

原文原文鏈接

簡介

Electron 可讓你使用純 JavaScript 調用豐富的原生 APIs 來創造桌面應用。你能夠把它看做是專一於桌面應用而不是 web 服務器的，io.js 的一個變體。javascript

這不意味着 Electron 是綁定了 GUI 庫的 JavaScript。相反，Electron 使用 web 頁面做爲它的 GUI，因此你能把它看做成一個被 JavaScript 控制的，精簡版的 Chromium 瀏覽器。html

主進程

在 Electron 裏，運行 package.json 裏 main 腳本的進程被稱爲主進程。在主進程運行的腳本能夠以建立 web 頁面的形式展現 GUI。java

渲染進程

因爲 Electron 使用 Chromium 來展現頁面，因此 Chromium 的多進程結構也被充分利用。每一個 Electron 的頁面都在運行着本身的進程，這樣的進程咱們稱之爲渲染進程。node

在通常瀏覽器中，網頁一般會在沙盒環境下運行，而且不容許訪問原生資源。然而，Electron 用戶擁有在網頁中調用 io.js 的 APIs 的能力，能夠與底層操做系統直接交互。linux

主進程與渲染進程的區別

主進程使用 BrowserWindow 實例建立網頁。每一個 BrowserWindow 實例都在本身的渲染進程裏運行着一個網頁。當一個 BrowserWindow 實例被銷燬後，相應的渲染進程也會被終止。git

主進程管理全部頁面和與之對應的渲染進程。每一個渲染進程都是相互獨立的，而且只關心他們本身的網頁。github

因爲在網頁裏管理原生 GUI 資源是很是危險並且容易形成資源泄露，因此在網頁面調用 GUI 相關的 APIs 是不被容許的。若是你想在網頁裏使用 GUI 操做，其對應的渲染進程必須與主進程進行通信，請求主進程進行相關的 GUI 操做。web

在 Electron，咱們提供用於在主進程與渲染進程之間通信的 ipc 模塊。而且也有一個遠程進程調用風格的通信模塊 remote。npm

打造你第一個 Electron 應用

大致上，一個 Electron 應用的目錄結構以下：json

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會優先加載 index.js。

main.js 應該用於建立窗口和處理系統時間，一個典型的例子以下：

var app = require('app'); // 控制應用生命週期的模塊。 var BrowserWindow = require('browser-window'); // 建立原生瀏覽器窗口的模塊 // 保持一個對於 window 對象的全局引用，否則，當 JavaScript 被 GC， // window 會被自動地關閉 var mainWindow = null; // 當全部窗口被關閉了，退出。 app.on('window-all-closed', function() { // 在 OS X 上，一般用戶在明確地按下 Cmd + Q 以前 // 應用會保持活動狀態 if (process.platform != 'darwin') { app.quit(); } }); // 當 Electron 完成了初始化而且準備建立瀏覽器窗口的時候 // 這個方法就被調用 app.on('ready', function() { // 建立瀏覽器窗口。 mainWindow = new BrowserWindow({width: 800, height: 600}); // 加載應用的 index.html mainWindow.loadURL('file://' + __dirname + '/index.html'); // 打開開發工具 mainWindow.openDevTools(); // 當 window 被關閉，這個事件會被髮出 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>

運行你的應用

一旦你建立了最初的 main.js， index.html 和 package.json 這幾個文件，你可能會想嘗試在本地運行並測試，看看是否是和指望的那樣正常運行。

electron-prebuild

若是你已經用 npm 全局安裝了 electron-prebuilt，你只須要按照以下方式直接運行你的應用：

electron .

若是你是局部安裝，那運行：

./node_modules/.bin/electron .

手工下載 Electron 二進制文件

若是你手工下載了 Electron 的二進制文件，你也能夠直接使用其中的二進制文件直接運行你的應用。

Windows

$ .\electron\electron.exe your-app\

Linux

$ ./electron/electron your-app/

OS X

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

Electron.app 裏面是 Electron 發佈包，你能夠在這裏下載到。

--------------------------------轉至w3cschool

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。