小程序底部弹窗css_微信小程序开发之——米瑶云音乐

本文介绍了作者开发的一款微信小程序——米瑶云音乐,涵盖了音乐搜索、播放等功能,但因版权问题无法上线。文章展示了小程序的多个页面设计,如首页、我的主页、歌单、电台、播放页等,详细说明了各页面的功能和交互,包括悬浮窗、搜索联想词、评论等。尽管未能正式发布,作者对此项目感到满意。
摘要由CSDN通过智能技术生成

闲来无事,自己开发了个云音乐小程序???

实现了网易云音乐的搜索、播放等功能ec0f53e0db16b1bbe4d76fed6eae8db1.pngec0f53e0db16b1bbe4d76fed6eae8db1.pngec0f53e0db16b1bbe4d76fed6eae8db1.png

写了好久???

后来提交上线?

审核不通过???

原因是账号主体是个人???

服务范围受限制c5dde877fd272c358236e30eb4ff4cd3.png

不能提供音乐平台等服务?

说白了还是个版权问题???

什么时候有了自己个企业号就nice了哈哈哈1c8bf384d98628d798433a39648de60b.png1c8bf384d98628d798433a39648de60b.png1c8bf384d98628d798433a39648de60b.png

所以这个小程序就没办法上线fabd4fa377e1efd89b55d74e6d7f9086.pngfabd4fa377e1efd89b55d74e6d7f9086.pngfabd4fa377e1efd89b55d74e6d7f9086.png

就只能自己享用啦哈哈哈16ae06bad2499cc8f061cee5cca75156.png16ae06bad2499cc8f061cee5cca75156.png16ae06bad2499cc8f061cee5cca75156.png

然后下面就是展示一下页面嘿嘿c9287d55cddea8260e37e92c0c573a73.pngc9287d55cddea8260e37e92c0c573a73.pngc9287d55cddea8260e37e92c0c573a73.png

04903eb2dbc75b7c000d0d13af8cfcaf.png

首页 ▼

36616c1a6e700cdf38cbaa18f4666b52.png

页面简介:

        原本想着小程序功能不仅限于音乐的,只是目前只做了一个音乐板块,所以首页暂时就一个内容

首页 ▼

d13bc9bbab72e1d2789d38a9eea02fc6.png

页面简介:

        首页支持右滑,并显示如上图界面,使用了swiper组件,主要归功于css样式,参考了github项目。

        顶部头像支持点击操作,并进入主页页面。

        包含条目有:个人信息、我的收藏、我的相册、听歌历史、小宇宙、我的、更多等内容(灵感来自QQ嘿嘿)。

        均支持点击操作,并分别进入相应页面。

        目前部分页面没有开发完善。

        其中,进入更多页面以后可以进入小程序客服。

我的主页 ▼

a58945a20057772459d3df540274177c.png

页面简介:

        这是个人主页界面。

        上部为一个轮播图,支持点击事件、长按事件。点击可以查看图片;长按可以添加图片,添加图片有三种模式:删除图片、插入图片、替换图片,均实现了相应功能。

         中间包括个人头像和个人信息展示。其中头像支持长按事件。长按会弹出一个菜单,包括查看头像、修改头像。

          底部是一个编辑资料的按钮,跳转编辑资料页(未展示),可进行个人资料以及小程序主题等修改。

歌单 ▼

4e5254a17141e6cd32fda3062429c4e6.png

页面简介:

        这是由主页进入的音乐首界面,默认由数据库提供了几条歌单数据,支持自己添加歌单(功能暂不是非常完善)。

        各个条目支持点击事件,并进入歌单详情页。

电台 ▼

6022e733faa67687bd88e30a2029f92f.png

页面简介:

       这是电台页,内容和逻辑同歌单页。

歌手页 ▼

de47cd8372015f19655397789678bae9.png

页面简介:

      这是歌手页,默认列表有几位推荐歌手,可以自己添加。

点击条目后,进入歌手歌单页,展示50首歌手的作品。

播放页(隐藏底部导航) ▼

85033a6942ae7d69a69ff7e985d2cbdb.png

页面简介:

           这是音乐播放界面,当前展示的是进入该页面的默认状态,此时底部的tabbar标签栏(导航栏)已经隐藏,左边的半圆支持点击操作,点击后,tabbar又显示出来。(效果如下图)

          页面逻辑部分:顶部包括名称和歌手,其中歌手部分支持点击操作,并进入歌手歌单详情页。中间个图片在播放的时候旋转,暂停的时候停止(同网易云)。然后中间底部是当前歌词。本页面支持左右滑动。底部是歌曲控制部分,进度条支持拖动快进,支持上一曲下一曲和暂停、播放,以及播放模式的选择(循环、随机、单曲),以及当前播放列表。所有功能均已经实现。

播放页(有底部导航) ▼

04f2d6ec7367090ddede9c1e52f1d628.png

页面简介:

            这是显示tabbar的时候。

评论页 ▼07c9a846de21d42fe82a13cdf341bdf4.png

页面简介:

            这是评论页。

播放页——播放队列 ▼

81b46b5a1da9c3eb3aa2c3a3700ed5b6.png

页面简介:

            这是歌词页。

播放页——播放队列 ▼

92934f2a3f96e260ce9a186255ac7679.png

页面简介:

      这是点击播放列表的时候。

悬浮窗 ▼

78044e6fd54c192a61d38a27401ef7a6.png

页面简介:

        本小程序实现了悬浮窗的效果,默认位置是贴边。点击后弹出如图的弹窗,可进行页面路由。方便用户页面导航。

搜索页▼

f715f1afd432660d485f73f1bcca3129.png

页面简介:

         这是搜索页面,输入内容之后,会从下面弹出联想词框,如下图。

搜索联想词 ▼

12b87ec8f2b0d2d7d31b6d33847539d1.png

页面简介:

        仅显示了歌曲部分,支持滑动。

搜索结果页 ▼

3216871c72a3b8ae98f3f03c7b4e9615.png

页面简介:

        点击搜索按钮或者联想词之后进入的界面,覆盖网易云音乐的搜索功能页面:单曲、MV、歌手、电台、歌单等。

        条目支持点击操作并进入相应的模块(单曲则直接播放),单曲中显示mv的支持点击进入mv详情页。

搜索结果页——MV ▼

54297ca4141959f58ff14bb5c30ab0dd.png

搜索结果页——歌手 ▼

ba7f32ec381f541b8acbe84e8e052a1c.png

搜索结果页——电台 ▼

058875c4037cf217ee502e3c95f11b79.png

搜索页弹窗导航 ▼

894e91201275864aed981f6f6dacc559.png

MV详情页 ▼

554bd4dbfd15276b6ff9683d4f73535a.png

页面简介:

        这是MV详情页,上部是mv播放部分,单击会弹出一个菜单,可以进行清晰度的选择,中间为介绍。底部显示了搜索到的歌手信息,点击可跳转歌手歌单详情页。

歌手/专辑/歌单 页 ▼

b2e47fe65802808cb2b34c36adb92a79.png

页面简介:

        这是‘歌手/专辑/歌单详情页,条目可以点击,并进入播放页面。

弹出菜单栏 ▼

eebc4f922cd186ada495b5accdc2ad09.png

页面简介:

        这是隐藏功能,在长按顶部navBar部分的时候,会弹出一个菜单,可以进行导航栏、通知栏的样式。

收听历史 ▼

8f0c3246d750897907db3dacfd2216b8.png

页面简介:

        这是历史记录页面,还有我的收藏界面(未展示)

04903eb2dbc75b7c000d0d13af8cfcaf.pngEND

以上就是本小程序的简介了

虽然没有如愿发布

但是做出来就很满足了啦啦啦。

最后,打一波广告

我的留言小程序做好了

而且已经上线了呢嘿嘿嘿

点下面的写留言

即可进入小程序写留言啦啦啦

做的比较粗糙,欢迎在公众号里反馈鸭

或者在小程序主题市场里面的

“小程序反馈”主题里面留言

走吧走吧

写留言

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值