# uniapp-vite-vue3-ts-music-app-ui **Repository Path**: zhangweijie333/uniapp-vite-vue3-ts-music-app-ui ## Basic Information - **Project Name**: uniapp-vite-vue3-ts-music-app-ui - **Description**: 基于uniapp+vite+vue3+ts开发的混合音乐music app，后端采用springboot+mybatis+mysql开发，有flutter、react-native、安卓原生、微信小程序、鸿蒙版本，参见个人主页项目，包括底部tab导航,，首页，推荐，音乐圈，我的，搜索页，分类页，播放页，登录，注册，浏览记录，播放记录，收藏，缓存，歌手，音乐排行榜、音乐播放等页面和模块，功能齐全完善 - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 1 - **Created**: 2025-03-19 - **Last Updated**: 2025-03-19 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README 开发者：吴怨吴悔 =============================界面预览（如果无法预览，请查看项目根目录png文件）========================== ![app首页](音乐首页.jpg) ![app首页](音乐推荐.jpg) ![app首页](音乐朋友圈1.jpg) ![app首页](音乐朋友圈2.png) ![app首页](音乐我的1.jpg) ![app首页](音乐我的2.png) ![app首页](音乐播放页.jpg) ![app首页](音乐歌词页.png) ![app首页](音乐歌手页.jpg) ![app首页](音乐搜索列表.png) ![app首页](音乐点赞和评论.png) ![app首页](音乐圈评论.png) ![app首页](音乐收藏列表.png) ![app首页](音乐歌手页.png) ![app首页](音乐歌手专辑页.png) ![app首页](分类歌曲.png) ![app首页](登录.png) ![app首页](用户信息.png) ![app首页](更改用户信息1.png) ![app首页](更改用户信息2.png) ![app首页](更改用户信息3.png) ![app首页](更改用户信息4.png) =============================界面预览（如果无法预览，请查看项目根目录png文件）========================== 使用uni-vue3-vite-ts+pinia+router搭建的音乐混合app 后端接口使用springboot开发，所有音乐数据来自于python爬虫程序，爬取第三方音乐网站数据 后端接口项目和sql语句： https://github.com/wuyuanwuhui99/springboot-app-service https://gitee.com/wuyuanwuhui99/springboot-app-service flutter电影项目参见: github地址：https://github.com/wuyuanwuhui99/flutter-movie-app-ui gitee地址：https://hub.nuaa.cf/wuyuanwuhui99/flutter-movie-app-ui flutter音乐项目参见: github地址：https://github.com/wuyuanwuhui99/flutter-music-app-ui gitee地址：https://hub.nuaa.cf/wuyuanwuhui99/flutter-music-app-ui react native电影参见: github地址：https://github.com/wuyuanwuhui99/react-native-app-ui java安卓原生电影参见： 通用地址：https://github.com/wuyuanwuhui99/android-java-movie-app-ui gitee地址：https://hub.nuaa.cf/wuyuanwuhui99/android-java-movie-app-ui uniapp电影参见： github地址：https://github.com/wuyuanwuhui99/uniapp-vite-vue3-ts-movie-app-ui gitee地址：https://gitee/wuyuanwuhui99/uniapp-vite-vue3-ts-movie-app-ui uniapp音乐项目参见： github地址：https://github.com/wuyuanwuhui99/uniapp-vite-vue3-ts-music-app-ui gitee地址：https://gitee/wuyuanwuhui99/uniapp-vite-vue3-ts-music-app-ui 微信小程序版本参见： 通用地址：https://github.com/wuyuanwuhui99/weixin-movie-app-ui、 国内镜像地址：https://hub.nuaa.cf/wuyuanwuhui99/weixin-movie-app-ui harmony鸿蒙电影参见: github地址：https://github.com/wuyuanwuhui99/Harmony_movie_app_ui gitee地址：https://hub.nuaa.cf/wuyuanwuhui99/Harmony_movie_app_ui harmony鸿蒙音乐项目参见: github地址：https://github.com/wuyuanwuhui99/harmony_music_app_ui gitee地址：https://hub.nuaa.cf/wuyuanwuhui99/harmony_music_app_ui vue在线音乐项目： 通用地址：https://github.com/wuyuanwuhui99/vue-music-app-ui 国内镜像地址：https://hub.nuaa.cf/wuyuanwuhui99/vue-music-app-ui 在线音乐后端项目： 通用地址：https://github.com/wuyuanwuhui99/koa2-music-app-service 国内镜像地址：https://hub.nuaa.cf/wuyuanwuhui99/koa2-music-app-service vue3+ts明日头条项目： 通用地址：https://github.com/wuyuanwuhui99/vue3-ts-toutiao-app-ui 国内镜像地址：https://hub.nuaa.cf/wuyuanwuhui99/vue3-ts-toutiao-app-ui 音乐播放器正在开发中，音乐数据来自于python爬虫程序，爬取酷狗音乐数据，敬请关注 接口和数据请在本地电脑中，暂时没有购买和部署服务器，仅限本地调试，如有需要调试请联系本人启动外网映射 本地调试请把 http://192.168.0.5:5001 改成 http://254a2y1767.qicp.vip 该地址是映射到本人电脑的地址，需要本人电脑开机才能访问，一般在工作日晚上八点半之后或者周末白天会开机 如需了解是否已开机，请用浏览器直接打开该地址：http://254a2y1767.qicp.vip，如出现以下提示，则正常使用 ![外网映射正常访问提示](外网映射正常访问提示.png) 本站所有音乐和图片均来自互联网收集而来，版权归原创者所有，本网站只提供web页面服务，并不提供资源存储，也不参与录制、上传 若本站收录的节目无意侵犯了贵司版权，请联系 联系方式：（微信）wuwenqiang_99、（邮箱）275018723@qq.com ``` uniapp-music-app-ui ├─ .hbuilderx │ └─ launch.json ├─ index.html ├─ package-lock.json ├─ package.json ├─ README.md ├─ shims-uni.d.ts ├─ src │ ├─ api │ │ └─ index.ts │ ├─ App.vue │ ├─ common │ │ ├─ config.ts │ │ ├─ constant.ts │ │ └─ enum.ts │ ├─ components │ │ ├─ AvaterComponent.vue │ │ ├─ CommentComponent.vue │ │ ├─ DialogComponent.vue │ │ ├─ FavoriteDirectoryComponent.vue │ │ ├─ MusicAvaterComponent.vue │ │ ├─ MusicCircleComponent.vue │ │ ├─ MusicClassifyComponent.vue │ │ ├─ MusicClassifyListComponent.vue │ │ ├─ MusicHomeComponent.vue │ │ ├─ MusicMyComponent.vue │ │ ├─ MusicRecommentComponent.vue │ │ ├─ MusicSearchComponent.vue │ │ ├─ MusicSingerComponent.vue │ │ ├─ MusicTitleComponent.vue │ │ ├─ NavigatorTitleComponent.vue │ │ ├─ OptionsDialog copy.vue │ │ └─ OptionsDialog.vue │ ├─ enum │ │ └─ index.ts │ ├─ env.d.ts │ ├─ main.ts │ ├─ manifest.json │ ├─ pages │ │ ├─ AuthorMusicListPage.vue │ │ ├─ ForgetPasswordPage.vue │ │ ├─ LaunchPage.vue │ │ ├─ LoginPage.vue │ │ ├─ MusicAuthorCategoryPage.vue │ │ ├─ MusicCategoryListPage.vue │ │ ├─ MusicCirClePublishPage.vue │ │ ├─ MusicClassifyListComponent.vue │ │ ├─ MusicClassifyListPage.vue │ │ ├─ MusicFavoriteListPage.vue │ │ ├─ MusicIndexPage.vue │ │ ├─ MusicPlayerPage.vue │ │ ├─ MusicSearchPage.vue │ │ ├─ MusicSharePage.vue │ │ ├─ RegisterPage.vue │ │ ├─ ResetPasswordPage.vue │ │ ├─ UpdatePasswordPage.vue │ │ └─ UserPage.vue │ ├─ pages.json │ ├─ routers │ │ └─ index.ts │ ├─ service │ │ └─ index.ts │ ├─ shime-uni.d.ts │ ├─ stores │ │ └─ useStore.ts │ ├─ theme │ │ ├─ color.less │ │ ├─ size.less │ │ └─ style.less │ ├─ types │ │ └─ index.ts │ ├─ uni.scss │ └─ utils │ ├─ HttpUtils.ts │ └─ util.ts ├─ static │ ├─ default_avater.png │ ├─ default_cover.jpg │ ├─ icon_add.png │ ├─ icon_app.png │ ├─ icon_arrow.png │ ├─ icon_avater.png │ ├─ icon_back.png │ ├─ icon_classify.png │ ├─ icon_clear.png │ ├─ icon_close.png │ ├─ icon_collection.png │ ├─ icon_collection_active.png │ ├─ icon_comment.png │ ├─ icon_comment_white.png │ ├─ icon_delete.png │ ├─ icon_detail_play.png │ ├─ icon_down.png │ ├─ icon_edit.png │ ├─ icon_empty_star.png │ ├─ icon_favorite.png │ ├─ icon_favorite_add.png │ ├─ icon_favorite_cover.svg │ ├─ icon_full_star.png │ ├─ icon_half_star.png │ ├─ icon_history.png │ ├─ icon_home.png │ ├─ icon_home_active.png │ ├─ icon_hot.png │ ├─ icon_like.png │ ├─ icon_like_active.png │ ├─ icon_like_white.png │ ├─ icon_logo.png │ ├─ icon_menu_add.png │ ├─ icon_movie.png │ ├─ icon_movie_active.png │ ├─ icon_music.png │ ├─ icon_music_add.png │ ├─ icon_music_circle.png │ ├─ icon_music_circle_active.png │ ├─ icon_music_classics.png │ ├─ icon_music_classify.png │ ├─ icon_music_collect.png │ ├─ icon_music_comments.png │ ├─ icon_music_default_cover.png │ ├─ icon_music_down.png │ ├─ icon_music_like.png │ ├─ icon_music_loop.png │ ├─ icon_music_menu.png │ ├─ icon_music_next.png │ ├─ icon_music_order.png │ ├─ icon_music_play.png │ ├─ icon_music_playing.png │ ├─ icon_music_playing_grey.png │ ├─ icon_music_play_menu.png │ ├─ icon_music_play_white.png │ ├─ icon_music_prev.png │ ├─ icon_music_random.png │ ├─ icon_music_rank.png │ ├─ icon_music_singer.png │ ├─ icon_music_white_menu.png │ ├─ icon_no1.png │ ├─ icon_no2.png │ ├─ icon_no3.png │ ├─ icon_password.png │ ├─ icon_permission.png │ ├─ icon_play.png │ ├─ icon_play_record.png │ ├─ icon_recomment.png │ ├─ icon_recomment_active.png │ ├─ icon_record.png │ ├─ icon_search.png │ ├─ icon_send.png │ ├─ icon_share.png │ ├─ icon_share_music.png │ ├─ icon_talk.png │ ├─ icon_top.png │ ├─ icon_tv.png │ ├─ icon_tv_active.png │ ├─ icon_user.png │ ├─ icon_user_active.png │ └─ logo.png ├─ tsconfig.json ├─ unpackage │ ├─ res │ │ └─ icons │ │ ├─ 1024x1024.png │ │ ├─ 120x120.png │ │ ├─ 144x144.png │ │ ├─ 152x152.png │ │ ├─ 167x167.png │ │ ├─ 180x180.png │ │ ├─ 192x192.png │ │ ├─ 20x20.png │ │ ├─ 29x29.png │ │ ├─ 40x40.png │ │ ├─ 58x58.png │ │ ├─ 60x60.png │ │ ├─ 72x72.png │ │ ├─ 76x76.png │ │ ├─ 80x80.png │ │ ├─ 87x87.png │ │ └─ 96x96.png │ └─ resources │ └─ __UNI__0D01F9F │ └─ www │ ├─ app-config-service.js │ ├─ app-config.js │ ├─ app-service.js │ ├─ app.css │ ├─ assets │ │ ├─ default_avater.f4259db5.png │ │ ├─ default_cover.d3df9517.jpg │ │ ├─ icon_collection_active.e58a0a87.png │ │ ├─ icon_favorite.8f14792a.png │ │ ├─ icon_full_star.06ff4e10.png │ │ ├─ icon_like.b458a743.png │ │ ├─ icon_like_active.b5e321df.png │ │ ├─ icon_music_collect.37256d1e.png │ │ ├─ icon_music_loop.c1732e85.png │ │ ├─ icon_music_order.de7f6bca.png │ │ ├─ icon_music_play.8894f226.png │ │ ├─ icon_music_playing.078c77db.png │ │ ├─ icon_music_playing_grey.ea2c3a08.png │ │ ├─ icon_music_play_white.46465068.png │ │ ├─ icon_music_random.cb2d1974.png │ │ └─ uniicons.89ed7d6d.ttf │ ├─ manifest.json │ ├─ movie │ │ └─ pages │ │ ├─ IndexPage.css │ │ ├─ LaunchPage.css │ │ ├─ MovieDetailPage.css │ │ ├─ MovieLoginPage.css │ │ ├─ MoviePlayPage.css │ │ ├─ MovieRegisterPage.css │ │ ├─ MovieSearchPage.css │ │ └─ MovieUserPage.css │ ├─ music │ │ └─ pages │ │ ├─ AuthorMusicListPage.css │ │ ├─ MusicAuthorCategoryPage.css │ │ ├─ MusicCategoryListPage.css │ │ ├─ MusicCirClePublishPage.css │ │ ├─ MusicClassifyListPage.css │ │ ├─ MusicFavoriteListPage.css │ │ ├─ MusicIndexPage.css │ │ ├─ MusicPlayerPage.css │ │ ├─ MusicSearchPage.css │ │ └─ MusicSharePage.css │ ├─ uni-app-view.umd.js │ ├─ __uniappautomator.js │ ├─ __uniappchooselocation.js │ ├─ __uniapperror.png │ ├─ __uniappopenlocation.js │ ├─ __uniapppicker.js │ ├─ __uniappquill.js │ ├─ __uniappquillimageresize.js │ ├─ __uniappscan.js │ ├─ __uniappsuccess.png │ └─ __uniappview.html ├─ vite.config.ts ├─ yarn.lock ├─ 一键提交到gitee.bat ├─ 一键提交到github.bat ├─ 分类歌曲.png ├─ 外网映射正常访问提示.png ├─ 更改用户信息1.png ├─ 更改用户信息2.png ├─ 更改用户信息3.png ├─ 更改用户信息4.png ├─ 用户信息.png ├─ 登录.png ├─ 音乐分享.png ├─ 音乐圈评论.png ├─ 音乐我的1.jpg ├─ 音乐我的2.png ├─ 音乐推荐.jpg ├─ 音乐搜索列表.png ├─ 音乐播放页.jpg ├─ 音乐播放页.png ├─ 音乐收藏列表.png ├─ 音乐朋友圈1.jpg ├─ 音乐朋友圈2.png ├─ 音乐歌手专辑页.png ├─ 音乐歌手页.jpg ├─ 音乐歌手页.png ├─ 音乐歌词页.png ├─ 音乐点赞和评论.png └─ 音乐首页.jpg ```