己基于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开发的音乐盒 序章的更多相关文章

  1. 从开发一款基于Vue技术栈的全栈热重载生产环境脚手架,我学到了什么

    浏览文章前 这一期,我分享给大家三点看源码的小技巧,这也是从别的大佬那总结的. 被反复使用的代码 这样的代码是一个软件的重点函数,一个大神的写法有很多精华值得学习. 穿越时间的代码 如果一段代码10年 ...

  2. Xsoup 是一款基于 Jsoup 开发的

    Xsoup 是一款基于Jsoup 开发的,使用XPath抽取Html元素的工具.它被用于作者的爬虫框架 WebMagic 中,进行XPath 解析和抽取. 此次更新主要增加了一些XPath语法的支持. ...

  3. 一款基于Netty开发的WebSocket服务器

    代码地址如下:http://www.demodashi.com/demo/13577.html 一款基于Netty开发的WebSocket服务器 这是一款基于Netty框架开发的服务端,通信协议为We ...

  4. 基于Vue开发的tab切换组件

    github地址:https://github.com/MengFangui/VueTabSwitch 1.index.html <!DOCTYPE html> <html lang ...

  5. 基于Vue开发的门户网站展示和后台数据管理系统

    基于Vue的前端框架有很多,这几年随着前端技术的官方应用,总有是学不完的前端知识在等着我们,一个人的精力也是有限,不可能一一掌握,不过我们学习很大程度都会靠兴趣驱动,或者目标导向,最终是可以以点破面, ...

  6. 【全面解禁!真正的Expression Blend实战开发技巧】序章

    原文:[全面解禁!真正的Expression Blend实战开发技巧]序章 从silverlight2开始我也和大家一样一直在跟随微软的脚步,从sl2~sl4一步一步过来,总结了不少心得体会.由于各种 ...

  7. 基于VUE开发项目

    前言 最近由于公司需要,需要写一个相对来说比较大型的后台管理系统.为了保证管理系统操作体验较为舒适并且项目后期益于维护,最后决定基于VUE全家桶来开发一个高度组件化的单页SPA应用. 技术选型 vue ...

  8. 一款基于Vue的扩展性组件库 VV-UI

    github: https://github.com/VV-UI/VV-UI 演示地址: https://vv-ui.github.io/VV-UI/#/meta-info 1. LoadingBar ...

  9. 推荐几款基于vue的使用插件

    1.muse-ui ★6042 - 三端样式一致的响应式 UI 库 2.vuetify ★11169 - 为移动而生的Vue JS 2组件框架 3.Vux ★12969- 基于Vue和WeUI的组件库 ...

随机推荐

  1. 》》webpack打包成的文件

    /******/(function(modules) { // webpackBootstrap /******/ // The module cache /******/ var installed ...

  2. BIRT实现组内跨行计算

    问题来源:http://developer.actuate.com/community/forum/index.php?/topic/36160-dealing-with-previous-rows- ...

  3. [hdu 4869](14年多校I题)Turn the pokers 找规律+拓欧逆元

    Turn the pokers Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) ...

  4. JQuery插件开发标准写法

    ;//step01 定义JQuery的作用域 (function ($) { //step03-a 插件的默认值属性 var defaults = { prevId: 'prevBtn', prevT ...

  5. CentOS 7下Samba服务器的安装与配置

    文基于<CentOS 6.3下Samba服务器的安装与配置>,参照原博文,自己在CentOS7环境上实现,并按照自己的环境修改博文内容 一.简介 Samba是一个能让Linux系统应用Mi ...

  6. Tuxedo:Tuxedo支持的分布式通信方式

    1.RPC:用于远程方法调用.Java中类似的技术有EJB.WebService 2.Conversaction:交流.Java中类似的有JDBC. 3.Message Notification:消息 ...

  7. 企业级nosql数据库应用与实战-redis

    一.NoSQL简介 1.1 常见的优化思路和方向 1.1.1 MySQL主从读写分离 由于数据库的写入压力增加,Memcached只能缓解数据库的读取压力.读写集中在一个数据库上让数据库不堪重负,大部 ...

  8. Android项目实战(三十五):多渠道打包

    多渠道打包: 可以理解为:同时发布多个渠道的apk.分别上架不同的应用商店.这些apk带有各自渠道的标签,用于统计分析各个商店的下载次数等数据. 实现步骤 一.添加友盟渠道标签 添加位置:app目录下 ...

  9. DotNetCore跨平台~功能测试TestHost的使用

    回到目录 之前写了关于自动化测试的相关文章,包括gitlab,unittest,jenkins pipeline等,基于都是功能点的测试,当我们的框架或者业务修改之后,需要走一篇自动化测试,以此来保证 ...

  10. (转载)Eclipse将引用了第三方jar包的Java项目打包成可执行jar的两种方法

    转载自:http://www.cnblogs.com/lanxuezaipiao/p/3291641.html 方案一:用Eclipse自带的Export功能 步骤1:准备主清单文件 "MA ...