Electron remote 模塊、通過 BrowserWindow 打開新窗口

Electron 主進程和渲染進程中的模塊

 

Electron remote 模塊

remote 模塊提供了一種在渲染進程(網頁)和主進程之間進行進程間通訊(IPC)的簡便途

徑。

Electron 中, 與 GUI 相關的模塊(如 dialog, menu 等)只存在於主進程，而不在渲染進程中 。 為了能從渲染進程中使用它們，需要用ipc模塊來給主進程發送進程間消息。使用 remote 模 塊，可以調用主進程對象的方法，而無需顯式地發送進程間消息，這類似於 Java 的 RMI。

 

Electron 渲染進程中通過 remote 模塊調用主進程中的 BrowserWindow 打開新窗口

主進程代碼：

 

const electron = require('electron'); // 控制應用生命周期的模塊 const {app} = electron;
// 創建本地瀏覽器窗口的模塊 const {BrowserWindow} = electron;
// 指向窗口對象的一個全局引用，如果沒有這個引用，那么當該 javascript 對象被垃圾回收 的
// 時候該窗口將會自動關閉
let win;
function createWindow() {
// 創建一個新的瀏覽器窗口
win = new BrowserWindow({width: 1104, height: 620});//570+50
// 並且裝載應用的 index.html 頁面 win.loadURL(`file://${__dirname}/html/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(); }
});
// 在這個文件后面你可以直接包含你應用特定的由主進程運行的代碼。 // 也可以把這些代碼放在另一個文件中然后在這里導入。

 

渲染進程代碼

 

 

var btn=document.querySelector('#btn');

//渲染進程沒法直接調用主進程中的模塊，但是我們可以通過 electron中的remote模塊間接的調用主進程中的模塊

var path=require('path');

var BrowserWindow=require('electron').remote.BrowserWindow;

var win=null;

btn.onclick=function(){

    // alert('點擊了');


    //調用 BrowserWindow打開新窗口
    win=new BrowserWindow({

        width:400,
        height:300,
        // frame:false,
        // fullscreen:true
    })
    win.loadURL(path.join('file:',__dirname,'news.html'));

    win.on('closed',()=>{

        win=null;
    })

}