Electron学习笔记及实战

一、什么是Electron？

• 使用js、html和css构建跨平台的桌面应用
• 基于Chromium浏览器和Node.js
• 开源项目
• 跨平台：生成兼容Mac、Windows和Linux

二、谁在使用？

• Visual Studio Code
• GitHub Desktop
• 等

三、通过Electron能学到什么？

• 夯实前端开发基础-HTML，JS,CSS
• 深入浅出Node.js
• 深入理解浏览器原理
• Electron API 应用

四、Electron核心概念。

什么是进程（process）？

一个正在被执行或运行的程序。

主进程-Main Process

1. 可以使用和系统对接的Electron API-创建菜单，上传文件等等
2. 创建渲染过程 -Renderer Process
3. 全面支持Node.js（在 main Process中提供node的全面API）
4. 只有一个，作为整个程序的入口点

渲染进程-Renderer Process

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

API

五、Electron API

1. BrowserWindow：创建一个窗口（为Renderer Process）
2. 只能在main.js中使用
3. 在rederer.js既可以使用node API 也可使用 DOM API

   const { app, BrowserWindow } = require('electron')
   app.on('ready',() => {
     //console.log('123');
       const mainWindow = new BrowserWindow({
           width: 800,
           height: 600,
           webPreferences: {
             nodeIntegration: true  // 可以使用node.js API
           }
       })
       mainWindow.loadFile('index.html')
       const secondWindow = new BrowserWindow({
           width: 400,
           height: 300,
           webPreferences: {
               nodeIntegration: true  // 可以使用node.js API
           },
           parent: mainWindow
       })
       secondWindow.loadFile('second.html')
   })

    

 六、进程之间的通信方式（IPC）

使用IPCmain和IPCrenderer两个electron提供的对象以事件的形式进行传播的。

 

七、音乐播放器

       主窗口需求。

1. 点击‘添加歌曲到曲库’按钮会弹出另一个窗口
2. 点击‘播放’按钮播放歌曲，播放区域显示歌曲信息，播放进度等
3. 点击‘删除’按钮从曲库删除歌曲

      添加窗口需求。

1. 点击‘选择音乐’弹出原生窗口上传对应的音乐文件
2. 上传的文件以列表的形式显示
3. 点击‘导入音乐’按钮，当前窗口关闭并且将选择的音乐文件导出到主窗口

      代码。

1. 实现点击“添加歌曲到曲库”弹出另一个窗口

   // main.js
   const { app, BrowserWindow,ipcMain } = require('electron')
   app.on('ready',() => {
     //console.log('123');
       const mainWindow = new BrowserWindow({
           width: 800,
           height: 600,
           webPreferences: {
             nodeIntegration: true  // 可以使用node.js API
           }
       })
       mainWindow.loadFile('./Renderer/index.html')
       ipcMain.on('add-music-window',() => {
           const addWindow = new BrowserWindow({
               width: 500,
               height: 400,
               webPreferences: {
                   nodeIntegration: true  // 可以使用node.js API
               },
               parent: mainWindow
           })
           addWindow.loadFile('./Renderer/add.html')
       })
   })
   // index.js
   const { ipcRenderer } = require('electron')
   document.getElementById('add-music-button').addEventListener('click',()=>{
       ipcRenderer.send('add-music-window')
   })

   

2. 创建窗口类

   // 创建窗口类 
   class AppWindow extends BrowserWindow{
       constructor(config,fileLocation){
           const basicConfig ={
               width: 800,
               height: 600,
               webPreferences: {
                   nodeIntegration: true  // 可以使用node.js API
               }
           }
           const finalConfig = { ...basicConfig,...config }
           super(finalConfig)
           this.loadFile(fileLocation)
       }
   }
   app.on('ready',() => {
     //console.log('123');
       const mainWindow = new AppWindow({},'./Renderer/index.html')
       ipcMain.on('add-music-window',() => {
           const addWindow = new AppWindow({
               width: 500,
               height: 400,
               parent: mainWindow
           },'./Renderer/add.html')
       })
   })

    

3. 使用Dialog模块添加音乐文件

   // 打开本地文件
       ipcMain.on('open-music-file',() =>{
           dialog.showOpenDialog({
               properties: ['openFile','multiSelections'],
               filters: [{ name: 'Music',extensions: ['mp3']}]
       },(files) => {
   
       })
       })

4.  展示添加文件列表
5. 未完待续