安裝electron npm install -g electron

electron官方文檔 https://www.electronjs.org/zh/docs/latest/tutorial/quick-start
運行指令 npm start
打開調(diào)試工具 loginWindow.webContents.openDevTools({mode:'detach'})調(diào)試框分離;默認是mainWindow.webContents.openDevTools()

主進程 main.js 是入口文件控制了主進程， 運行在Node.js環(huán)境中，執(zhí)行特殊操作并管理渲染器進程，這就表示渲染進程之間的切換或是關閉都必須由主進程來完成。

app 它控制應用程序的事件生命周期。
BrowserWindow 它創(chuàng)建和管理應用程序 窗口。
ipcMain 當在主進程中使用時，它處理從[渲染器]進程（網(wǎng)頁）發(fā)送出來的異步和同步信息,當然也有可能從主進程向渲染進程發(fā)送消息。

app.isPackaged 如果應用已經(jīng)打包，返回true ，否則返回false 。
app.disableHardwareAcceleration();//禁用硬件加速

渲染進程 每一個頁面都是一個渲染進程

ipcRenderer 使用它提供的一些方法從渲染進程 (web 頁面) 發(fā)送同步或異步的消息到主
進程,也可以接收主進程回復的消息。

//初始化 登錄窗口
let home=null;   //渲染進程
function createWindow ( )  {     //arg是接受的參數(shù)
//關閉渲染進程 home
if (home && !home.isDestroyed()) {    //isDestroyed 方法判斷是否銷毀
    home.close();  //清除進程
    home = null;
  }
//創(chuàng)建渲染進程
if (test == null || test.isDestroyed()){
    test=new BrowserWindow({
      width:600,
      height:300,
      frame: true,   //是否保留邊框（自定義菜單必須保留）
      show: false,   //初始化創(chuàng)建的時候false 隱藏渲染進程
      transparent: false,  //窗口是否透明.
      resizable: false,  //窗口大小是否可調(diào)整。
      maximizable: false, //窗口是否可最大化。
      webPreferences: {
        webviewTag: true,  // 是否啟用 [`<webview>` tag]標簽. 默認值為 `false`. 為 `< webview>` 配置的
        nodeIntegration: true,   // 開啟node模塊
        enableRemoteModule: true,  // 開啟remote模塊
        webSecurity: false,  // 它將禁用同源策略 (通常用來測試網(wǎng)站), 如果此選項不是由開發(fā)者設置的，還會把 allowRunningInsecureContent設置為 true. 默認值為 true。
        contextIsolation: false    //禁用上下文隔離
      },
    })
    test.loadURL(`file://${__dirname}/index.html`)    // 加載 index.html(推薦用http協(xié)議加載)
    //test.loadFile("index.html") //加載index.html   加載本地文件

// loginWindow.webContents.openDevTools({mode:'detach'});    //調(diào)式工具
    test.once("ready-to-show", () => { //當頁面已經(jīng)渲染完成(但是還沒有顯示) 并且窗口可以被現(xiàn)實時觸發(fā)  只觸發(fā)一次
      //初始化窗口默認隱藏了記得打開 這里可以配置初始化一些操作
      test.show();   //顯示渲染進程
    });
test.webContents.on('did-finish-load', () => {   //如需初始化進程通訊，在導航完成時觸發(fā)
      //下面的這行代碼要在上面的BrowserWindow加載完成之后調(diào)用
      test.webContents.send(事件名,值);
    })
}

app.whenReady().then(() => {    //初始化完成
createWindow();
}

shell 模塊提供了集成其他桌面客戶端的關聯(lián)功能.主進程和渲染進程都可以使用
openExternal:以桌面的默認方式打開給定的文件。

const {  shell } = require('electron')

 // 點擊打開瀏覽器
shell.openExternal('https://www.csdn.net/');

//打開word文件  注意：路徑分隔符要用/，不要使用\
 shell.openExternal('C:/Users/onion/Desktop/a.doc')

進程通訊

//進程通訊  例一
// 渲染進程中
const ipcRenderer = require('electron').ipcRenderer;  //引入模塊
//向主進程發(fā)起事件
ipcRenderer.send(事件名, 值);     //值（沒有可以省略）
//渲染進程監(jiān)聽推薦寫在mounted里  如果在methods里會觸發(fā)多次
ipcRenderer.on(事件名, (event, arg) => {})

//主進程中通過ipcMain.on() 注冊渲染進程發(fā)過來的事件
const ipcMain = require('electron')
ipcMain.on(事件名, (event, arg) => {    //arg 接受參數(shù)
 //主進程向渲染進程發(fā)送消息
  event.sender.send(事件名, 值);  //異步
  // event.reply(事件名, 值);  //同步 請注意, 此方法的同步特性意味著它在完成任務時會阻止其他操作
})

禁用右鍵

//在主進程中
//win  當前主進程變量
 win.once("ready-to-show", () => {
    preventDragbarContext(win);
  });

// 禁用右鍵
function preventDragbarContext(win) {
  var WM_INITMENU = 0x116;//278
  win.hookWindowMessage(WM_INITMENU, function (e) {
      win.setEnabled(false);
      setTimeout(() => {
          win.setEnabled(true);
      }, 100);
      return true;
  })
}

所有窗口關閉時 退出程序

//當所有的窗口都被關閉時觸發(fā)
//app.exit()   此方法直接強制關閉
app.on("window-all-closed", function () {
  if (process.platform !== "darwin") app.quit();
});

點擊底部菜單時重新啟動窗口

//點擊底部菜單時重新啟動窗口
 app.on("activate", function () {
    if (BrowserWindow.getAllWindows().length === 0) createWindow();
  });

托盤菜單

//主進程文件main.js中引入的ipcMain.js文件代碼：
var { Menu, Tray, BrowserWindow, app } = require('electron');
var path = require('path');
 
// 創(chuàng)建拖盤
//支持png、jpg      win10支持.ico      mac支持.icns
var iconTray = new Tray(path.join(__dirname,'app.ico'));  //logo圖標  也可以用絕對路徑
 
// 鼠標懸停托盤提示
iconTray.setToolTip('Electron應用');
 
 
// 配置右鍵菜單
var trayMenu = Menu.buildFromTemplate([
    {
        label: '設置',
        click: function () {
            console.log('setting')
        }
    },
    {
        label: '升級',
        click: function () {
            console.log('update')
        }
    },
    {
        label: '退出',
        click: function () {
            if (process.platform !== 'darwin') {
                app.quit();
            }
        }
    }
]);
// 綁定右鍵菜單到托盤
iconTray.setContextMenu(trayMenu);
   
 
 
setTimeout(function(){
    var win = BrowserWindow.getFocusedWindow();
    // 點擊關閉按鈕讓應用保存在托盤
    win.on('close', (e) => {
        if (!win.isFocused()) {
            win = null;
        } else {
            // 阻止窗口的關閉事件
            e.preventDefault();  
            win.hide();
        }
    });
})
 
 
// 任務欄圖標雙擊托盤打開應用
iconTray.on('double-click', function () {
    win.show();
});

webview標簽 用來嵌入Web頁面

//
<webview src="https://www.github.com/"></webview>

右上菜單

//在渲染進程中
const { ipcRenderer, remote } = window.require("electron");
 // 最小化窗口
    toMin () {
      remote.getCurrentWindow().minimize();
    },
    // 最大化和正常切換
    toMax () {
      const browserWindow = remote.getCurrentWindow();
      if (this.isMaxed) {  //默認false
        browserWindow.unmaximize();
      } else {
        browserWindow.maximize();
      }
      this.isMaxed = !this.isMaxed;
    },
    // 關閉窗口  由主進程來完成
    toCloseReady () {
      ipcRenderer.send("closeStuHomeWin", "");
    }