myamusic

마이뮤직

설치하다

 npm i 

달리다

 npm start 

팩

 npm run starting 

설명하다

버전: 1.0

저자:토니 마

기술 스택: vue+element+electron

기능:

• 1. 단일/다중 로컬 음악을 추가하고, 파일 디렉터리를 추가하고, 삭제합니다.
• 2. 노래를 재생하고 가사를 동기화한 후(가사 lrc 파일의 이름이 동일하고 노래와 동일한 디렉토리에 저장) 트레이에 최소화합니다.
• 3. 목록 루프, 단일 루프, 무작위 재생;
• 4. 재생 진행률 조정, 볼륨 조정 및 음소거

프로젝트 주소: https://github.com/maya1900/myamusic

업데이트 시간: 2021-11-20

발생한 문제

1. 전자 프로젝트 구축

여기서는 먼저 vue 프로젝트를 생성한 다음 vue-cli-plugin-electron-builder를 사용하여 완료합니다. 완료 후 npm을 실행하여 애플리케이션을 직접 시작할 필요가 없습니다. 전자를 시작합니다.

2. 앱을 테두리 없이 설정하세요

background.js에서 새 BrowserWindow의 옵션에 프레임: false를 추가합니다.

3. 로컬 파일 및 폴더를 추가하여 음악 콘텐츠 얻기

이벤트가 클릭되면 렌더링 프로세스인 ipcRenderer를 사용하여 메인 프로세스인 ipcMain을 호출합니다. 메인 프로세스는 이벤트를 수신하고 파일 선택 상자를 열고 파일/폴더를 선택하고 옵션에 설정하며 콜백 함수는 다음과 같습니다. 파일 경로이며 jsmediatags를 사용하여 음악 정보를 처리합니다.

4. 오디오는 지역 음악을 재생합니다.

오디오 태그는 브라우저 제한으로 인해 로컬 오디오를 재생할 수 없습니다. 새 BrowserWindow에서 webSecurity를 ​​false로 설정하거나 HTML에서 crossOrigin 속성을 오디오 태그에 추가해야 합니다.

5. 가사 검색 및 가사 동기화

동일한 디렉터리에서 동일한 이름을 가진 .lrc 파일을 찾아 fs 모듈을 사용하여 파일을 읽은 후 데이터 처리를 수행합니다.

6. 트레이 설정

main.js의 새로운 트레이 트레이에서 해당 이벤트를 설정하세요.

7. 포장 실패

그 안에는 github에서 다운로드하는 데 상대적으로 느린 리소스가 여러 개 있습니다. 오류 메시지를 확인하여 해당 리소스 주소를 찾아 다운로드한 후 C:UsersAdministratorAppDataLocalelectronCache 에 넣을 수 있습니다. 예배 규칙서;

리소스 문제가 아닙니다. node_modules를 삭제하고 npm i를 다시 실행하세요.

프로젝트를 github에 업로드하고 패키징하세요.

8. 응용 프로그램을 성공적으로 패키징한 후 흰색 화면

모드 제거: vue 라우터 아래의 기록;

프로젝트의 각 경로가 올바른지, 영문인지 확인하세요.

9. 패키징 후 아이콘 문제

아이콘은 png/icns/ico 이상의 256x256 크기인 build/icons 디렉터리에 배치되며 아이콘 주소는 온라인으로 생성됩니다. PNG to ICNS |

개발환경에는 문제가 없으나 패키징 후 아이콘이 사라집니다. publick 파일 디렉토리에 아이콘을 넣고 path.join(__static, 'favicon.ico') 사용하십시오. __static은 정적 디렉토리입니다.

10. 포장 전 구성

이 플러그인 구성을 사용하거나 vue.config.js에서 구성하십시오(참조):

 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" // 图标名称
            }
      }
    }
  }
}