微信小程序开发 | 音乐小程序项目
音乐小程序项目
- 3.1 开发前的准备
- 3.1.1 项目展示
- 3.1.2 项目分析
- 3.1.3 项目初始化
- 3.2 【任务1】标签页切换
- 3.2.1 任务分析
- 3.2.2 前导知识
- 3.2.3 编写页面结构和样式
- 3.2.4 实现标签页切换
- 3.3 【任务2】音乐推荐
- 3.3.1 任务分析
- 3.3.2 前导知识
- 3.3.3 内容区域滚动
- 3.3.4 轮播图
- 3.3.5 功能按钮
- 3.3.6 热门音乐
- 3.4 【任务3】播放器
- 3.4.1 任务分析
- 3.4.2 前导知识
- 3.4.3 定义基础数据
- 3.4.4 实现音乐播放功能
- 3.4.5 编写播放器页面
- 3.4.6 控制播放进度
- 3.5 【任务4】播放器列表
- 3.5.1 任务分析
- 3.5.2 编写页面结构和样式
- 3.5.3实现换曲功能
- 总结
3.1 开发前的准备
3.1.1 项目展示
音乐小程序项目效果展示：
3.1.2 项目分析
音乐小程序项目页面结构图：
- tab导航栏
- content内容区
- player音乐播放控件
音乐小程序项目目录结构：
3.1.3 项目初始化
开发者工具创建空白项目：
3.2 【任务1】标签页切换
3.2.1 任务分析
标签页和页面（info.wxml、play.wxml、palylist.wxml）结构图：
3.2.2 前导知识
swiper组件编写滑动页面结构：
swiper组件常用属性：
swiper组件编写滑动页面结构：
include主要用途：
- 将代码拆分到多个文件中，可以更方便地查找代码。
- 将代码公共部分抽取出来。通过外部文件引入。
3.2.3 编写页面结构和样式
音乐小程序基础页面和样式：
测试页面info.wxml、page.wxml、play.wxml文件：
3.2.4 实现标签页切换
单击导航栏选项卡实现标签页切换：
通过滚动事件切换页面效果：
3.3 【任务2】音乐推荐
3.3.1 任务分析
音乐推荐页面结构图：
3.3.2 前导知识
scroll-view组件的属性及说明：
scroll-view组件事件对象：
scroll-view组件事件对象参数分析：
scrollLeft：横向滚动条左侧到视图左边的距离。
scrollTop：纵向滚动条上端到视图顶部的距离。
scrollHeight：纵向滚动条在Y轴上最大滚动距离。
scrollWidth：横向滚动条在X轴上最大的滚动距离。
deltaX：横向滚动条的滚动状态。
deltaY：纵向滚动条的滚动状态。
image组件属性及说明：
image组件缩放模式：
image组件9种裁剪模式：
image组件缩放模式和裁剪模式测试：
3.3.3 内容区域滚动
scroll-view组件：
3.3.4 轮播图
swiper组件实现轮播图：
3.3.5 功能按钮
flex布局实现功能按钮：
3.3.6 热门音乐
flex布局实现页面布局：
3.4 【任务3】播放器
3.4.1 任务分析
播放器标签页结构图：
播放器的具体功能进行分析：
音乐信息：显示当前播放曲目的标题和艺术家。
专辑封面：当音乐播放时，专辑封面会顺时针旋转。
播放进度：显示播放进度，调节音乐进度。
3.4.2 前导知识
audioCtx对象声明的方式：
音频API接口的属性及说明：
音频API接口的方法及说明：
innerAudioContext案例使用：
slider组件属性及说明：
slider组件的使用：
3.4.3 定义基础数据
音乐播放列表和音乐状态数据：
3.4.4 实现音乐播放功能
音乐播放逻辑代码：
底部播放器的结构代码：
底部播放器的样式代码：
底部播放器暂停/播放按钮控制歌曲：
实现播放器切换下一曲歌曲：
3.4.5 编写播放器页面
播放器页面结构代码：
播放器页面样式代码：
通过CSS3动画实现海报的旋转功能：
通过CSS3动画实现海报的旋转功能：
3.4.6 控制播放进度
播放器页面下方的滑块结构：
播放器页面下方的滑块样式：
显示音乐的播放进度：
控制进度条的长度控制歌曲播放进度：
3.5 【任务4】播放器列表
3.5.1 任务分析
控制进度条的长度控制歌曲播放进度：
3.5.2 编写页面结构和样式
控制进度条的长度控制歌曲播放进度：
控制进度条的长度控制歌曲播放进度：
3.5.3实现换曲功能
实现换曲功能：
总结
本章讲解了音乐小程序项目的完整开发流程，其开发步骤包括页面结构的分析、样式的设计、组件的运用等。通过本章的学习，读者能够掌握小程序的基本交互逻辑的开发，能够运用API来实现项目中的特定功能，学会解决开发过程中常见的问题。
微信小程序开发 | 音乐小程序项目相关推荐
- 微信小程序开发(十)小程序支付-查询退款
应用场景 提交退款申请后,通过调用该接口查询退款状态.退款有一定延时,用零钱支付的退款20分钟内到账,银行卡支付的退款3个工作日后重新查询退款状态. 接口说明 这里退款还是根据商户订单号-out_tr ...
- 小程序开发特辑—小程序申请及开发环境搭建
互联网巨头们都热衷于搭建平台,希望能够打造自己的生态,依靠生态公司开发各种各样的应用来满足用户的需求.这其中涉及到两个比较大的问题:一方面巨头的腿需要足够粗,这样生态公司才愿意花时间和精力在这些平 ...
- 移动应用开发——“音乐”小程序项目
"音乐"小程序项目开发实战 实验目的 ①掌握swiper组件的使用 ②掌握scroll-view组件的使用 ③掌握image组件的使用 ④掌握slider组件的使用 ⑤掌握音频AP ...
- 微信小程序开发尚学堂 介绍 项目结构 组件 喧嚷 事件 模板
一.微信小程序介绍 1. 微信小程序介绍 微信小程序,简称小程序,是一种不需要下载安装即可使用的应用,它实现了应用"触手可及"的梦想,用户扫一扫或搜一下即可打开应用. 说明: 小程 ...
- 微信小程序开发制作 | 小程序开发者工具功能介绍
小程序开发者工具是微信官方提供的用于开发和调试小程序的工具.它支持 Windows 和 Mac 两种操作系统,并提供了许多实用的功能,使得小程序开发者能够快速地开发和调试小程序. 下面是小程序开发者工 ...
- 微信小程序开发拼图小游戏
闲来无事,自己用微信小程序开发了一个拼图小游戏玩,大概效果就是这样的: 大概效果就是这样,感兴趣的小伙伴可以看一下,需要代码请留言自己的微信.
- 微信公众号开发和小程序开发
一.简介 公众号开发,需要的后端技术,是把一个后台服务注册到公众号,这样用户通过微信发给公众号的消息,都经过微信转发到后台服务了,这个后台服务要在5秒内响应,如果没有响应则触发重试机制,重试3次没有响 ...
- 微信小程序开发-校园网小程序开发步骤
动手撸一个校园网微信小程序: 高考完毕,想必广大学子和家长们都在忙着查询各所高校的信息,刚好上手微信小程序,当练手也当为自己的学校做点宣传,便当即撸了一个校园网微信小程序. 效果预览 源码地址: Gi ...
- 微信小程序开发——修改小程序显示名称
修改小程序显示名称 在小程序的全局变量设置文件(app.json)里面 "pages":["pages/cal/cal","pages/logs/lo ...
最新文章
- 微服务小范围发布影响小
- 互联网金融产品做第三方支付平台托管需要注意什么？
- 垃圾自动分拣系统python代码_Robot recycling 垃圾分拣机器人
- 化工热力学 第二章（流体的 p - V - T 关系）
- 数据结构Java06【赫夫曼树、概述、原理分析、代码实现(数据压缩、创建编码表、解码、压缩文件、解压文件)】
- OpenCV 凸包Convex Hull
- Oracle plsql 月历
- 基于Hosted WebCore 方式部署Web Role
- Ubuntu默认防火墙UFW命令大全
- 自建RssHub本地服务
- youtube-dl 环境搭建 使用
- 将某个GitLab上的项目同步到另一个GitLab
- 【GNN报告】北邮石川组
- 讲讲React中的State和Props
- echart 折线图 ---- 坐标轴、网格、折线配置
- 志高扫地机器人好用吗_扫地机器人哪个好用?这几款用过的人都有很高的评价...
- 使用IDL显示DICOM文件的信息
- 大数据技术有哪些 应该重点学哪些知识
- Spring源码深入阅读AnnotationConfigApplicationContext
- 什么叫做副作用的函数