移动应用开发——“音乐”小程序项目
“音乐”小程序项目开发实战
实验目的
①掌握swiper组件的使用
②掌握scroll-view组件的使用
③掌握image组件的使用
④掌握slider组件的使用
⑤掌握音频API的使用
实验环境
①Windows 10系统；
②微信开发者工具；
③Nodejs；
④git-bash软件；
项目初始化
1、开发者工具创建空白项目
2、查看显示效果
任务1标签页切换
1、编写页面结构和样式
（1）音乐小程序基础页面和样式:
（2）测试页面info.wxml、page.wxml、play.wxml 文件:
（3）查看显示效果
2、实现标签页切换
（1）在pages/index/index.wxml文件的tab区域，为3个tab-utem绑定事件
（2）修改content区域，为swiper组件的current属性绑定变量item
（3）在page/index/index.js文件中，将item和changeItem增加到代码中
（4）给当前活跃的data-item增加active样式
（5）在pages/index/index.wxss中编写active样式
（6）为swiper组件绑定改变事件
（7）在pages/index/index,js文件中，在页面数据中增加tab变量
（8）编写changeTab事件处理函数
任务2音乐推荐
1、内容区域滚动
（1）在pages/index/info.wxml中，编写音乐推荐标签页的代码，实现上下滚动
（2）在pages/index/index.wxss中编写样式
（3）查看效果
2、轮播图
（1）在pages/index/info.wxml文件中，编写轮播图的页面结构
（2）在page/index/index.wxss中编写样式
（3）查看效果
3、功能按钮
（1）在pages/index/info.wxml文件中，编写功能按钮的页面结构
（2）在page/index/index.wxss中编写样式
（3）查看效果
4、热门音乐
（1）在pages/index/info.wxml文件中，编写热门音乐的页面结构
（2）在page/index/index.wxss中编写样式
（3）查看效果
5、音乐推荐整体效果图
任务3 播放器
1、搭建本地音乐服务器
搭建本地应用服务器没有server-index模块，进行搭建server-index模块
搭建本地应用服务器没有server-multiparty模块，进行搭建server-multiparty模块,并启动服务
在htdocs文件夹中放入音频
2、定义基础数据
（1）在pages/index/index.js定义基础数据，包括音乐的信息和播放路径，并在data中定义属性
3、实现音乐播放功能
（1）实现音乐控制，在pages/index/index.js编写代码实现自动选择列表中的第一首歌
（2）在data中定义一些状态属性，来记录音乐的比方状态，播放未知等
（3）底部播放器显示播放曲目，在pages/index/index.wxml编写代码
（4）在pages/index/index.wxss文件中编写播放器样式
（5）利用条件渲染来显示不同的按钮
（6）在pages/index/index.js中编写事件处理函数play()和pause()
（7）实现单击“下一曲”按钮进行换曲
（8）在pages/index/index.js中编写事件处理函数next()
（9）查看效果
4、编写播放器页面
（1）在pages/index/play .wxml编写播放器页面结构代码
（2）在pages/index/play .wxml编写播放器页面样式代码:pages/index/play.wxss
（3）查看效果
（4）在音乐列表中获取到当前音乐专辑的src路径，绑定到页面image组件中
（5）在pages/index/index.wxss文件中编写样式
（6）查看效果
5、控制播放进度
（1）在pages/index/play.wxml编写播放器页面下方的滑块结构
（2）在pages/index/index.wxss编写样式
（3）查看结果
（4）在pages/index/index.js文件中控制进度条的进度和时间显示
（5）在slider组件上绑定bindcchange事件，实现滑动进度条调节音乐播放进度
（6）在pages/index/index.js文件中编写sliderchange函数
（7）查看效果
6、播放器整体页面效果图
任务4 播放列表
1、编写页面结构和样式
（1）在pages/index/playlist.wxml文件中编写页面结构
（2）在pages/index/index.wxss文件编写播放列表页面样式
2、实现换曲功能
（1）在pages/index/index.js实现换曲功能
3、查看播放列表整体效果
源码下载链接：https://pan.baidu.com/s/17Ni9N_xtkcCuUfwC5YBlJA
提取码：czxx
移动应用开发——“音乐”小程序项目相关推荐
- 微信小程序开发 | 音乐小程序项目
音乐小程序项目 3.1 开发前的准备 3.1.1 项目展示 3.1.2 项目分析 3.1.3 项目初始化 3.2 [任务1]标签页切换 3.2.1 任务分析 3.2.2 前导知识 3.2.3 编写页面 ...
- 微信小程序 第三章 “音乐”小程序项目
"音乐"小程序项目 学习目标 开发前准备 项目展示 项目分析 页面结构 目录结构 标签页切换--index页面 音乐推荐 播放器页面 播放列表 逻辑文件index.js data数 ...
- 使用mpvue开发微信小程序——音乐小程序项目源码分享
文章最后更新(2019-04-06) github最后更新(2019-04-09) 前言: 最近小组有个微信小程序分享的环节,于是在业余时间使用mpvue框架写了个音乐小程序,时间有限,之后有时间会继 ...
- 1.3 “音乐”小程序项目
音乐小程序 音乐小程序的页面由上中下三个区域组成,分别将它们命名为:tab.content和player tab区域:用于显示 "音乐推荐" "播放器"和 &q ...
- 移动开发——音乐小程序服务器搭建
因为音频视频文件格式会比较大,开发小程序需要将这些文件放在服务器端,所以需要用node.js搭建本地服务器 1.进入命令,与项目文件mymusic处建立新的文件夹mymusic-sever 在路径栏 ...
- 使用mpvue开发微信小程序——原生微信小程序、mpvue、wepy对比
mpvue是什么?为什么使用它? 目前小程序开发主要有三种形式:原生.wepy.mpvue,其中wepy是腾讯的开源项目:mpvue是美团开源的一个开发小程序的框架,全称mini program vu ...
- 小程序项目实战(一)
项目名称:音乐小程序项目 讲师:coderwhy 学习链接:小程序音乐项目开发实战-大神coderwhy新课-学习视频教程-腾讯课堂课程简介https://ke.qq.com/course/41622 ...
- uniapp开发微信小程序保存文件方案总结
uniapp开发微信小程序保存文件方案总结 1.需求背景 最近正使用uniapp开发微信小程序项目,现需要保存文件. 解决方案 // 方法如下,filePath:文件地址:uni.authorize( ...
- miniprogram-to-uniapp使用指南（各种小程序项目转换为uni-app项目）
miniprogram-to-uniapp使用指南(各种小程序项目转换为uni-app项目) 工具现在支持npm全局库.HBuilderX插件两种方式使用,任君选择,HBuilderX插件地址:htt ...
最新文章
- PON：EPON/GPON/10G PON/XG-PON/NG-PON2—Vecloud微云
- 【c++】10. memset()、【strcpy_s()、memcpy_s()】、【strcpy()，memcpy()】
- STM32开发 -- 系统软复位
- sql 系统 存储过程的使用方法 转载
- 一个简单的现代化公司域名使用规律预测及生成工具
- linux grep egrep fgrep bash条件判断 bash测试 if 条件判断
- php memcached存储对象,用于会话存储的Memcached或MySQL – PHP
- python判断手机号码是否正确_python检测手机号码是否合法
- 文末彩蛋 | 这个 Request URL 长得好不一样
- 初识html5-当当网图书分类页面,html+css静态页面当当网案例
- linux数字对应的字母,Linux中的权限表示:字母表示和数字表示
- 基于Zookeeper的分布式锁
- 后端使用SpringBoot和Jwt工具与Redis数据库+前端Vue Element Admin实现用户携带token的登录功能案例
- ESP32 学习笔记（二十六）NVS
- Pytorch：NLP 迁移学习、NLP中的标准数据集、NLP中的常用预训练模型、加载和使用预训练模型、huggingface的transfomers微调脚本文件
- 古龙冰洞超级计算机指令,龙族幻想古龙冰洞异闻攻略 古龙冰洞指令介绍
- 【编程初学者】创建自己的开源项目1-创建远程代码仓库
- WSDL简介及WSDL如何查看
- TCP 为什么需要三次握手？
- 代写java Assignment作业、代做UML Class Diagram程序作业、代写代做java程序作业代做McMaster-Carr、代做CS5010 java...