# MiniMusicPlayer

**Repository Path**: NingZY08/mini-program-player

## Basic Information

- **Project Name**: MiniMusicPlayer
- **Description**: 微信小程序音乐播放器开源项目，助力开发者快速搭建音乐应用。
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2025-10-19
- **Last Updated**: 2026-01-04

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 微信小程序音乐播放器

一个功能完整的微信小程序音乐播放器，具有音乐推荐、播放器、播放列表等核心功能。

## 🎵 功能特性

### 核心功能
- **音乐播放**：支持在线音乐播放、暂停、切换歌曲
- **播放控制**：上一曲、下一曲、播放进度调节
- **播放列表**：显示所有歌曲列表，支持点击切换
- **音乐推荐**：推荐歌曲展示和分类浏览
- **底部播放器**：全局迷你播放器，实时显示当前播放状态

### 界面设计
- **三个主要页面**：
  - 音乐推荐页面：轮播图、功能入口、推荐歌曲
  - 播放器页面：专辑封面、歌曲信息、播放进度
  - 播放列表页面：歌曲列表、播放状态显示
- **深色主题**：采用黑色背景的现代化设计
- **动画效果**：专辑封面旋转动画、标签页切换动画

### 技术特性
- 使用微信小程序原生开发
- 支持音频播放的完整生命周期管理
- 响应式设计，适配不同屏幕尺寸
- 组件化开发，代码结构清晰

## 📱 项目截图

### 主要界面
- 音乐推荐页：展示轮播图、功能入口和推荐歌曲
- 播放器页：显示专辑封面、歌曲信息和播放控制
- 播放列表页：展示所有可播放的歌曲

### 底部播放器
- 实时显示当前播放歌曲信息
- 快捷播放控制按钮
- 播放/暂停状态切换

## 🎶 内置歌曲

项目预置了以下测试歌曲：
1. 月亮代表我的心 - 邓丽君
2. 再回首 - 罗时丰
3. 孤单的人 - 海来阿木
4. Love9 - 江辰

## 📁 项目结构

```
├── app.js                 # 小程序入口文件
├── app.json               # 小程序全局配置
├── app.wxss               # 小程序全局样式
├── pages/                 # 页面目录
│   └── index/             # 首页目录
│       ├── index.js       # 首页逻辑（音频控制、数据管理）
│       ├── index.json     # 首页配置
│       ├── index.wxml     # 首页结构（标签页、内容区、底部播放器）
│       ├── index.wxss     # 首页样式
│       ├── player.wxml    # 播放器页面组件
│       ├── playlist.wxml  # 播放列表页面组件
│       └── recommend.wxml # 推荐页面组件
├── image/                 # 图片资源目录
│   ├── 01.png~06.png      # 播放控制图标
│   ├── 02stop.png         # 暂停图标
│   ├── banner.jpg         # 轮播图
│   ├── cover.jpg          # 专辑封面
│   └── test.jpg           # 测试图片
├── project.config.json    # 项目配置文件
├── .eslintrc.js          # ESLint配置
├── .gitignore            # Git忽略文件
├── sitemap.json          # 小程序搜索配置
```

## 🚀 快速开始

### 环境要求
- 微信开发者工具
- Node.js（可选，用于开发调试）

### 安装步骤
1. 克隆或下载项目代码
2. 打开微信开发者工具
3. 导入项目，选择项目根目录
4. 配置AppID（可在project.config.json中修改）
5. 点击编译运行

### 配置说明
- 在 `app.json` 中配置页面路由和窗口样式
- 在 `project.config.json` 中配置项目ID和编译选项
- 音频资源URL可在 `pages/index/index.js` 的 `dataList` 中修改

## 🔧 技术实现

### 音频播放
- 使用 `wx.createInnerAudioContext()` 创建音频上下文
- 监听播放、暂停、结束、进度更新等事件
- 实现播放进度控制和时间格式化

### 页面切换
- 使用 `swiper` 组件实现页面滑动切换
- 通过 `include` 引入子页面组件
- 标签页与内容区域联动

### 状态管理
- 使用 `data` 管理播放状态、歌曲列表、当前播放信息
- 通过 `setData` 更新页面状态
- 实现播放状态的全局同步

## 🎨 界面设计

### 色彩方案
- 主背景：#17181a（深黑色）
- 强调色：#C25b5b（红色）
- 文字色：#ccc（浅灰色）
- 播放器背景：#222（深灰色）

### 布局特点
- Flexbox布局，自适应屏幕
- 底部固定播放器，内容区域自适应
- 响应式设计，支持不同屏幕尺寸

## Gitee 仓库设置指南

### 手动创建仓库（推荐）

#### 第一步：在 Gitee 上创建远程仓库

1. 打开浏览器，访问 [https://gitee.com](https://gitee.com)
2. 如果您还没有账户，请先注册一个新账户
3. 登录您的 Gitee 账户
4. 点击右上角的 "+" 号按钮
5. 从下拉菜单中选择"新建仓库"
6. 填写仓库信息：
   - 仓库名称：`miniprogram-music`
   - 仓库描述：`微信小程序音乐播放器`
   - 选择可见性：公开
   - 分支模型：不需要勾选任何初始化选项（不要勾选 README、.gitignore 等）
7. 点击"创建"按钮

#### 第二步：将本地代码推送到远程仓库

打开终端（命令提示符或 PowerShell），执行以下命令：

```bash
# 进入项目目录
cd f:\WeChatProjects\miniprogram-music

# 添加远程仓库地址（请将 YOUR_USERNAME 替换为您的 Gitee 用户名）
git remote add origin https://gitee.com/YOUR_USERNAME/miniprogram-music.git

# 确保使用 master 分支
git branch -M master

# 推送代码到远程仓库
git push -u origin master

```

## 验证推送结果

推送完成后，刷新 Gitee 仓库页面，您应该能看到所有文件都已经上传成功。

## 📝 开发说明

### 添加新歌曲
在 `pages/index/index.js` 的 `dataList` 数组中添加新的歌曲信息：

```javascript
{
  id: 5,
  title: '新歌曲名',
  singer: '歌手名',
  src: '音频文件URL'
}
```

### 自定义样式
- 修改颜色主题：编辑 `pages/index/index.wxss` 中的颜色值
- 调整布局：修改对应的WXSS文件中的样式
- 更换图标：替换 `image/` 目录下的图片文件

### 注意事项
- 音频文件需要支持跨域访问
- 建议使用HTTPS协议的音频URL
- 在真机调试时注意网络权限配置

## 🤝 贡献指南

欢迎提交Issue和Pull Request来改进这个项目！

### 提交规范
- Bug修复：`fix: 修复播放器进度条问题`
- 新功能：`feat: 添加歌曲收藏功能`
- 文档更新：`docs: 更新README文档`

## 📄 许可证

本项目采用 MIT 许可证，详情请查看 LICENSE 文件。

## 📞 联系方式

如有问题或建议，请通过以下方式联系：
- 提交Issue：[项目Issues页面]
- 邮箱：your-email@example.com

---