2018-05-16 09:16:10 qq_26422747 阅读数 1766
  • 手机APP开发/WebApp应用

    APP开发,是指智能终端设备应用软件开发。由于智能手机、平板电脑等移动终端设备的不断普及,使APP应用软件得到广泛的使用,导致APP开发的“兴起”。App是application的缩写,通常专指手机上的应用软件,或称手机客户端。随着智能手机越发普及、用户越发依赖手机软件商店,App开发的市场需求与发展前景也逐渐蓬勃,截止到2012年12月,App开发已变红海。

    977 人正在学习 去看看 李强强
2018-05-22 11:48:36 shuqiwanghao123 阅读数 643
  • 手机APP开发/WebApp应用

    APP开发,是指智能终端设备应用软件开发。由于智能手机、平板电脑等移动终端设备的不断普及,使APP应用软件得到广泛的使用,导致APP开发的“兴起”。App是application的缩写,通常专指手机上的应用软件,或称手机客户端。随着智能手机越发普及、用户越发依赖手机软件商店,App开发的市场需求与发展前景也逐渐蓬勃,截止到2012年12月,App开发已变红海。

    977 人正在学习 去看看 李强强


需要的赶紧q过来3268135518

2017-12-12 21:34:13 nanke_dw 阅读数 3068
  • 手机APP开发/WebApp应用

    APP开发,是指智能终端设备应用软件开发。由于智能手机、平板电脑等移动终端设备的不断普及,使APP应用软件得到广泛的使用,导致APP开发的“兴起”。App是application的缩写,通常专指手机上的应用软件,或称手机客户端。随着智能手机越发普及、用户越发依赖手机软件商店,App开发的市场需求与发展前景也逐渐蓬勃,截止到2012年12月,App开发已变红海。

    977 人正在学习 去看看 李强强

最近看了一个vue移动音乐webapp教程,老师是一个来自滴滴公司的名为黄轶的前端大神,之前学习了他的一个基于vue仿饿了么webapp的初级教程,感觉非常好,十分适合新手,但是那个教程的数据都是前端模拟的一个data.json的json文件,这一次的教程的数据全都是来自QQ音乐的真实数据,需要请求它的接口,因为是线上的数据,所以许多接口需要进行跨域或者设置一些头部信息。
我的vue版本是2.5.2,用vue-cli脚手架工具搭出来的项目结构是:
这样
说一下接口,QQ音乐歌单接口以及参数如下:
这里写图片描述
其中最需要注意的点是headers里的referer,需要设置成跟QQ音乐的请求参数一样,否则请求该接口服务端不会响应,因为前端是不能够强行修改referer的,所以需要去设置一个后台代理,这是老师的那个vue-cli版本搭出来的项目结构的方法,他的项目结构里有一个dev.server.js。
这里写图片描述
他在dev.server.js里用express框架搭了一个服务器,设置一个接口,然后让前端去请求这个接口,在这个接口里再去请求QQ音乐的歌单接口并且设置相应的头文件信息如referer等,这样就达到了目的。
由于我的vue-cli搭出来的项目结构跟老师的不一样,没有按照老师的方法去请求,但是在config文件夹下的index.js里提供了一个proxyTable属性,可以在这里进行跨域请求。
这里写图片描述
在这里配置一个接口名,对应的值是一个对象,target属性是真实请求的值,bypass对应的函数是请求之前可以进行的操作,req这个参数就是请求的信息,可以在这里设置请求头信息,然后通过pathRewrite设置一下前缀,最后在前端请求的接口写成设置的接口名就能进行请求了。
这里写图片描述
记得把参数的format传成json,这样返回的值就会是json数据了,方便进行操作。
这里写图片描述
如果你觉得我的文章有帮助,请支持我吧

2018-03-01 12:39:59 osdfhv 阅读数 793
  • 手机APP开发/WebApp应用

    APP开发,是指智能终端设备应用软件开发。由于智能手机、平板电脑等移动终端设备的不断普及,使APP应用软件得到广泛的使用,导致APP开发的“兴起”。App是application的缩写,通常专指手机上的应用软件,或称手机客户端。随着智能手机越发普及、用户越发依赖手机软件商店,App开发的市场需求与发展前景也逐渐蓬勃,截止到2012年12月,App开发已变红海。

    977 人正在学习 去看看 李强强

看了慕课网的vue音乐webApp实战,感觉自己学到了很多东西,无论对vue的整体架构和组件设计都有了清晰的认识,在以后的工作中对组件封装时可能会考虑的多一些,能够有效的掌握组件的边界条件,分清木偶组件和智能组件,合理的实现组件间的参数传递,另外对单项数据流的理解也有一定的认识,类比自己以前做的angularJs的双向数据绑定的实现,确实感觉到组件的易维护和可复用性的重要。


由于开发过程中使用的是ES6语法,所以也大大加深了对ES6一些语法的认识。
基本的有:let、const、箭头函数、…对象拓展运算符、import和export、class、promise
还有就是字符串的拓展:如模板表达式 “,数组的新增方法for of 、findIndex()方法…..
再有就是函数的拓展和对象的析构等等。

还要说的就是对vuex和mixin的使用。

关于vuex这里不在多说,我想使用者一定能够分清它的使用场景。在涉及组件间的通讯时方法有很多这里简单的介绍几点:

1、vue父子组件通信可以用Vue.$emit自定义事件来解决。

// 父组件
<single-address @edit-address="editAddress"></single-address>
// 子组件
methods: {
 editAddress () {
  this.$emit('edit-address', false)
 }
}

当然也可以使用props方式解决。

// 父组件
<one-address :addressitems="addressitems"></one-address>
// 子组件
<div>{{ addressitems.partment }}{{ addressitems.address }}</div>
export default {
  props: {
    addressitems: Object
  }
}

二. 非父子组件通信同样也可以用Vue.$emit自定义事件来解决

var app = new Vue()
// 组件A
app.$emit('id-selected', 1)
// 组件B
app.$on('id-selected', function (id) {
 console.log(id)
})

三. vue跨组件跨模块通信

这个在大型复杂的业务中可能就要用到vuex了,vuex的核心可以通过一张图来解释

这里写图片描述

对就是vue官网的图,为了更好的理解最好还是去官网看看实例在自己敲一遍体会体会。

https://vuex.vuejs.org/zh-cn/

关于mixin的基本认识你可以去看看这两篇文章:http://blog.csdn.net/kuangshp128/article/details/78169266

http://blog.csdn.net/sinat_17775997/article/details/76570822

Mixins一般有两种用途:

1、在你已经写好了构造器后,需要增加方法或者临时的活动时使用的方法,这时用混入会减少源代码的污染。

2、很多地方都会用到的公用方法,用混入的方法可以减少代码量,实现代码重用。

3、如果组件中定义的方法与混入对象中的方法/属性一样,组件中的优先级大于混入对象中的(方法会调用多次)

4、混入对象中可以定义抽象方法,使用混入的组件必须重写该方法

其它的细节我觉的做的比较好的就是页面的交互上,你可以看到类比原生效果体验。
包括页面的过渡效果和一些动画,无论是节流或者防抖都做了处理,使得js性能得到极大的提升。

还有感触颇深的就是对复杂数据的处理,我们前端从后台得到的数据不一定是我们想要的怎么办??如何巧妙的进行页面渲染呢?

再往下可能就会涉及到页面的布局和兼容性问题了,当然移动端最重要的就是这两点了

看看时间已经是12:39了,正在找工作的我哎!!!机会难求

还是把这个案例挂在到我的服务器上吧!稍后给出地址

2018-05-15 23:38:16 weixin_34395205 阅读数 79
  • 手机APP开发/WebApp应用

    APP开发,是指智能终端设备应用软件开发。由于智能手机、平板电脑等移动终端设备的不断普及,使APP应用软件得到广泛的使用,导致APP开发的“兴起”。App是application的缩写,通常专指手机上的应用软件,或称手机客户端。随着智能手机越发普及、用户越发依赖手机软件商店,App开发的市场需求与发展前景也逐渐蓬勃,截止到2012年12月,App开发已变红海。

    977 人正在学习 去看看 李强强

基于 Vue(2.5) + vuex + vue-router + vue-axios +better-scroll + Scss + ES6 等开发一款移动端音乐 WebApp,UI 界面参考了安卓版的网易云音乐、flex 布局适配常见移动端。

因为服务器的原因,所以可能多人访问的时候有些东西会加载不出来,如果可以的话一会再访问应该就没什么问题了,出现这样的问题,实在抱歉。

项目演示地址:移动端音乐 WebApp,或者可以扫描二维码访问:

  • 推荐使用手机访问,电脑在 Chrome 调试模式下食用效果更佳,开启调试模式的手机模式后,如果不能滚动,刷新一下页面即可。

源码地址:vue-music-webapp,欢迎 star 和 fork 哦~

如果你觉得我做的不错的话,我就厚着脸皮求个 star ⭐️ 哈,star 是对我最大的鼓励(老脸一红)

预览

图片虽然压缩过了,但是几张加载一起还是有 3MB 左右,所以请耐心等待一下啦。感觉不错的可以去上面的地址体验一下呦~

推荐、排行榜、歌手

歌单详情、个人中心

播放器、播放列表

搜索页面

开发目的

通过学习开发一个 Vue 全家桶项目,让自己更熟练的使用 Vue 全家桶、模块化开发、ES6 等等知识,提高自己的技术能力。

技术栈

前端

  • Vue:用于构建用户界面的 MVVM 框架
  • vue-router:为单页面应用提供的路由系统,使用了 Lazy Loading Routes 技术来实现异步加载优化性能
  • vuex:Vue 集中状态管理,在多个组件共享某些状态时非常便捷
  • vue-lazyload:实现图片懒加载,节省用户流量,优化页面加载速度
  • better-scroll:解决移动端各种滚动场景需求的插件,使移动端滑动体验更加流畅
  • SCSS:css 预编译处理器
  • ES6:ECMAScript 新一代语法,模块化、解构赋值、Promise、Class 等方法非常好用

后端

  • Node.js:利用 Express 搭建的本地测试服务器
  • vue-axios:用来请求后端 API 音乐数据
  • NeteaseCloudMusicApi:网易云音乐 NodeJS 版 API,提供音乐数据

其他工具

  • vue-cli:Vue 脚手架工具,快速初始化项目代码
  • eslint:代码风格检查工具,帮助我们规范代码书写(一定要养成良好的代码规范)
  • iconfont :阿里巴巴图标库,谁用谁知道
  • fastclick :消除 click 移动游览器 300ms 的延

实现功能

播放器内核、推荐页面、热榜页面、歌手页面、歌单详情、歌手详情、排行榜详情、搜索页面、播放列表、用户中心等等功能。

推荐页面

推荐页分成三个部分,分别是 banner 轮播图、推荐歌单、推荐歌曲,数据都是使用 axios 请求 API 获取得到的,图片都使用 vue-lazyload 实现懒加载。

轮播图:使用 better-scroll 实现,具体可以看这里 Slide点击跳转方面只实现歌曲和歌单的跳转,因为暂时只实现了这两个功能。

推荐歌单,推荐歌曲:使用 vuex 管理数据,方便组件之间的数据交互(播放器播放歌曲)。因为数据上还有播放数量,所以就顺便也加上去了。

排行榜页面

同样是通过 API 获取到排行榜的数据,但是因为 API 获取到的是排行榜中所有歌曲的数据,所以难免在加载速度上有点慢,后期再看能不能优化一下,加载的慢毕竟太影响用户体验了,别的就没什么了。

歌手页面

实现歌手列表的左右联动(这个需要理解理解),因为之前已经写过和这个有关的博客,所以就不多写了,具体可以看我之前的这个笔记 移动端字母索引导航

歌曲列表组件

用来显示歌曲列表,在很多的地方都进行了复用,例如:歌单详情页、排行榜详情页、歌手详情页、搜索结果、用户中心等等。

歌单详情页

通过歌单的 ID 来获取歌单中的歌曲数据,然后还做了一些体验上面的交互,比如上滑显示状态栏然后将状态栏标题变为歌单名,具体可以尝试一下就知道了。

然后就是复用 歌曲列表组建 来显示歌曲。

排行榜详情、歌手详情

和歌单详情基本上没有什么区别,除了 UI 界面方面有细微的改动(根据不同的内容作出不同的优化)。

播放器

最最最重要的组件,毕竟是个音乐播放器,不能放歌那啥都是扯淡了。

实现功能:顺序播放、单曲循环、随机播放、收藏等。

播放、暂停使用 HTML5 的 audio 实现。

数据、播放状态、播放历史、习惯歌曲等方面使用了 vuex 来进行管理,因为数据太多,组件直接传递的话是会死人的,所以还是老老实实的用 vuex 吧,数据之前的传递真的很方便。

图标使用 iconfont 阿里巴巴图标库,中间的唱片旋转动画使用了 animation 实现。

歌词部分获取到网易的歌词数据,然后使用 第三方库 lyric-parser 进行处理。实现显示歌词、拖动进度条歌词同步滚动、歌词跟随歌曲进度高亮。

通过 localstorage 存储喜欢歌曲、播放历史数据。

audio 标签在移动端不能够自动播放的问题

电脑端是没有这个问题的,这个问题真的是让我很头大,最后是用了很鬼畜的方法解决了(使用 addEventListener 监听 touchend 事件,然后在回调函数中让 audio 播放一次,具体看 App.vue 文件,注释有写)。

播放列表

显示和管理当前播放歌曲,可以用来删除列表中的歌曲、以及选择播放歌曲。

搜索功能

实现功能:搜索歌手、歌单、歌曲、热门搜索、数据节流、上拉刷新、保存搜索记录。

通过关键字请求 API 获取搜索数据,显示歌手、歌单、歌曲。

实现了上刷新,因为搜索可以设置请求数据的条数,所以可以用来实现上刷新的功能。

通过节流函数实现数据节流,通过 localstorage 存储搜索数据。

用户中心

将在本地存储的数据显示出来,方便用户使用,后期准备添加更多功能。

TODO

  1. 优化排行榜加载速度
  2. 优化重复代码
  3. 增加歌曲评论
  4. 增加 MV、电台 功能
  5. emm,更多功能容我再想想哈

感谢

最后

最后的最后当然是厚着脸皮的再求个 star 啦,如果觉得我的项目还不错的话,就给个 star 鼓励一下吧~

聚合音乐WebAPP

阅读数 88

没有更多推荐了,返回首页