npm i
npm start
npm run starting
الإصدار: 1.0
المؤلف: توني ما
مكدس التكنولوجيا: vue+element+electron
وظيفة:
عنوان المشروع: https://github.com/maya1900/myamusic
وقت التحديث: 2021-11-20
هنا نقوم بإنشاء مشروع vue أولاً، ثم نستخدم vue-cli-plugin-electron-builder لإكماله، بعد الانتهاء، ما عليك سوى تشغيل npm للإلكترون: لبدء التطبيق مباشرة، ليست هناك حاجة لبدء vue أولاً، ثم بداية الإلكترون.
في الخلفية.js، أضف الإطار: false إلى الخيارات في BrowserWindow الجديد.
عند النقر على الحدث، يتم استخدام عملية العرض ipcRenderer لاستدعاء العملية الرئيسية ipcMain. تستقبل العملية الرئيسية الحدث، وتفتح مربع اختيار الملف، وتحدد الملف/المجلد، وتضبطه في الخيار، وتكون وظيفة رد الاتصال هي مسار الملف، ويستخدم علامات jsmediatags لمعالجة معلومات الموسيقى؛
لا يمكن لعلامة الصوت تشغيل الصوت المحلي بسبب قيود المتصفح. يتعين عليك تعيين webSecurity على false في BrowserWindow الجديد، أو إضافة السمة crossOrigin إلى true في HTML إلى علامة الصوت.
ابحث عن ملف .lrc بنفس الاسم في نفس الدليل، واستخدم الوحدة النمطية fs لقراءة الملف، ثم قم بإجراء معالجة البيانات
في علبة الدرج الجديدة في main.js، ما عليك سوى تعيين الأحداث المقابلة.
هناك العديد من الموارد التي تكون بطيئة نسبيًا في التنزيل من github. يمكنك التحقق من رسالة الخطأ للعثور على عنوان المورد المقابل وتنزيله ووضعه في المجلد C:UsersAdministratorAppDataLocalelectronCache. دليل؛
إنها ليست مشكلة في الموارد، احذف Node_modules وأعد npm i؛
قم بتحميل المشروع إلى جيثب وحزمه
وضع الإزالة: السجل ضمن جهاز التوجيه vue؛
تحقق مما إذا كان كل مسار في المشروع صحيحًا وباللغة الإنجليزية
يتم وضع الرمز في دليل البناء/الأيقونات، بحجم لا يقل عن 256 × 256، png/icns/ico، ويتم إنشاء عنوان الرمز عبر الإنترنت: PNG إلى ICNS |
لا توجد مشكلة في بيئة التطوير، لكن الأيقونة تختفي بعد التغليف. ضع الرمز في دليل ملف publick، واستخدم path.join(__static, 'favicon.ico')
, __static هو الدليل الثابت
استخدم تكوين المكون الإضافي هذا أو قم بتكوينه في 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" // 图标名称
}
}
}
}
}