更新记录

1.0.0（2026-07-27） 下载此版本

项目介绍

若依音乐移动端 是基于 uni-app 框架开发的跨平台音乐播放器应用，可同时发布到 H5、App（Android/iOS）和各大小程序平台。

功能特性：

平台兼容性

uni-app(5.0)

若依音乐 - 移动端 App

基于 uni-app + Vue 3 + uview-plus 开发的跨平台音乐播放器

目录

• 项目介绍
• 目录结构
• 技术栈与插件
• 页面说明
• 组件说明
• 接口文档
• 开发与部署
• 设计规范
• 音乐来源免责声明

项目介绍

若依音乐移动端 是基于 uni-app 框架开发的跨平台音乐播放器应用，可同时发布到 H5、App（Android/iOS）和各大小程序平台。

功能特性：

• 🎵 音乐播放：支持在线播放、本地缓存、播放列表管理
• 🔍 智能搜索：歌曲搜索、歌手搜索
• 📊 热门推荐：热门歌曲排行榜
• 🎤 歌手浏览：歌手列表、歌手详情、歌手热门歌曲
• 📂 歌曲分类：按类型/风格分类浏览
• ❤️ 收藏功能：收藏歌曲、取消收藏
• 💬 评论互动：评论、点赞、删除评论
• 📱 多平台支持：H5、App、微信小程序等
• 🎨 精美 UI：Spotify 风格暗色主题设计

目录结构

uniapp-music/
├── src/
│   ├── api/                     # API 接口
│   │   ├── auth.js              # 认证相关接口
│   │   ├── music.js             # 音乐相关接口
│   │   └── home.js              # 首页接口
│   ├── common/                  # 公共模块
│   │   ├── locales/             # 国际化
│   │   │   ├── en.js            # 英文
│   │   │   └── zh.js            # 中文
│   │   ├── styles/              # 样式
│   │   │   └── music-theme.scss # 音乐主题样式
│   │   ├── api.js               # 请求封装
│   │   ├── config.js            # 基础配置
│   │   ├── mixin.js             # 混入
│   │   └── props.js             # 组件属性定义
│   ├── components/              # 公共组件
│   │   ├── music/
│   │   │   └── MiniPlayer.vue   # 迷你播放器
│   │   ├── page-nav/
│   │   │   └── page-nav.vue     # 页面导航组件
│   │   └── PlayListPopup.vue    # 播放列表弹窗
│   ├── pages/                   # 页面
│   │   ├── home/                # 首页
│   │   │   └── home.vue
│   │   ├── song-detail/         # 歌曲详情
│   │   │   └── song-detail.vue
│   │   ├── search/              # 搜索
│   │   │   └── index.vue
│   │   ├── singer/              # 歌手
│   │   │   ├── list.vue
│   │   │   └── detail.vue
│   │   ├── hot-music/           # 热门音乐
│   │   │   └── hot-music.vue
│   │   ├── song-type/           # 歌曲分类
│   │   │   ├── song-type.vue
│   │   │   └── type-detail.vue
│   │   ├── login/               # 登录
│   │   │   ├── index.vue
│   │   │   └── code.vue
│   │   ├── mine/                # 个人中心
│   │   │   ├── mine.vue
│   │   │   ├── profile-edit.vue
│   │   │   ├── my-collection.vue
│   │   │   ├── my-comment.vue
│   │   │   └── tour-record.vue
│   │   └── example/             # 示例页面
│   ├── store/                   # 状态管理
│   │   ├── index.js             # Pinia Store
│   │   └── player.js            # 播放器状态
│   ├── static/                  # 静态资源
│   │   ├── images/              # 图片资源
│   │   │   ├── tabbar/          # TabBar 图标
│   │   │   ├── avatar.png       # 默认头像
│   │   │   └── icon_*.png       # 播放器图标
│   │   └── uview/               # uview 静态资源
│   ├── uni_modules/             # uni 模块
│   │   └── uview-plus/          # uview-plus 组件库
│   ├── util/                    # 工具函数
│   │   ├── request/
│   │   │   ├── index.js         # 请求封装
│   │   │   └── interceptors.js  # 拦截器
│   │   └── disablePullToRefresh.js
│   ├── utils/
│   │   └── app-auth.js          # 认证工具
│   ├── App.vue                  # 应用根组件
│   ├── main.ts                  # 应用入口
│   ├── pages.json               # 页面配置
│   ├── manifest.json            # 应用配置
│   ├── theme.json               # 主题配置
│   └── uni.scss                 # 全局 SCSS 变量
├── DESIGN.md                    # 设计规范文档
├── AGENTS.md                    # AI Agent 指南
├── vite.config.ts               # Vite 配置
├── tsconfig.json                # TypeScript 配置
├── package.json                 # 依赖配置
└── index.html                   # HTML 入口

技术栈与插件

核心框架

主要依赖

开发依赖

页面说明

主要页面

用户中心

TabBar

组件说明

业务组件

uview-plus 组件

uview-plus 提供了丰富的 UI 组件，已通过 easycom 自动注册，可直接使用：

<template>
    <up-button text="按钮"></up-button>
    <up-input v-model="value" placeholder="请输入"></up-input>
    <up-image :src="imageUrl"></up-image>
    <up-icon name="home"></up-icon>
</template>

常用组件：

Pinia Store

接口文档

本应用对接后端 ruoyi-app 服务，完整的接口文档请参考：

• 📄 移动端接口文档
• 📄 管理端接口文档

API 基础配置

// src/common/config.js
export default {
  baseUrl: 'http://localhost:8090',  // 开发环境
  // baseUrl: 'https://www.xz-music.online/prod-app',  // 生产环境
}

接口模块说明

认证接口

音乐接口

互动接口

播放列表接口

用户中心接口

文件上传接口

开发与部署

环境要求

• Node.js >= 16
• npm >= 8 或 pnpm >= 7

安装依赖

# 使用 npm
npm install

# 或使用 pnpm（推荐）
pnpm install

本地开发

# H5 模式
npm run dev:h5

# App 模式（需 HBuilderX）
npm run dev:app

# 微信小程序
npm run dev:mp-weixin

# 支付宝小程序
npm run dev:mp-alipay

# 百度小程序
npm run dev:mp-baidu

构建发布

# 构建 H5
npm run build:h5

# 构建 App Android
npm run build:app-android

# 构建 App iOS
npm run build:app-ios

# 构建微信小程序
npm run build:mp-weixin

# 构建支付宝小程序
npm run build:mp-alipay

# 构建百度小程序
npm run build:mp-baidu

配置说明

编辑 src/common/config.js：

export default {
  baseUrl: 'http://localhost:8090',  // 后端 API 地址
}

编辑 src/pages.json 配置页面路由和 TabBar。

编辑 src/manifest.json 配置应用信息（名称、图标、版本等）。

设计规范

本项目采用 Spotify 风格暗色主题设计，详细规范请参考 DESIGN.md。

核心设计原则

• 🎨 暗色沉浸主题：近黑色调 #121212 ~ #1f1f1f
• 🟢 品牌绿色：#1ed760 作为主色调
• ⚫ 内容优先：UI 隐入背景，让专辑封面成为色彩主体
• 🎯 触控优化：圆角按钮、圆形播放控制
• 📱 移动端优先：针对触摸操作优化

颜色规范

音乐来源免责声明

本项目（若依音乐移动端）仅为学习与交流目的而创建，项目中所使用的音乐资源、歌词、封面图片等素材，并非用于商业用途，也不以任何形式进行传播和售卖。

声明事项

1. 音乐资源来源：本应用展示的音乐内容、歌手信息、歌曲数据等，均来源于公开互联网平台（如网易云音乐、QQ音乐、酷狗音乐、虾米音乐等），仅作技术展示演示之用。

2. 版权归属：所有音乐作品的版权均归其原始创作者/版权所有人所有。本项目不持有任何音乐资源的版权。

3. 非商业用途：本项目严禁用于任何商业目的，包括但不限于：

   • 不得用于盈利性运营
   • 不得用于二次售卖
   • 不得用于广告宣传
   • 不得用于任何违反法律法规的用途

4. 免责范围：因使用本项目或其中资源所产生的任何直接或间接后果（包括但不限于版权纠纷、法律诉讼等），项目作者不承担任何责任。

5. 删除请求：如任何版权所有者认为本项目中的内容侵犯了其权益，请联系我们，我们将在收到通知后 7 个工作日内 处理。

6. 用户责任：使用者应自行承担使用本项目内容的一切责任，遵守相关法律法规，尊重原创作者的知识产权。

开源协议

本项目基于 MIT License 开源协议，使用者可自由使用、修改、分发，但需保留版权声明。

基于 uni-app + uview-plus 框架开发