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提供的对象以事件的形式进行传播的。

 

Electron学习笔记及实战_第1张图片

七、音乐播放器

       主窗口需求。

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

    Electron学习笔记及实战_第2张图片

  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. 未完待续

你可能感兴趣的:(Electron)