淺談electron

Electron官網: ?https://www.Electronjs.org/

##

使用 JavaScript，HTML 和 CSS 構建跨平臺的桌面應用程序

Electron相當于一個瀏覽器的外殼，可以把網頁程序嵌入到殼里面，可以運行在桌面上的一個程序，可以把網頁打包成一個在桌面運行的程序，通俗來說就是軟件，比如像QQ、優酷、網易音樂等等。功能的強大超出你的想象，可以構建跨平臺桌面程序，?本身支持node.js，可以使用node.js的一些模塊

##

主進程

在?Electron?中，運行 package.json 主腳本的過程稱為主進程 (main process)。在主進程運行的腳本可以以創建 web 頁面的形式展示?GUI?(圖形用戶界面（Graphical User Interface)。

一個 Electron 應用有且只有一個主進程。并且創建窗口等所有系統事件都要在主進程中進行。

由于 main 進程本質上是一個完整的 node 環境，所以除了以下兩個文件之外，并沒有什么初始的項目結構。

src/main/index.js

這個文件是你應用程序的主文件，electron 也從這里啟動。它也被用作 webpack 產品構建的入口文件。所有的 main 進程工作都應該從這里開始。

app/src/main/index.dev.js

這個文件專門用于開發階段，因為它會安裝 electron-debug 和 vue-devtools。一般不需要修改此文件，但它可以用于擴展你開發的需求。

渲染進程

由于?Electron?使用?Chromium?顯示網頁，那么，Chromium?的多進程架構也被使用。Electron?中的每個網頁都在自己的進程中運行，稱為渲染器進程 (renderer process)。

在正常的瀏覽器中，網頁通常運行在沙盒封裝化的環境中，并且不允許訪問本機資源。然而，Electron 用戶有權在網頁中使用 Node.js 的 API，從而允許較低級別的操作系統交互。

Chromium是由Google主導開發的網頁瀏覽器?Chromium

也就是說每創建一個?web?頁面都會創建一個渲染進程。每個?web?頁面都運行在它自己的渲染進程中。每個渲染進程是獨立的，它只關心它所運行的頁面。

主進程與渲染進程的區別

主進程使用?BrowserWindow?實例創建網頁。每個?BrowserWindow?實例都在自己的渲染進程中運行。當一個?BrowserWindow?實例被銷毀后，相應的渲染進程也會被終止。

主進程管理所有頁面和與之對應的渲染進程。每個渲染進程都是相互獨立的，并且只關心他們自己的網頁。

使用Electron的API

Electron?在主進程和渲染進程中提供了大量 API 去幫助開發桌面應用程序， 在主進程和渲染進程中，可以通過require()?方法將其包含在模塊中，以此獲取?Electron?的?API。

引入 electron：

const electron = require('electron');

所有?Electron?的 API 都被指派給一種進程類型。許多 API?只能被用于主進程或渲染進程中，但其中一些 API 可以同時在上述兩種進程中使用。 每一個 API 的文檔都將聲明我們可以在哪種進程中使用該 API 。

Electron?中的窗口是使用?BrowserWindow?類型創建的一個實例， 它只能在主進程中使用，如下所示：

const { BrowserWindow } = require('electron') const win = new BrowserWindow()

主進程和渲染進程之間通信

Electron?的主進程是在后臺運行，對應?main.js?文件。而渲染進程是前端看到的，對應?index.html?文件。這個兩個進程之間的通信首選?ipc?方式，因為它會在完成時返回，而不會阻止同一進程中的其他操作。

IPC（Inter-Process Communication，進程間通信?IPC

異步通信，在發送消息之后，不會阻止同一進程中程序的繼續運行。下列示例渲染進程發送異步消息 ping 到主進程，然后主進程回答 pong。

示例：

渲染器進程：

const ipc = require('electron').ipcRenderer const asyncMsgBtn = document.getElementById('async-msg') asyncMsgBtn.addEventListener('click', function () { ipc.send('asynchronous-message', 'ping') }) ipc.on('asynchronous-reply', function (event, arg) { const message = `異步消息回復: ${arg}` document.getElementById('async-reply').innerHTML = message })

const ipc = require('electron').ipcMain ipc.on('asynchronous-message', function (event, arg) { event.sender.send('asynchronous-reply', 'pong') })

除了以異步方式在進程之間發送消息，我們還可以使用 ipc 模塊在進程之間發送同步消息，但是此方法的同步特性意味著它在完成任務時會阻止其他操作。

示例：

渲染器進程：

const ipc = require('electron').ipcRenderer const syncMsgBtn = document.getElementById('sync-msg') syncMsgBtn.addEventListener('click', function () { const reply = ipc.sendSync('synchronous-message', 'ping') const message = `同步消息回復: ${reply}` document.getElementById('sync-reply').innerHTML = message })

主進程：

const ipc = require('electron').ipcMain ipc.on('synchronous-message', function (event, arg) { event.returnValue = 'pong' })

讀寫本地文件

使用?electron?的一大好處是?可以訪問用戶的文件系統。這使你可以讀取和寫入本地系統上的文件。為了避免 Chromium 的限制以及對應用程序內部文件的改寫，請確保使用 electron 的 API，特別是?app.getPath(name)?函數。這個幫助函數可以使你獲得指向系統目錄的文件路徑，如用戶的桌面、系統臨時文件 等等

electron - vue

官網地址： https://simulatedgreg.gitbooks.io/electron-vue/content/cn/

API Electron 任務調度

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。