微信小程序开发之——音乐小程序-项目说明
一 项目展示
二 项目结构
2.1 项目说明
- 音乐推荐：用于向用户推荐一些热门的音乐
- 播放器：用于显示当前播放的时间和进度，用户可以跳转进度
- 播放列表：用于显示当前播放的曲目列表，用户可以进行曲目切换
2.2 页面结构
小程序的页面由上、中、下三个区域组成。为了更好地描述这3个区域，下面将它们分别命名为tab、content和player
- tab区域：用于显示显示"音乐播放"、“播放器”、"播放列表"这3个标签页的标题。如果当前位于某个标签页下，该标签页的标题文字就会显示为红色，并且标题文字下方的线条会显示为红色，而其他标签页的文字和线条都显示为白色
- content区域：通过左右滑动，可以实现标签页的切换
- player区域：用于显示当前播放的音乐信息，并且提供了3个按钮，功能依次为"打开播放列表"、"播放/暂停"和切换到下一曲
2.3 目录结构
目录结构
| 路径 | 说明 |
|---|---|
| app.js | 应用程序的逻辑文件 |
| app.json | 应用程序的配置文件 |
| pages/index/index.js | index页面的逻辑文件 |
| pages/index/index.json | index页面的配置文件 |
| pages/index/index.wxss | index页面的样式文件 |
| pages/index/wxml | index页面的结构文件 |
| pages/index/info.wxml | "音乐推荐"标签页的结构文件 |
| pages/index/play.wxml | "播放器"标签页的结构文件 |
| pages/index/playlist.wxml | "播放列表"标签页结构文件 |
| images | 图片文件 |
说明
- 上表实际只有一个页面，即pages/index/index，wxml结构被拆分成了4个文件，分别是index.wxml、info.wxml、play.wxml和playlist.wxml，整体页面结构代码在index.wxml中编写
- content区域使用了标签页，而不同的标签页对应不同的布局结构，所以拆分到了3个wxml文件中，从而避免一个页面的嵌套层级过多，导致代码难易阅读和维护
微信小程序开发之——音乐小程序-项目说明相关推荐
- 小程序开发教程、小程序资讯、小程序demo、小程序实战等合揖（7月19日更新）
7月19日微信小程序联盟更新的小程序开发教程.小程序资讯.小程序demo.小程序实战内容合揖如下: 小程序资讯与小程序教程 一张图带你看懂小程序发展蓝皮书 2017-07-19 微信小程序开发问答&l ...
- 小程序开发教程、小程序资讯、小程序demo、小程序实战等合揖（7月19日更新）...
2019独角兽企业重金招聘Python工程师标准>>> 7月19日微信小程序联盟更新的小程序开发教程.小程序资讯.小程序demo.小程序实战内容合揖如下: #小程序资讯与小程序教程 ...
- wap六感程序二次开发_Cscms v4.0 二次开发y2002音乐网站程序
Cscms v4.0 二次开发y2002音乐网站程序 源码简介: 修复了多处问题,比网上流传的版本要完整很多. 程序包括pc+wap,页面功能和原y2002基本一样. 程序比较完整了,但还是会有bug ...
- 微信小程序项目实战篇——基于WYY音乐真实接口开发的音乐小程序
文章目录 一.项目简介 二.项目结构 三.开发工具 四.项目截图 五.项目地址 六.部分代码 七.项目运行 八.特别声明 一.项目简介 此小程序以网易云音乐为原型进行项目构建,使用网易云音乐真实API ...
- 微信小程序开发实战9_3 小程序URL Scheme
为了微信小程序的推广,微信提供了多种小程序入口方式,比如在公众号中可以将已经关联过的小程序的页面放置到自定义菜单中,用户单击后就可以打开小程序的相关页面:或者是给用户发送公众号模板消息,用户点击收到的 ...
- 微信小程序开发-电影影评小程序
微信小程序电影影评小程序开发步骤: 这是博主的项目包含的文件截图: 首先如图建立文件夹和page页面 然后app.json页面更新代码如下: {"pages": ["pa ...
- 微信小程序详细图文教程-10分钟完成微信小程序开发部署发布 小程序趟过的坑，你遇到几个？？
很多朋友都认为微信小程序申请.部署.发布很难,需要很长时间. 实际上,微信和腾讯云同是腾讯产品,已经提供了10分钟(根据准备资源情况,已完成小程序申请认证)完成小程序开发.部署.发布的方式.当然,实现 ...
- 做一个微信小程序给TA——程序猿小白的情人节礼物（微信小程序入门——一文学会小程序开发到发布小程序的全过程）
# 情人节 可送给女朋友 的礼物,或者作为两人的纪念 # 效果展示:微信搜索 "王美美与曾小帅" 小程序即可查看效果 # 微信小程序入门--使用免费后端云(Bmod)搭建留言板 ...
- 微信小程序开发-视频多大小程序就会缓存多大，导致小程序内存不足自动闪退的问题解决方法
微信小程序开发- 一开始添加的视频是mp4 格式的,视频多大微信小程序就会缓存多大, 但是我如果直接在微信聊天打开视频链接就不会,缓存就很少. 比如我有个视频1G, 把它放到腾讯云对象存储,把视频链接 ...
最新文章
- 编译报错field has incomplete type
- linux网卡绑定lacp,服务器网卡绑定为LACP 802.3ad，交换机是应该配置链路聚合吗？...
- 【C/C++多线程编程之九】pthread读写锁
- 美女学霸直博中科院，本科武大王者全国16强，妥妥现实版“爽文女主”！
- 腾讯云服务器CentOS安装JDK+Tomcat+MySQL详细步骤（以及遇到的各种坑）
- mysql讀取sql_MySQL数据库之python json及mysql读取json文件存sql等问题
- Win10下安装Intel Visual Fortran2019具体步骤及初始调试过程。
- VARCHART XGantt 甘特图用程序应该如何交付
- mac java环境变量验证_Mac系统 JAVA环境变量配置
- 基于C#实现与新大陆扫码枪通信
- Python的5大就业方向，学会一个都是赚
- 省-市-区三级联动选择地址 + 地图定位(高德api定位获取位置信息)，互相联动显示
- OpenCV训练分类器制作xml文档
- 一文看完计算机基础知识总结
- 我的世界匠魂钢怎么做
- Python杀死了Excel
- StopWatch计时器
- java电脑类_计算机类在Java中的设计于实现码
- hdu-5015-233 Matrix-矩阵
- 【论文翻译】Clustering by Passing Messages Between Data Points