myamusic

myamusic

Installieren

 npm i 

laufen

 npm start 

Pack

 npm run starting 

veranschaulichen

Version: 1.0

Autor:Tony Ma

Technologie-Stack: Vue+Element+Elektron

Funktion:

• 1. Einzelne/mehrere lokale Musik hinzufügen, Dateiverzeichnisse hinzufügen und löschen;
• 2. Spielen Sie das Lied ab, synchronisieren Sie den Text (die Liedtext-LRC-Datei hat denselben Namen und legen Sie sie im selben Verzeichnis wie das Lied ab) und minimieren Sie sie in der Taskleiste.
• 3. Listenschleife, Einzelschleife, Zufallswiedergabe;
• 4. Passen Sie den Wiedergabefortschritt, die Lautstärke und die Stummschaltung an

Projektadresse: https://github.com/maya1900/myamusic

Aktualisierungszeit: 20.11.2021

Es sind Probleme aufgetreten

1. Erstellen Sie ein Elektronenprojekt

Hier erstellen wir zuerst das Vue-Projekt und vervollständigen es dann mit vue-cli-plugin-electron-builder. Führen Sie nach Abschluss einfach npm aus, um die Anwendung direkt zu starten Elektron starten.

2. Stellen Sie die App auf randlos ein

Fügen Sie in „background.js“ „frame: false“ zu den Optionen im neuen BrowserWindow hinzu.

3. Fügen Sie lokale Dateien und Ordner hinzu, um Musikinhalte zu erhalten

Wenn auf das Ereignis geklickt wird, wird der Renderprozess ipcRenderer verwendet, um den Hauptprozess ipcMain aufzurufen. Der Hauptprozess empfängt das Ereignis, öffnet das Dateiauswahlfeld, wählt die Datei/den Ordner aus, legt sie in der Option fest und die Rückruffunktion ist die Dateipfad und verwendet jsmediatags, um die Musikinformationen zu verarbeiten;

4. Audio spielt lokale Musik

Das Audio-Tag kann aufgrund von Browsereinschränkungen kein lokales Audio abspielen. Sie müssen webSecurity im neuen BrowserWindow auf „false“ setzen oder dem Audio-Tag das Attribut „crossOrigin“ in HTML auf „true“ hinzufügen.

5. Liedtexte suchen und Liedtexte synchronisieren

Suchen Sie die gleichnamige .lrc-Datei im selben Verzeichnis, lesen Sie die Datei mit dem fs-Modul und führen Sie dann die Datenverarbeitung durch

6. Stellen Sie das Fach auf

Legen Sie im neuen Tray-Tray in main.js einfach die entsprechenden Ereignisse fest.

7. Die Verpackung ist fehlgeschlagen

Es enthält mehrere Ressourcen, deren Download von Github relativ langsam ist. Sie können die Fehlermeldung überprüfen, um die entsprechende Ressourcenadresse zu finden, sie herunterzuladen und sie in C:UsersAdministratorAppDataLocalelectronCache abzulegen Verzeichnis;

Es ist kein Ressourcenproblem, löschen Sie node_modules und re-npm i;

Laden Sie das Projekt auf Github hoch und verpacken Sie es

8. Weißer Bildschirm nach erfolgreich verpackter Anwendung

Entfernungsmodus: Verlauf unter Vue-Router;

Überprüfen Sie, ob jeder Pfad im Projekt korrekt und in Englisch ist

9. Symbolproblem nach dem Packen

Das Symbol wird im Verzeichnis build/icons abgelegt, mindestens 256 x 256, png/icns/ico, und die Symboladresse wird online generiert: PNG to ICNS |

Es gibt kein Problem mit der Entwicklungsumgebung, aber das Symbol verschwindet nach dem Packen. Platzieren Sie das Symbol im Publick-Dateiverzeichnis und verwenden Sie path.join(__static, 'favicon.ico') , __static ist das statische Verzeichnis

10. Konfiguration vor dem Verpacken

Verwenden Sie diese Plug-in-Konfiguration oder konfigurieren Sie sie in vue.config.js (Referenz):

 module . exports = {
  pluginOptions : {
    electronBuilder : {
      nodeIntegration : true ,
      builderOptions : {
            "productName" : "xxxx" , //项目名 这也是生成的exe文件的前缀名
            "appId" : "xxxxx" , //包名  
            "copyright" : "xxxx" , //版权  信息
            "compression" : "store" , // "store" | "normal"| "maximum" 打包压缩情况(store 相对较快)，store 39749kb, maximum 39186kb
            "directories" : {
                "output" : "build" // 输出文件夹
            } , 
            "asar" : false , // asar打包
            "extraResources" :  { // 拷贝dll等静态文件到指定位置
                "from" : "./app-update.yml" ,
                "to" : "./b.txt"
            } ,
            "win" : {  
                "icon" : "xxx/icon.ico" //图标路径,
                "extraResources" :  { // 拷贝dll等静态文件到指定位置(用于某个系统配置)
                    "from" : "./app-update.yml" ,
                    "to" : "./b.txt"
                }
            } ,
            "nsis" : {
                "oneClick" : false , // 一键安装
                "guid" : "xxxx" , //注册表名字，不推荐修改
                "perMachine" : true , // 是否开启安装时权限限制（此电脑或当前用户）
                "allowElevation" : true , // 允许请求提升。 如果为false，则用户必须使用提升的权限重新启动安装程序。
                "allowToChangeInstallationDirectory" : true , // 允许修改安装目录
                "installerIcon" : "./build/icons/aaa.ico" , // 安装图标
                "uninstallerIcon" : "./build/icons/bbb.ico" , //卸载图标
                "installerHeaderIcon" : "./build/icons/aaa.ico" , // 安装时头部图标
                "createDesktopShortcut" : true , // 创建桌面图标
                "createStartMenuShortcut" : true , // 创建开始菜单图标
                "shortcutName" : "xxxx" // 图标名称
            }
      }
    }
  }
}