這里先插個題外話,什么是進程,為什么要分主進程子進程?首先進程是資源分配的單位,是運行的程序,一個進程自然只能代表一個程序,多道程序自然而然就產生了多進程的概念。進程中通過CreateProcess()函數去創建一個子進程,子進程在全部處理過程中只對父進程地址空間中的相關數據進行訪問,從而可以保護父進程地址空間中與當前子進程執行任務無關的全部數據。對於這種情況,子進程所體現出來的作用同函數和線程比較相似,可以看成是父進程在運行期間的一個過程為此,需要由父進程來掌握子進程的啟動、執行和退出。創建子進程才能多道程序並發執行。同一個進程之間的資源是共享的,子進程可以使用主進程共享的數據。
在electron中分主進程(ipcMain)與渲染進程(ipcRenderer),渲染進程主要負責渲染頁面,
1、從主進程到渲染進程的異步通信。
// 在主進程中 const {ipcMain} = require('electron') ipcMain.on('asynchronous-message', (event, arg) => { //主進程接收渲染進程的請求事件 console.log(arg) // prints "ping" //獲取參數 ..... //處理事件的過程 event.sender.send('asynchronous-reply', 'pong') //將事件處理結果在以另一個響應返給渲染進程 }) //在渲染器進程 (網頁) 中 const {ipcRenderer} = require('electron') ipcRenderer.on('asynchronous-reply', (event, arg) => { //渲染進程接收主進程響應回來的處理結果 console.log(arg) // prints "pong" }) ipcRenderer.send('asynchronous-message', 'ping')//向主進程請求事件,攜帶參數
該種通訊必須渲染進程先請求主進程,否則主進程無法主動響應渲染竟成數據;
2、頁面嵌入webview,頁面與webview里面的頁面之間的通信
使用 webview
標簽在Electron 應用中嵌入 "外來" 內容 (如 網頁)。外來"內容包含在 webview
容器中顯示,src所傳入的地址可以是本程序內的也可以本程序的外的。
與 iframe
不同, webview
在與應用程序不同的進程中運行。它與您的網頁沒有相同的權限, 應用程序和嵌入內容之間的所有交互都將是異步的。
這將保證你的應用對於嵌入的內容的安全性。
<webview id="foo" src="https://www.github.com/" nodeintegration style="display:inline-flex; width:640px; height:480px"></webview>
當有nodeintegration此屬性時, webview
中的訪客頁(guest page)將具有Node集成, 並且可以使用像 require
和 process
這樣的node APIs 去訪問低層系統資源const webview = document.querySelector('webview')
webview.addEventListener('dom-ready', () => { webview.openDevTools()//webview加載完成,可以處理一些事件了 webview.send('ping') //向webview嵌套的頁面響應事件 }) webview.addEventListener('ipc-message', (event) => { console.log(event.channel) // Prints "pong" 在此監聽事件中接收webview嵌套頁面所響應的事件 }) //嵌套頁面 const {ipcRenderer} = require('electron') ipcRenderer.on('ping', (e) => { //接收響應 console.log(e) }) ipcRenderer.sendToHost('pong')//向webview所在頁面的進程傳達消息
這樣兩者之間就可以在本項目中之間相互嵌套資源了,webview也可以釋放所嵌套頁面占用的資源。