音乐播放器微信小程序

一：学习目标：

1. 掌握swiper组件、scroll-view组件的使用；
2. 掌握image组件的使用；
3. 掌握slider组件的使用；
4. 掌握音频API的使用；

 二：目录：

1. 开发前的准备

1.1 音乐小程序项目展示：

1.1.1：音乐推荐界面展示：

1.1.2：播放器界面展示：

1.1.3：播放列表界面展示：

1.2：项目分析：

①：音乐播放器项目（项目结构图）

• tab导航栏
• content内容区
• player音乐播放控件

 ②：音乐播放器小程序项目主要文件：

• app.js：应用程序的逻辑文件
• app.json：应用程序的配置文件
• pages/index/index1.js：index页面的逻辑文件
• pages/index/index1.json：index页面的配置文件
• pages/index/index1.wxss：index页面的样式文件
• pages/index/index1.wxml：index页面的结构文件
• pages/index/info.wxml：“音乐推荐”标签页的结构文件
• pages/index/play.wxml：“播放器”标签页的结构文件
• pages/index/playlist.wxml：“播放列表”标签页的结构文件
• images：图片文件

 1.3：项目初始化：

开发者工具创建项目：

2. 标签页切换 

2.1：任务分析：

标签页和页面结构图：

2.2 前导知识：

swiper组件常用属性：

可选值	说明	默认
indicator-dots	Boolean	是否显示面板指示点，默认为false
indicator-color	Color	指示点颜色，默认为rgba(0,0,0,.3)
indicator-active-color	Color	当前选中的指示点颜色，默认为#000000
autoplay	Boolean	是否自动切换，默认为false
current	Number	当前所在滑块的index，默认为0
current-item-id	String	当前所在滑块的item-id（不能同时指定current）

interval	Number	自动切换时间间隔（毫秒），默认为5000
duration	Number	滑动动画时长（毫秒），默认为500
circular	Boolean	是否采用衔接滑动，默认为false
vertical	Boolean	滑动方向是否为纵向，默认为false
bindchange	EventHandle	current改变时会触发change事件

swiper组件编写滑动页面结构 index1.wxml（本项目已完成，无此项代码）

③：include主要用途：

• 将代码拆分到多个文件中，可以更方便地查找代码。
• 将代码公共部分抽取出来。通过外部文件引入。

④：编写页面结构和样式-tab导航栏  

 2.3 编写页面结构和样式 ：

①：音乐小程序基础页面和样式：

②：音乐小程序基础页面和样式-tab导航的样式：

 tab导航样式效果：

 2.4：实现标签页切换：

单击导航栏选项卡实现标签页切换（js）：

通过滚动事件切换页面效果（js）：

 效果：

 3. 音乐推荐

3.1 任务分析

音乐推荐页面结构图：