进入Electron的世界

进入Electron的世界

1

保存播放列表，持久化，addtracks函数，封装类

electron store本地读取记录，数据持久化

创建列表，在HTMl中加入DOM

添加音乐到曲库

原型图ggg

app数据存储的位置获取

app.getPath("userData")

进程分为ipcMain和ipcRenderder

1. 引入 const { ipcMain, ipcRenderer } = require('electron')

通信：

renderder发送

ipcRenderer.send("key", "arg")

main接收、发送

ipcMain.on("key", (event, arg) => {

     console.log(arg)

    event.sender.send("key2", "from main")

    mainWindow.send("key3", "from main too")

}

script：require("./renderer.js")

Electron使用IPC(interprocess communication)在进程之间进行通讯，和Chromium完全一致

在html中引入js的时候，老师使用的是

<script>

        require("./renderer.js")

</script>

我本地无效果，使用

<script src="./renderer.js"></script>

才可以

程序中的.js文件不仅可以使用DOM的API，可以使用node.js的方法

1. node.js的API 

    alert(process.versions.node)

2. DOM的API

    window.addEventListener("DOMContentLoaded", () => {

        alert("greeting from the DOM side")

    })

1. app.on("ready", () => {}) 监听app的ready函数，在回调里做事情

2. 创建一个window

        const mainWindow = new BrowserWindow({

            width: 800, height: 600, 

            webPreferences: { nodeIntegration: true },

            parent: xWindow

        })

        mainWindow.loadFile("xxx.html")

        // nodeIntergration：集成node环境

        // parent: 执行当前窗口的父窗口。当父窗口关闭，子窗口随之关闭

使用nodemon来检测main.js变化，直接执行electron .来运行项目

1. `npm install nodemon -D`

2. 选择项目的package.json，在script的start里，改为` "nodemon --watch main.js --exec 'electron ." ` ，表示让nodemon监听main.js这个文件，当有变化的时候，就执行electron .

3. 
   

4. 
   

垂直居中
w3c flex

截图啦啦啦

const { v4: uuidv4 } = require('uuid');

截个图以防忘记

开发过程中使用nodemon进行热部署，安装命令：

npm install nodemon --save-dev

渲染进程的console无法在控制台打印，无法展开渲染进程的控制台时需要通过DOM展示出来。

另，切记node 的API使用需在开启对应的设置后在渲染进程使用。

electron-builder 打包配置参考：

https://github.com/zulip/zulip-electron/blob/master/package.json

事件冒泡与代理

进程交互流程

Electron 进程之间的通讯方式

Electron 进程之间的通讯方式