VBox 一款基于vue开发的音乐盒 序章
己基于vue写了一个 Mplayer,
github地址:https://github.com/xiangwenhu/MPlaer,
演示地址:http://babydairy2017.cloudapp.net:3000/index#/index
只有简单的搜索播放随心听功能,样式适配上也很差, 路由就两个,数据都走vuex,数据转发是用nodejs自己转发,而且只是PC能比较好的展现,之后不了了之,偶尔也自己上来听听歌曲。
有一天,抬头看,有一片云,特别的蓝,风一吹,一阵花香飘来,美好,美好的东西都是慢慢积累出来的。
于是开始基于vue重写Mplayer,重命名为VBox。Github地址:https://github.com/xiangwenhu/vbox
功能参考:https://y.qq.com/ ,
基本功能:
首页,
歌手,
专辑,
排行榜,
歌单,
MV,
搜索,
分享,
设置
其他功能:
响应式布局- 基于rem
延伸功能:
零张图片 - 程序上零图片,css话或者canvas绘画
版本更新- 基于 Service Worker
资源预测 - 基于 Web Worker/prefetch ,比如检查到时wifi后,打开首页后,Web Worker 自动去拉取其他功能第一屏幕的数据, 某个功能展现后,预拉取第二页的数据
离线播放-基于 FileSystem&IndexedDB, 基于FileSystem 的大文件离线存储已经实现一个基本版本,地址:https://github.com/xiangwenhu/BlogCodes/tree/master/client/FileSystem
自我录制- 基于 MediaRecorder
在线分享- 基于 Web RTC
失焦即停 - 基于 Page Visibility,可以在设置里面设置。
QQ/微信登陆 - 真的一样,酷啊(难度不小哈)
这些看起来挺多,也有一定的难度,知难而行,喜欢就好。
写下这么多,一方面是鼓励自己加油,一方面是告诫自己,路很长,加油。
现在基本功能开发了一些,给几张截图安慰一下自己。




VBox 一款基于vue开发的音乐盒 序章的更多相关文章
- 从开发一款基于Vue技术栈的全栈热重载生产环境脚手架,我学到了什么
浏览文章前 这一期,我分享给大家三点看源码的小技巧,这也是从别的大佬那总结的. 被反复使用的代码 这样的代码是一个软件的重点函数,一个大神的写法有很多精华值得学习. 穿越时间的代码 如果一段代码10年 ...
- Xsoup 是一款基于 Jsoup 开发的
Xsoup 是一款基于Jsoup 开发的,使用XPath抽取Html元素的工具.它被用于作者的爬虫框架 WebMagic 中,进行XPath 解析和抽取. 此次更新主要增加了一些XPath语法的支持. ...
- 一款基于Netty开发的WebSocket服务器
代码地址如下:http://www.demodashi.com/demo/13577.html 一款基于Netty开发的WebSocket服务器 这是一款基于Netty框架开发的服务端,通信协议为We ...
- 基于Vue开发的tab切换组件
github地址:https://github.com/MengFangui/VueTabSwitch 1.index.html <!DOCTYPE html> <html lang ...
- 基于Vue开发的门户网站展示和后台数据管理系统
基于Vue的前端框架有很多,这几年随着前端技术的官方应用,总有是学不完的前端知识在等着我们,一个人的精力也是有限,不可能一一掌握,不过我们学习很大程度都会靠兴趣驱动,或者目标导向,最终是可以以点破面, ...
- 【全面解禁!真正的Expression Blend实战开发技巧】序章
原文:[全面解禁!真正的Expression Blend实战开发技巧]序章 从silverlight2开始我也和大家一样一直在跟随微软的脚步,从sl2~sl4一步一步过来,总结了不少心得体会.由于各种 ...
- 基于VUE开发项目
前言 最近由于公司需要,需要写一个相对来说比较大型的后台管理系统.为了保证管理系统操作体验较为舒适并且项目后期益于维护,最后决定基于VUE全家桶来开发一个高度组件化的单页SPA应用. 技术选型 vue ...
- 一款基于Vue的扩展性组件库 VV-UI
github: https://github.com/VV-UI/VV-UI 演示地址: https://vv-ui.github.io/VV-UI/#/meta-info 1. LoadingBar ...
- 推荐几款基于vue的使用插件
1.muse-ui ★6042 - 三端样式一致的响应式 UI 库 2.vuetify ★11169 - 为移动而生的Vue JS 2组件框架 3.Vux ★12969- 基于Vue和WeUI的组件库 ...
随机推荐
- 使用oracle DB_LINK的一个注意点
今天使用db_link的时候遇到了个有趣的问题,和大家分享一下; 环境:Oracle Database 11g Enterprise Edition Release 11.2.0.1.0 - 64bi ...
- Ext.chart.Chart 显示图标 -- 本地数据
先来张直观的图,基于ext4.2制作 这就是弹出来的图表了. 今天先搭建一个本地数据版,也是静态数据版. 点击一个按钮执行一个function,来看function里面的东西: 一.依赖 Ext.re ...
- java线程池的创建使用
利用java的多线程编程可以大大的提高系统的并发运行效率,线程越多并发执行的任务就越多,但是并不意味着效率会一直提高,相反会得到适得其反的效果. java中的多线程编程一共有三种方法: 继承Threa ...
- 》》mui--图片轮播
mui框架内置了图片轮播插件,通过该插件封装的JS API,用户可以设定是否自动轮播及轮播周期,如下为代码示例: //获得slider插件对象 var gallery = mui('.mui-slid ...
- Java中进制的转换函数
十进制转成十六进制: Integer.toHexString(int i) 十进制转成八进制 Integer.toOctalString(int i) 十进制转成二进制 Integer.toBinar ...
- strus2项目中百度编辑器运用的几点细节
百度编辑器的运用可以参考我之前写的一篇文章,在java项目中加入百度富文本编辑器.这篇文章是以maven+spring mvc项目进行的,总得来说配置比较简单,但是如果是想在strus2项目中配置ue ...
- java集合框架(Collections Framework)
*/ .hljs { display: block; overflow-x: auto; padding: 0.5em; color: #333; background: #f8f8f8; } .hl ...
- python __getattr__ 巧妙应用
在之前的文章有提到__getattr__函数的作用: 如果属性查找(attribute lookup)在实例以及对应的类中(通过__dict__)失败, 那么会调用到类的__getattr__函数, ...
- org.elasticsearch.transport.ReceiveTimeoutTransportException[cluster:monitor/nodes/liveness] request_id [31] timed out after [5000ms]
ES连接超时,异常信息 2017-09-07 10:42:45.042 [elasticsearch[Bantam][transport_client_worker][T#17]{New I/O wo ...
- MVC+EF 入门教程(四)
一.前言 写了那么久,那么现在给大家看效果了 二.效果展示 点击创建Blog 显示 编辑 编辑成功,是不是很酷. 删除 终于完成了,准备睡觉!虽然有很多不足的地方,我会慢慢的去改的.感谢累了一天的自己 ...