一、什么是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
- 可以使用和系统对接的Electron API-创建菜单,上传文件等等
- 创建渲染过程 -Renderer Process
- 全面支持Node.js(在 main Process中提供node的全面API)
- 只有一个,作为整个程序的入口点
渲染进程-Renderer Process
- 可以有多个,每个对应一个窗口
- 每个是一个单独的进程
- 全面支持Node.js和DOM API
- 可以使用一部分Electron提供的API
API
五、Electron API
- BrowserWindow:创建一个窗口(为Renderer Process)
- 只能在main.js中使用
- 在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提供的对象以事件的形式进行传播的。
七、音乐播放器
主窗口需求。
- 点击‘添加歌曲到曲库’按钮会弹出另一个窗口
- 点击‘播放’按钮播放歌曲,播放区域显示歌曲信息,播放进度等
- 点击‘删除’按钮从曲库删除歌曲
添加窗口需求。
- 点击‘选择音乐’弹出原生窗口上传对应的音乐文件
- 上传的文件以列表的形式显示
- 点击‘导入音乐’按钮,当前窗口关闭并且将选择的音乐文件导出到主窗口
代码。
- 实现点击“添加歌曲到曲库”弹出另一个窗口
// 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') })
-
创建窗口类
// 创建窗口类 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') }) })
- 使用Dialog模块添加音乐文件
// 打开本地文件 ipcMain.on('open-music-file',() =>{ dialog.showOpenDialog({ properties: ['openFile','multiSelections'], filters: [{ name: 'Music',extensions: ['mp3']}] },(files) => { }) })
- 展示添加文件列表
- 未完待续