通信

1. 加镜像并装包

npm config edit
electron_mirror=https://npm.taobao.org/mirrors/electron/

2. dev安装nodemon并更改执行命令监听main.js

  "scripts": {
    "start": "nodemon --watch main.js --exec electron ."
  },

3. 更改main.js

const { app, BrowserWindow } = require('electron')
app.on('ready', () => {
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
    },
  })
  mainWindow.loadFile('index.html')
  const secondWindow = new BrowserWindow({
    width: 400,
    height: 300,
    webPreferences: {
      nodeIntegration: true,
    },
    parent: mainWindow,
  })
  secondWindow.loadFile('second.html')
})

通信

1. renderer.js

const { ipcRenderer } = require('electron')
window.addEventListener('DOMContentLoaded', () => {
  ipcRenderer.send('message', 'send from Render')
  ipcRenderer.on('replay', (e, v) => {
    document.getElementById('message').innerHTML = v
  })
})

2. main.js

const { app, ipcMain } = require('electron')
app.on('ready',() => {
    ....
  ipcMain.on('message',(e,v) => {
    console.log(v)
    e.sender.send('replay','replay from Main')
  })
})

封装

const { app, BrowserWindow, ipcMain } = require('electron')
class AppWindow extends BrowserWindow {
  constructor(config, loadPath) {
    const baseConfig = {
      width: 800,
      height: 600,
      webPreferences: {
        nodeIntegration: true,
      },
    }
    const finalConfig = { ...baseConfig, ...config }
    super(finalConfig)
    this.loadFile(loadPath)
    this.once('ready-to-show', () => {
      this.show()
    })
  }
}
app.on('ready', () => {
  const mainWindow = new AppWindow({}, './renderer/index.html')
  ipcMain.on('addMusicButtonClick', (e, v) => {
    new AppWindow(
      {
        width: 500,
        height: 400,
        parent: mainWindow,
      },
      './renderer/add.html'
    )
  })
})

IPC 通信

进程间通信(IPC)是指在不同进程之间传播或交换信息
Electron的main进程和renderer进程的通信是通过Electron提供的ipcMain和ipcRenderer来实现的
在main中向某一窗口 renderer发送消息可以使用window.webContents.send('xxx',value)
在main端监听renderer消息可以使用ipcMain.on('xxx',value)
在renderer端回复同步消息replay，监听消息ipcRender.on('xxx',(e,v) => {})
.send()发送异步消息, .sendSync()发送同步消息

数据持久化及状态管理

安装electron-store

const Store = require('electron-store')
const { v4: uuidV4 } = require('uuid')
const path = require('path')
class DataStore extends Store {
  constructor(settings) {
    super(settings)
    this.tracks = this.get('tracks') || []
  }
  saveTracks() {
    this.set('tracks', this.tracks)
    return this
  }
  getTracks() {
    return this.get('tracks') || []
  }
  addTracks(tracks) {
    const trackWithProps = tracks
      .map((track) => {
        return {
          id: uuidV4(),
          path: track,
          fileName: path.basename(track),
        }
      })
      .filter((track) => {
        const currentTrackPath = this.getTracks().map((v) => v.path)
        return currentTrackPath.indexOf(track.path) < 0
      })
    this.tracks = [...this.tracks, ...trackWithProps]
    return this.saveTracks()
  }
  deleteTrack(id) {
    this.tracks = this.tracks.filter((v) => v.id !== id)
    return this.saveTracks()
  }
}
module.exports = DataStore

main.js

const { app, BrowserWindow, ipcMain, dialog } = require('electron')
const DataStore = require('./renderer/musicDataStore')
const myStore = new DataStore({
  name: 'Music Data',
})

app.on('ready', () => {
  const mainWindow = new AppWindow({}, './renderer/index.html')
  mainWindow.webContents.on('did-finish-load', () => {
    mainWindow.send('getTrack', myStore.getTracks())
  })
})

renderer / index.js

const { ipcRenderer } = require('electron')
ipcRenderer.on('getTrack', (e, tracks) => {
  renderListHTML(tracks)
  allTracks = tracks
})