安裝electron npm install -g electron

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

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

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

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

渲染進(jìn)程 每一個(gè)頁面都是一個(gè)渲染進(jìn)程

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

//初始化 登錄窗口
let home=null;   //渲染進(jìn)程
function createWindow ( )  {     //arg是接受的參數(shù)
//關(guān)閉渲染進(jìn)程 home
if (home && !home.isDestroyed()) {    //isDestroyed 方法判斷是否銷毀
    home.close();  //清除進(jìn)程
    home = null;
  }
//創(chuàng)建渲染進(jìn)程
if (test == null || test.isDestroyed()){
    test=new BrowserWindow({
      width:600,
      height:300,
      frame: true,   //是否保留邊框（自定義菜單必須保留）
      show: false,   //初始化創(chuàng)建的時(shí)候false 隱藏渲染進(jìn)程
      transparent: false,  //窗口是否透明.
      resizable: false,  //窗口大小是否可調(diào)整。
      maximizable: false, //窗口是否可最大化。
      webPreferences: {
        webviewTag: true,  // 是否啟用 [`<webview>` tag]標(biāo)簽. 默認(rèn)值為 `false`. 為 `< webview>` 配置的
        nodeIntegration: true,   // 開啟node模塊
        enableRemoteModule: true,  // 開啟remote模塊
        webSecurity: false,  // 它將禁用同源策略 (通常用來測試網(wǎng)站), 如果此選項(xiàng)不是由開發(fā)者設(shè)置的，還會(huì)把 allowRunningInsecureContent設(shè)置為 true. 默認(rèn)值為 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", () => { //當(dāng)頁面已經(jīng)渲染完成(但是還沒有顯示) 并且窗口可以被現(xiàn)實(shí)時(shí)觸發(fā)  只觸發(fā)一次
      //初始化窗口默認(rèn)隱藏了記得打開 這里可以配置初始化一些操作
      test.show();   //顯示渲染進(jìn)程
    });
test.webContents.on('did-finish-load', () => {   //如需初始化進(jìn)程通訊，在導(dǎo)航完成時(shí)觸發(fā)
      //下面的這行代碼要在上面的BrowserWindow加載完成之后調(diào)用
      test.webContents.send(事件名,值);
    })
}

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

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

const {  shell } = require('electron')

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

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

進(jìn)程通訊

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

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

禁用右鍵

//在主進(jìn)程中
//win  當(dāng)前主進(jìn)程變量
 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;
  })
}

所有窗口關(guān)閉時(shí) 退出程序

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

點(diǎn)擊底部菜單時(shí)重新啟動(dòng)窗口

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

托盤菜單

//主進(jìn)程文件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圖標(biāo)  也可以用絕對(duì)路徑
 
// 鼠標(biāo)懸停托盤提示
iconTray.setToolTip('Electron應(yīng)用');
 
 
// 配置右鍵菜單
var trayMenu = Menu.buildFromTemplate([
    {
        label: '設(shè)置',
        click: function () {
            console.log('setting')
        }
    },
    {
        label: '升級(jí)',
        click: function () {
            console.log('update')
        }
    },
    {
        label: '退出',
        click: function () {
            if (process.platform !== 'darwin') {
                app.quit();
            }
        }
    }
]);
// 綁定右鍵菜單到托盤
iconTray.setContextMenu(trayMenu);
   
 
 
setTimeout(function(){
    var win = BrowserWindow.getFocusedWindow();
    // 點(diǎn)擊關(guān)閉按鈕讓應(yīng)用保存在托盤
    win.on('close', (e) => {
        if (!win.isFocused()) {
            win = null;
        } else {
            // 阻止窗口的關(guān)閉事件
            e.preventDefault();  
            win.hide();
        }
    });
})
 
 
// 任務(wù)欄圖標(biāo)雙擊托盤打開應(yīng)用
iconTray.on('double-click', function () {
    win.show();
});

webview標(biāo)簽 用來嵌入Web頁面

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

右上菜單

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