微信小程序-仿QQ音乐
- 歌曲来源:QQ音乐
说明
- 目前只有体验版,如果有兴趣的同学可以私聊我,我帮您加入,名额有限。
- 因为个人开发者无法发布在线音乐播放小程序,所以开发该小程序目的只为学习小程序开发;
- 小程序涉及到到所有歌曲资源都来源于QQ音乐,部分API由本人对QQ音乐接口进行了二次封装(我会另外再写一篇文章专门用来分享API,敬请期待)
编辑器效果展示
- 因为要压缩为GIF格式,所以加快了播放速度并且画质有点差
真机截图
操作视频
- 推荐页面
- 歌手列表
- 各大排行榜
- 搜索页面
- 歌手详情页
- 歌单(排行榜)详情页
- 播放器页面
- 分享页面
目前实现的功能
- 歌单
- 电台
- 歌曲播放
- MV播放(最近发现QQ音乐的接口不返回MV数据了,所以这个功能暂时无法展示)
- 歌手列表
- 排行榜
- 歌曲歌手搜索(支持模糊查询)
- 最近搜索记录
- 热门搜索词条
- 歌手详情页
- 歌单详情页
- 歌曲分享
- 查看评论
- 歌词滚动
- 最近播放歌曲
接下来准备实现的功能
- 用户登录
- 私人FM
- 增加点赞,评论功能
- 歌曲播放方式(随机,单曲,循环)
- 收藏
- 全局播放器组件
项目目录
![图片描述][14]
- comment--自定义组件(播放器组件,开发中)
- img--存放图片
- gedan--歌单页
- index--首页
- logs--歌手列表页
- playSong--播放器页
- rank--排行榜页
- search--搜索页
- share--分享页
- singer--歌手详情页
- top--歌单详情页
- app.js--应用程序逻辑
- app.json--应用程序配置
- app.wxss--应用程序公共样式
app.json 应用程序配置文件
{"pages": ["pages/index/index","pages/logs/logs","pages/rank/rank","pages/search/search","pages/gedan/gedan","pages/playSong/playSong","pages/singer/singer","pages/top/top","pages/share/share"],//页面路径列表"requiredBackgroundModes": ["audio"],//需要在后台使用的能力,这里我们使用到了【音乐播放】"window": {"backgroundTextStyle": "light","navigationBarBackgroundColor": "#fff","navigationBarTitleText": "HMusic","navigationBarTextStyle": "black"},//全局到默认窗口表现"tabBar": {"list": [{"pagePath": "pages/index/index","text": "推荐"},{"pagePath": "pages/logs/logs","text": "歌手"},{"pagePath": "pages/rank/rank","text": "排行榜"},{"pagePath": "pages/playSong/playSong","text": "播放器"}],"position": "top"}//tab栏到表现,默认是放在底部,根据position,我们将其设置为顶部显示
}
每个页面都有各自到配置页面,可以对各自页面进行单独对配置 [pageName].json用于指定页面工作时,window的设置:
{// 导航条背景色"navigationBarBackgroundColor": "#fff",// 导航条前景色(只能是white/black)"navigationBarTextStyle": "black",// 导航条文本"navigationBarTitleText": "HMusic",// 窗口背景颜色"backgroundColor": "#fff",// 窗口前景色"backgroundTextStyle": "dark",// 是否开启下拉刷新"enablePullDownRefresh": false
}
app.js应用程序逻辑
// App函数是一个全局函数,用于创建应用程序对象
App({// ========== 全局数据对象(可以整个应用程序共享) ==========globalData: { ... },// ========== 应用程序全局方法 ==========method1 (p1, p2) { ... },method2 (p1, p2) { ... },// ========== 生命周期方法 ==========// 应用程序启动时触发一次onLaunch () { ... },// 当应用程序进入前台显示状态时触发onShow () { ... },// 当应用程序进入后台状态时触发onHide () { ... }
})
欢迎StarGitHub 博客
转载于:https://my.oschina.net/u/3960030/blog/3018216
微信小程序-仿QQ音乐相关推荐
- 微信小程序版QQ音乐
来源 <a href="http://www.see-source.com:80/weixinwidget/downloadZip.html?wid=161">实例源码 ...
- php获取QQ音乐直链,微信小程序-获取QQ音乐直链
获取QQ音乐直链-用于微信小程序 补充:以下方法获取的直链会有失效期,如果大家有嗅探等工具可以直接上QQ音乐网站获取资源的直链,此方法仅供参考. 问题起源: 最近在做小程序音频播放这一块的时候发现一个 ...
- 微信小程序仿网易音乐播放器项目
一.项目展示 主页: 播放页: 搜索页: 排行榜页: 小控件: 二.项目结构 三.项目功能点 后端接口,使用node写的,使用了网易云音乐API: 封装的api文件 //env是基础地址js文件 im ...
- 微信小程序仿网易云音乐(使用云开发,提供源码)
微信小程序仿网易云音乐(使用云开发,提供源码)!!!!!!!!!!! 源码: 链接:https://pan.baidu.com/s/1z_ZnRVbT4vjEENimi8yBQQ 提取码:u0o3 一 ...
- 到家服务公司php源码,微信小程序-仿五洲到家商城源码
微信小程序-仿五洲到家商城源码 微信小程序仿五洲到家商城源码是一款精仿五洲到家app界面的小程序源码,适用于各类小程序商城系统,功能及模块均值得借鉴! 对应功能模块 > * 首页(定位成功情况且 ...
- 微信小程序-仿今日头条客户端
该仿今日头条的文章系列如下: 微信小程序-仿今日头条客户端 微信小程序开发-仿今日头条(二) 转载请标明:https://blog.csdn.net/yangjianbo456/article/det ...
- 微信小程序仿京东淘宝商品排序
微信小程序仿京东淘宝商品排序 效果图如下所示 仿京东微信小程序视频请加QQ:1010753897 下载地址:https://download.csdn.net/download/qq_43764578 ...
- 微信小程序仿写豆瓣评分我的页面
微信小程序仿写豆瓣评分我的页面 搭建豆瓣评分我的页面,先在pages文件夹下创建pages,得到4个文件,在这4文件中来实现界面的搭建; 原文链接 1.头部header模块的搭建 头部模块的搭建比较简 ...
- 微信小程序仿抖音上下滑动整屏切换视频
微信小程序仿抖音上下滑动整屏切换视频 使用官网上面的扩展组件 官方使用的方式: 可结合自己业务修改: 使用官网上面的扩展组件 https://developers.weixin.qq.com/mini ...
最新文章
- c语言中%hu,%hx是什么意思
- tf卡低级格式化_华为授权雷克沙nCARD评测:用了这么多年TF卡,该换换了
- 和一场音视频技术大会只有一条网线的距离
- 如何开发 Servlet 程序
- 【优秀文章保存】webcollector抽取新闻正文
- DHCP之二 DHCP的中继代理
- Matlab画图常用的指令是啥,matlab画图常用命令
- Object.HashCode()——居然是Java Native方法
- 计算机包括台式机和笔记本,笔记本电脑与台式机怎样连接
- 北京大学计算机801考试大纲,2019年中国科学院大学801高等代数考研初试大纲
- Giant MIDI Piano 安装教程
- CMOS曝光时间、积分时间
- 211西北大学,成立国家超级计算西北大学分中心!
- Vue实现生成二维码
- Python骚操作 | 川普的嘴,骗人的鬼!
- 数字信号处理FFT快速傅立叶变换MATLAB实现——实例
- mac os下 Ruby环境安装方法
- RabbitMQ - 4种Exchange类型
- 两种电致发光器件EQE测量方法(光分布法和积分球法)
- 2021版!万字UNIX网络编程学习笔记(套接字篇)