首先修改了一波启动脚本:使用nodemon来完成对文件的watch.

"scripts": {
   "start": "nodemon --watch main.js --exec 'electron .'"
},

只要main.js一旦发生变化，就会去执行electron .这个脚本命令。main.js使我们的主进程。

• 使用数据库软件
• 使用html5提供的浏览器对象
• 使用本地文件

这里使用electron-store来对数据进行一个存储

可以使用

// 这里能够打印出electron-store存储数据的文件目录位置
// console.log(app.getPath('userData'));

使用html5的Audio标签来完成音乐的播放:

<audio
  controls 
  src="/media/examples/xxx.mp3"
>
</audio>   

对应的js对象:

const horn = new Audio('car_horn.wav');
horn.play();
horn.pause();
horn.volume = 0.75;
horn.addEventListener('loadeddata', () => {
   let duration = horn.duration;
})

使用音乐的dom节点来存储data信息

• HTML 中使用自定义的data属性:data-*来存储
• JS中使用HTMLElement的dataset属性来获取(具体可以参考音乐播放那里)

事件的绑定上面我们使用事件的冒泡机制来完成事件的代理功能。

遇见复杂的问题可以使用流程图来解决