Skip to content

小小前端

明月本无心,行人自回首。

Menu
  • 前端开发
  • 编程技术
  • SQL语句
  • Linux
  • 生活/旅行
  • JSEditor
  • MiniBarCMS
  • About
  • 隐私政策
Menu

使用VUE2制作音乐播放器

Posted on 2017年3月20日2017年3月22日 by king2088

研究了2天的成果终于得到回报了,播放器已经制作完成,但还有待于完善。我总是离不开jQuery的DOM操作,刚开始学习VUE,还是会经常使用到DOM操作。因此写出来的代码还是有很多缺点,等待往后学习的差不多了,我会再改进的。
做播放器的想法来源于之前本人做的web app《vuejs2 + wp-rest-api开发web app》此文章的灵感。因此再献上一个music player来温习下vue。

一、效果

GIF动图有3M多,如果没有显示出来,请再等等

vue-player播放器
vue-player播放器

看到了吧,自己的一点小创意,搞了个猪头上去。

二、相关代码

本程序中仅使用了vue的ajax框架vue-resource,未使用到vue-router,因此再安装vue-cli的时候,可以略过vue-router,本程序仅有一个组件,即只有一个vue文件,使用了css预处理语言stylus。使用的json数据为本站相关php代码生成的(仅为了演示),如果你是在本地搭建环境,json也可以写在本地。

本demo已经使用cordova制作成了安卓的apk文件,如需体验,请点击此处下载
源码已经提交到github(记得给我加星哦):https://github.com/king2088/vue-tplayer
演示地址:http://www.egtch.com/t_works/tplayer/
1、生成json的php如下(代码非常简单,就是定义一串json数据,然后在展现出来):



2、app.vue代码

发表评论 取消回复

您的电子邮箱地址不会被公开。 必填项已用*标注

分类

近期文章

  • cordova-plugin-camera在某些android机型中拍照或选择文件时闪退出错的解决办法 2019年10月24日
  • JavaScript nodeJS base64加密解密url参数 2019年10月15日
  • 利用expressJS编写reset api 2019年4月13日
  • angular4 + http拦截器 2019年3月21日
  • ionic navCtrl.pop如何传递参数给上一个页面 2018年11月16日
  • ionic3搭建开发/测试环境 2018年10月25日
  • ionic2、3双击硬件back按键退出应用 2018年10月24日
  • VMware安装Mac OS High Sierra 10.12及高版本无法全屏 2018年8月24日

近期评论

  • 手表资讯发表在《ReactJS环境搭建》
  • king2088发表在《ionic中使用热更新插件cordova-hot-code-push》
  • 重阳节的诗句发表在《常用的sql语句》
  • 新郎致辞发表在《PHP代码实现WordPress相关文章的几种方法》
  • 霸道总裁发表在《vsftpd 提示 unrecognized service 解决办法》

归档

标签

Ajax Android Angular APP Cordova CSS css3 express html5 ionic Java javascript jQuery Linux loading mac Mac OS mongodb MySQL node nodejs PHP react SQL SSH VirtualBox vue vue-cli win10 WordPress WP REST API 主题 兼容性 前端 备份 插件 数据库 数组 服务器 正则表达式 浏览器 热更新 目录 组件 错误
2023年 3月
一 二 三 四 五 六 日
 12345
6789101112
13141516171819
20212223242526
2728293031  
« 10月    
© 2023 小小前端 | Powered by Superbs Personal Blog theme