Electron | 简易音乐播放器入门_electrion中播放器

本文基于慕课网课程：Electron开发仿网易云播放器，通过该播放器的制作来入门Electron框架。
吐槽一下名字：根本就不是仿网易云，不需要这么浮夸的名字。课程内容不错，对于入门Electron来说挺好的。

❗本播放器持续更新中：https://www.jianshu.com/p/9abc0a40d39f 已实现网易云音乐和QQ音乐的在线搜索和播放~

一、 Electron 基本文档：

https://electronjs.org/docs。先阅读后就可以实现一个简易到electron入门helloWorld程序。

二、主进程和渲染进程

Chromium的基本原理，用Chrome来举例，主进程就是浏览器的进程，每个tab都是一个渲染进程。

主进程和渲染进程

1. 主进程 Main Process

• 可以使用与系统对接的Electron API，创建菜单、上传文件。
• 创建渲染进程Renderer Process
• 全面支持Node.js
• 只有一个，作为程序的入口

2. 渲染进程 Renderer Process

• 可以有多个，每个对应一个窗口
• 每个都是单独的进程
• 全面支持Node.js和DOM API
• 可以使用一部分Electron API

3. Demo结构对应

Demo中有三个文件：

• main.js对应主进程、
• renderer.js对应渲染进程、
• index.html渲染页面。
  main.js中通过new BrowserWindow()新建一个浏览器窗口（可以理解为开辟了一个单独的渲染进程），然后通过此实例调用loadFile()方法加载页面。在渲染页面中，引入renderer.js来在渲染进程中执行js代码。

4. 进程间通信

• 使用IPC（interprocess communication）通信（与chromium一致）

   

  

• ipcRenderer 渲染进程

// renderer.js
const { ipcRenderer } = require('electron')
window.addEventListener('DOMContentLoaded', ()=>{
  ipcRenderer.send('message', 'hello from renderer.js')
  ipcRenderer.on('reply', (event, arg) => {
    document.getElementById('message').innerText = arg
  })
})

• ipcMain 主进程

// main.js
const { app, BrowserWindow, ipcMain } = require('electron')
app.on('ready', () => {
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  })
  mainWindow.loadFile('index.html')
  ipcMain.on('message', (event, arg) => {
    console.log(arg)
    // event.sender.send('reply', 'hello from main') // 可以用event对象的sender属性获取发送者
    mainWindow.send('reply', 'hello from main') // 也可以用原来的窗口对象来发送
  })
})

三、功能流程图与目录结构