electron开发本地音乐播放器踩坑总结

作者: 0月 | 来源:发表于2020-07-22 19:49 被阅读0次

electron开发本地音乐播放器踩坑总结
基于 electron-vue 开发的音乐播放器
electron踩坑记录
Flutter 开发记录
APlayer音乐播放器
Electron | 简易音乐播放器入门🎵
移动端自制音乐播放器--React
Electron app打包后启动报错：Cannot find
我的音乐（Musicoco）- 本地音乐播放器开发总结
Android音乐播放器开发小记——项目简介

最近研究了一下electron，于是就来做个实践项目local-music-player,主要功能就是导入音乐到歌曲列表，播放音乐、删除音乐等。附上地址，下载跑起来，自己打包出一个app。
github地址

技术用electron、原生js。

先看最终产品效果，首先是空白列表。

播放器1.png

然后先点击【添加歌曲】

弹框可以点击多选音乐

导入音乐.png

导入音乐之后就可以播放音乐了，也可暂停、删除音乐。

播放暂停删除音乐.png

启动项目

我直接看官网 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通信架构

electron的核心概念是主进程和渲染进程，主进程main.js创建应用，并且提供访问操作系统的能力，而渲染进程 BrowserWindow 主要负责web ui开发。这个就是参考了chromium的架构思想。进程之间通信用ipcMain\ ipcRenderer或者渲染进程直接调用remote.xxx来操作主进程的方法，而主进程可以通过

const win = new BrowserWindow({...})
win.webContents.xxx

来操作渲染进程的方法。我这里只用了ipcMain\ ipcRenderer方式通信。本地导入音乐用到了一个electron-store的库，这里主要就是生成一个文件来记录歌曲列表的增删改之后的信息的。用了它就会在本地的这个目录生成一个json文件,文件名在代码中控制

music data.json

musicdata

打包

打包是个巨坑，这次开发经历简直可以说是开发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目录里面