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