最近研究了一下electron，于是就来做个实践项目local-music-player,主要功能就是导入音乐到歌曲列表，播放音乐、删除音乐等。附上地址，下载跑起来，自己打包出一个app。
github地址
技术用electron、原生js。
先看最终产品效果，首先是空白列表。
然后先点击【添加歌曲】
导入音乐之后就可以播放音乐了，也可暂停、删除音乐。
启动项目
我直接看官网 https://www.electronjs.org/ ,这个官网也是挺垃圾的，经常打不开，打开慢，我还是翻墙了的。
# 克隆示例项目的仓库
$ git clone https://github.com/electron/electron-quick-start
# 进入这个仓库改名为local-music-player
$ cd local-music-player
# 安装依赖并运行
$ npm install && npm start
如果你是Windows用户，一般都会失败，因为这里要下载一堆环境依赖如Visual C++ 软件包、Python等，所以先别走上面的步骤，先点下面链接，这里按照它的说明，把这些前期环境工作做好https://github.com/felixrieseberg/windows-build-tools，然后再进入项目npm install && npm start
然后就开始开发了。
开发
electron由Node.js+Chromium+Native APIs构成。你可以理解成，它是一个得到了Node.js和基于不同平台的Native APIs加强的Chromium浏览器，可以用来开发跨平台的桌面级应用。有意思的是：我们可以在一个js文件里面同时操作dom与nodejs的api。
electron的核心概念是主进程和渲染进程，主进程main.js创建应用，并且提供访问操作系统的能力， 而渲染进程 BrowserWindow 主要负责web ui开发。这个就是参考了chromium的架构思想。进程之间通信用ipcMain\ ipcRenderer或者渲染进程直接调用remote.xxx来操作主进程的方法，而主进程可以通过
const win = new BrowserWindow({...})
win.webContents.xxx
来操作渲染进程的方法。我这里只用了ipcMain\ ipcRenderer方式通信。本地导入音乐用到了一个electron-store的库，这里主要就是生成一个文件来记录歌曲列表的增删改之后的信息的。用了它就会在本地的这个目录生成一个json文件,文件名在代码中控制
打包
打包是个巨坑，这次开发经历简直可以说是开发5分钟，打包两小时！ 并不是打包慢，主要问题是打包需要明白怎么配置和打包过程中各种包下载失败报错。因为它号称跨平台的,所以可以打包成任意格式的包，如windows平台的nsis (Installer), nsis-web (Web installer), portable ; mac的 dmg, pkg, mas, mas-dev; linux的deb, rpm, freebsd, pacman, p5p, apk.
我这里用了electron-builder，文档是英文的，需要配置package.json配置build选项,我的配置如下，主要是配置了win平台的，打包出来exe文件。
{
"name": "local-music-player",
"version": "1.0.0",
"description": "一个音乐播放器",
"main": "main.js",
"scripts": {
"start": "nodemon --watch main.js --exec electron .",
"build": "electron-builder"
},
"build": {
"appId": "local.music.app",
"productName": "音乐播放器",
"mac": {
"category": "public.app-category.productivity",
"artifactName": "${productName}-${version}.${ext}"
},
"win": {
"target": [
{
"target": "nsis",
"arch": [
"x64",
"ia32"
]
}
],
"icon": "./build/icon/icon.ico",
"artifactName": "${productName}-${version}.${ext}",
"publisherName": "xxx"
},
"nsis": {
"allowToChangeInstallationDirectory": true,
"oneClick": false,
"perMachine": false,
"installerIcon": "./build/icon/icon.ico",
"uninstallerIcon": "./build/icon/icon.ico",
"installerHeaderIcon": "./build/icon/icon.ico",
"createDesktopShortcut": true
},
"copyright": "©2020 xx公司."
},
"repository": "https://github.com/electron/electron-quick-start",
"keywords": [
"Electron",
"quick",
"start",
"tutorial",
"demo"
],
"author": "GitHub",
"license": "CC0-1.0",
"devDependencies": {
"electron": "^9.1.0",
"electron-builder": "^22.7.0",
"nodemon": "^2.0.4"
},
"dependencies": {
"bootstrap": "^4.5.0",
"electron-store": "^6.0.0",
"uuid": "^8.2.0"
}
}
更多配置可以参考这篇文章：Electron-builder打包详解
巨坑：downloading错误。
我也是参考这篇文章：Electron 打包问题：electron-builder 下载各种依赖出错，然后需要自己根据报错，自己去手动下载包到对应的目录，真是服了。我一开始去https://github.com/electron/electron/releases/tag/v9.1.0
找下载，结果下载非常慢，等着下载又容易失败，最后我还是手动去淘宝镜像
里面去找资源，结果是秒下。
打包总结
1、先配置build选项，然后执行npm run build,对了，根目录还要自己创建一个build文件夹里面弄个256x256的ico图标，如build选项下的win选项里面的"icon": "./build/icon/icon.ico",
2、根据下载错误，参考这篇文章：Electron 打包问题：electron-builder 下载各种依赖出错去淘宝镜像拿资源。
最后打包成功，在dist目录里面
所以最终的成果其实拿 dist/音乐播放器-1.0.0.exe 这个安装包就行了。
最后
本次实践，完整走了一次桌面端开发流程。但是还有很多不完善的地方，没有采用工程化的方式开发。所以，实际开发可以考虑参考electron-vue，或者自己用webpack来搭建脚手架，折腾一下。