electron-vue跨平臺桌面應用開發實戰教程（二）—主進程常用配置

在上一篇文章中我們搭建了一個electron和vue集成的項目，本文主要是對electron的background.js也就是主進程做下介紹，同時也介紹下渲染進程。

electron 主要分爲主進程（background.js）、渲染進程（也就是vue開發的頁面）和GPU進程等，但是我們主要使用的就是主進程和渲染進程，其他進程暫時不做深入研究。

主進程：

• 一個應用中有且只有一個主進程

• 創建窗口等所有系統事件都要在主進程中進行

渲染進程：

• 每創建一個web頁面都會創建一個渲染進程

• 每個web頁面運行在它自己的渲染進程中

• 每個渲染進程是獨立的, 它只關心它所運行的頁面

主進程的主要主要作用：

1. 創建渲染進程

2. 管理應用程序的生命週期

3. 與系統底層交互

在此處主要講解可以在主進程中設置進行哪些最常用的配置配置。

1.設置渲染進程的大小、外觀

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

此處只設置了幾個基本屬性，更多屬性請參考：https://www.w3cschool.cn/electronmanual/electronmanual-browser-window.html

2.設置菜單

function createMenu () {
  // darwin表示macOS，針對macOS的設置
  if (process.platform === 'darwin') {
    const template = [
      {
        label: 'App Demo',
        submenu: [
          {
            role: 'about'
          },
          {
            role: 'quit'
          }]
      }]
    const menu = Menu.buildFromTemplate(template)
    Menu.setApplicationMenu(menu)
  } else {
    // windows及linux系統
    Menu.setApplicationMenu(null)
  }
}

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

3.當應用啓動後（初始化完成）要做的一些事情

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方法執行完之後就可以創建渲染進程了。該方法默認是如果是開發環境則自動安裝VueDevTools方便開發者調試。同時也在全局註冊了使用Ctrl + Shift + i 呼出VueDevTool，在設置完這些插件之後，再創建渲染進程。

在此處通常做一些應用初始化的工作，例如：提前加載一些數據，等到渲染進程渲染完頁面之後直接調用，加快應用加載速度等。

4. 當應用所有窗口關閉要做的事情

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()
  }
})

當應用所有窗口關閉調用此方法，在此方法中可以增加釋放資源，或者刪除一些臨時文件

5.與渲染進程進行通訊

官方有多種通訊方式，我們這裏介紹最常用的一種ipcRenderer（渲染進程中使用的對象）和ipcMain（主進程中使用的對象）。比如渲染進程讓主進程關閉當前窗口
渲染進程

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

主進程

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

本文先介紹常用配置，等到在實戰項目中用到更高級的用法，會在實戰項目中說明。

本文分享自微信公衆號 - 自增程序員（javaipp）。
如有侵權，請聯繫 [email protected] 刪除。
本文參與“OSC源創計劃”，歡迎正在閱讀的你也加入，一起分享。