在上一篇文章中我們搭建了一個(gè)electron和vue集成的項(xiàng)目，本文主要是對(duì)electron的background.js也就是主進(jìn)程做下介紹，同時(shí)也介紹下渲染進(jìn)程。

electron 主要分為主進(jìn)程（background.js）、渲染進(jìn)程（也就是vue開發(fā)的頁(yè)面）和GPU進(jìn)程等，但是我們主要使用的就是主進(jìn)程和渲染進(jìn)程，其他進(jìn)程暫時(shí)不做深入研究。

主進(jìn)程：

• 一個(gè)應(yīng)用中有且只有一個(gè)主進(jìn)程
• 創(chuàng)建窗口等所有系統(tǒng)事件都要在主進(jìn)程中進(jìn)行

渲染進(jìn)程：

• 每創(chuàng)建一個(gè)web頁(yè)面都會(huì)創(chuàng)建一個(gè)渲染進(jìn)程
• 每個(gè)web頁(yè)面運(yùn)行在它自己的渲染進(jìn)程中
• 每個(gè)渲染進(jìn)程是獨(dú)立的, 它只關(guān)心它所運(yùn)行的頁(yè)面

主進(jìn)程的主要主要作用：

1. 創(chuàng)建渲染進(jìn)程
2. 管理應(yīng)用程序的生命周期
3. 與系統(tǒng)底層交互

在此處主要講解可以在主進(jìn)程中設(shè)置進(jìn)行哪些最常用的配置配置。

1.設(shè)置渲染進(jìn)程的大小、外觀

win = new BrowserWindow({
    width: 1200, // 設(shè)置窗口的寬
    height: 620, // 設(shè)置窗口的高
    webPreferences: {
      webSecurity: false, // 是否禁用瀏覽器的跨域安全特性
      nodeIntegration: true // 是否完整支持node
    }
  })

此處只設(shè)置了幾個(gè)基本屬性，更多屬性請(qǐng)參考：https://www.w3cschool.cn/electronmanual/electronmanual-browser-window.html

2.設(shè)置菜單

function createMenu () {
  // darwin表示macOS，針對(duì)macOS的設(shè)置
  if (process.platform === 'darwin') {
    const template = [
      {
        label: 'App Demo',
        submenu: [
          {
            role: 'about'
          },
          {
            role: 'quit'
          }]
      }]
    const menu = Menu.buildFromTemplate(template)
    Menu.setApplicationMenu(menu)
  } else {
    // windows及l(fā)inux系統(tǒng)
    Menu.setApplicationMenu(null)
  }
}

在這里要注意，MacOS和windows及Linux的處理是不一樣的

3.當(dāng)應(yīng)用啟動(dòng)后（初始化完成）要做的一些事情

app.on('ready', async () => {
  if (isDevelopment && !process.env.IS_TEST) {
    if (isDevelopment && !process.env.IS_TEST) {
      // Install Vue Devtools
      try {
        await installVueDevtools()
      } catch (e) {
        console.error('Vue Devtools failed to install:', e.toString())
      }
    }
  }
  globalShortcut.register('CommandOrControl+Shift+i', function () {
    win.webContents.openDevTools()
  })
  createWindow()
})

app模塊的ready方法執(zhí)行完之后就可以創(chuàng)建渲染進(jìn)程了。該方法默認(rèn)是如果是開發(fā)環(huán)境則自動(dòng)安裝VueDevTools方便開發(fā)者調(diào)試。同時(shí)也在全局注冊(cè)了使用Ctrl + Shift + i 呼出VueDevTool，在設(shè)置完這些插件之后，再創(chuàng)建渲染進(jìn)程。

在此處通常做一些應(yīng)用初始化的工作，例如：提前加載一些數(shù)據(jù)，等到渲染進(jìn)程渲染完頁(yè)面之后直接調(diào)用，加快應(yīng)用加載速度等。

4. 當(dāng)應(yīng)用所有窗口關(guān)閉要做的事情

app.on('window-all-closed', () => {
  // On macOS it is common for applications and their menu bar
  // to stay active until the user quits explicitly with Cmd + Q
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

當(dāng)應(yīng)用所有窗口關(guān)閉調(diào)用此方法，在此方法中可以增加釋放資源，或者刪除一些臨時(shí)文件

5.與渲染進(jìn)程進(jìn)行通訊

官方有多種通訊方式，我們這里介紹最常用的一種ipcRenderer（渲染進(jìn)程中使用的對(duì)象）和ipcMain（主進(jìn)程中使用的對(duì)象）。比如渲染進(jìn)程讓主進(jìn)程關(guān)閉當(dāng)前窗口
渲染進(jìn)程

const { ipcRenderer } = require('electron')
ipcRenderer.send('close');

主進(jìn)程

import { ipcMain } from 'electron'
ipcMain.on('close', e => win.close());

本文先介紹常用配置，等到在實(shí)戰(zhàn)項(xiàng)目中用到跟高級(jí)的用法，會(huì)在實(shí)戰(zhàn)項(xiàng)目中說(shuō)明。