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 electronic:serve เพื่อเริ่มแอปพลิเคชันโดยตรง ไม่จำเป็นต้องเริ่ม vue ก่อน เริ่มอิเล็กตรอน

2. ตั้งค่าแอปให้ไร้ขอบ

ใน background.js ให้เพิ่ม frame: false ให้กับตัวเลือกใน BrowserWindow ใหม่

3. เพิ่มไฟล์และโฟลเดอร์ในเครื่องเพื่อรับเนื้อหาเพลง

เมื่อคลิกเหตุการณ์ กระบวนการเรนเดอร์ ipcRenderer จะถูกใช้เพื่อเรียกกระบวนการหลัก ipcMain กระบวนการหลักได้รับเหตุการณ์ เปิดกล่องการเลือกไฟล์ เลือกไฟล์/โฟลเดอร์ ตั้งค่าไว้ในตัวเลือก และฟังก์ชันการโทรกลับคือ เส้นทางไฟล์และใช้ jsmediatags เพื่อประมวลผลข้อมูลเพลง

4. เสียงเล่นเพลงท้องถิ่น

แท็กเสียงไม่สามารถเล่นเสียงในเครื่องได้เนื่องจากข้อจำกัดของเบราว์เซอร์ คุณต้องตั้งค่า webSecurity เป็น false ใน BrowserWindow ใหม่ หรือเพิ่มแอตทริบิวต์ crossOrigin เป็น true ใน HTML ให้กับแท็กเสียง

5. ค้นหาเนื้อเพลงและซิงโครไนซ์เนื้อเพลง

ค้นหาไฟล์ .lrc ที่มีชื่อเดียวกันในไดเร็กทอรีเดียวกัน ใช้โมดูล fs เพื่ออ่านไฟล์ จากนั้นจึงประมวลผลข้อมูล

6. ตั้งค่าถาด

ในถาดถาดใหม่ใน main.js เพียงตั้งค่าเหตุการณ์ที่เกี่ยวข้อง

7. บรรจุภัณฑ์ล้มเหลว

มีทรัพยากรหลายอย่างในนั้นซึ่งค่อนข้างช้าในการดาวน์โหลดจาก GitHub คุณสามารถตรวจสอบข้อความแสดงข้อผิดพลาดเพื่อค้นหาที่อยู่ทรัพยากรที่เกี่ยวข้อง ดาวน์โหลด และวางไว้ใน C:UsersAdministratorAppDataLocalelectronCache ไดเรกทอรี;

ไม่ใช่ปัญหาทรัพยากร ลบ node_modules และ re-npm i;

อัปโหลดโปรเจ็กต์ไปยัง GitHub และจัดทำแพ็คเกจ

8. หน้าจอสีขาวหลังจากสมัครแพ็คเกจสำเร็จ

ลบโหมด: ประวัติภายใต้เราเตอร์ vue;

ตรวจสอบว่าแต่ละเส้นทางในโครงการถูกต้องและเป็นภาษาอังกฤษหรือไม่

9. ปัญหาไอคอนหลังการบรรจุภัณฑ์

ไอคอนจะอยู่ในไดเร็กทอรี build/icons ไม่น้อยกว่า 256x256, png/icns/ico และที่อยู่ของไอคอนจะถูกสร้างขึ้นทางออนไลน์: PNG เป็น ICNS | CloudConvert

ไม่มีปัญหากับสภาพแวดล้อมการพัฒนา แต่ไอคอนหายไปหลังจากบรรจุภัณฑ์ วางไอคอนในไดเร็กทอรีไฟล์ 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" // 图标名称
            }
      }
    }
  }
}