下载安装新依赖
babel-runtime：对es6语法进行转译
fastclick：对移动端进行点击300毫秒延迟 ,,取消掉
babel-polyfill：API
先添加，在npm install
main.js
import 'babel-polyfill' import Vue from 'vue' import App from './App' import router from './router' import fastclick from 'fastclick' import 'common/stylus/index.styl' Vue.config.productionTip = false // 取消点击300毫秒的延迟 fastclick.attach(document.body) /* eslint-disable no-new */ new Vue({ el: '#app', router, components: { App }, template: '<App/>' })
头部栏引用header组件
1：
<template> <div class="m-header"> <div class="icon"></div> <h1 class="text">Chicken Music</h1> <router-link tag="div" class="mine" to="/user"> <i class="icon-mine"></i> </router-link> </div> </template> <script type="text/ecmascript-6"> export default {} </script> <style scoped lang="stylus" rel="stylesheet/stylus"> @import "~common/stylus/variable" @import "~common/stylus/mixin" .m-header position: relative height: 44px text-align: center color: $color-theme font-size: 0 .icon display: inline-block vertical-align: top margin-top: 6px 30px height: 32px margin-right: 9px bg-image('logo') background-size: 30px 32px .text display: inline-block vertical-align: top line-height: 44px font-size: $font-size-large .mine position: absolute top: 0 right: 0 .icon-mine display: block padding: 12px font-size: 20px color: $color-theme </style>
2：在app.vue
<template>
<div id="app">
3：显式
<m-header></m-header>
</div>
</template>
<script>
1:导入
import MHeader from './components/m-header/m-header'
export default {
components:{
2：注册
MHeader
}
}
</script>
<style scoped lang="stylus" rel="stylesheet/stylus">
</style>
二：导入歌手页面，搜索页面，排行榜，推荐页面
1：先在index.js入口注册这4个组件
import Reacommed from 'components/reacommed/reacommed' import Search from 'components/search/search' import Singer from 'components/singer/singer' import Rank from 'components/rank/rank'
2：配置url
export default new Router({ routes: [ { path: '/reacommed', component:Reacommed }, { path:'/singer', component:Singer }, { path:'/rank', component:Rank }, { path:'/search', component:Search } ] })
import Vue from 'vue' import Router from 'vue-router' import Reacommed from 'components/reacommed/reacommed' import Search from 'components/search/search' import Singer from 'components/singer/singer' import Rank from 'components/rank/rank' Vue.use(Router) export default new Router({ routes: [ { path: '/reacommed', component:Reacommed }, { path:'/singer', component:Singer }, { path:'/rank', component:Rank }, { path:'/search', component:Search } ] })
3：如何引入router实例
import 'babel-polyfill' import Vue from 'vue' import App from './App' // 1这里的router是index。js的实例 import router from './router' import fastclick from 'fastclick' import 'common/stylus/index.styl' Vue.config.productionTip = false // 取消点击300毫秒的延迟 fastclick.attach(document.body) /* eslint-disable no-new */ new Vue({ el: '#app', // 2 router, components: { App }, template: '<App/>' })
注册url
import Vue from 'vue' import Router from 'vue-router' import Recommend from 'components/recommend/recommend' import Search from 'components/search/search' import Singer from 'components/singer/singer' import Rank from 'components/rank/rank' Vue.use(Router) export default new Router({ routes: [ { path: '/recommend', component:Recommend }, { path:'/singer', component:Singer }, { path:'/rank', component:Rank }, { path:'/search', component:Search } ] })
4：显示在App.vue页面
知识点：
router-linnk
a：里面有一个tag属性，控制其显示的为什么标签
如：tag=“a”，即显示为a标签
b：router-link-active
当前某个router-link被激活的时候，会添加样式
5：将导航条添加进去
a:先在app.vue导入进去tab组件
b:注册
c:渲染
<template>
<div id="app">
<m-header></m-header>
<tab></tab>
<router-view></router-view>
</div>
</template>
<script>
import MHeader from './components/m-header/m-header'
import Tab from './components/tab/tab'
export default {
components:{
MHeader,
Tab
}
}
</script>
<style scoped lang="stylus" rel="stylesheet/stylus">
</style>
url重定向
redirect
三：在app.vue导入组件
import MHeader from './components/m-header/m-header'
import Tab from './components/tab/tab'
首字母要大写，因为其本质上是class，class书写规范为首字母大写
jsonp
jsonp(url, opts, fn) url (String) url to fetch opts (Object), optional
param ： 指定回调函数名
timeout : 超时时间，默认一分钟
prefix ： __jp 默认添加前缀
name fn callback (回调函数)
四：抓取qq音乐的数据
XHR:ajax请求
1：可以自己手写
2：引用插件
下载安装jsonp
npm install jsonp
.jsonp是什么？jsonp是目前可以跨域的（基本上标签带有src属性的都是可以不受任何访问限制），且要动态生成script标签在ajax无法跨域的情况下可以使用jsonp进行请求但它跟ajax是不一样的..jsonp利用url链接进行请求发送和调用回调函数（callblack）使用数据。
1:封装一个jsonp方法
用于拼接url
import originJsonp from 'jsonp' // 引用 export default function jsonp(url, data, option) {
// 将url和data对象进行拼接成url拼接 url += (url.indexOf('?') < 0 ? '?' : '&') + param(data) // param 是一个拼接函数将data专门转化成url形式
return new Promise((resolve, reject) => { originJsonp(url, option, (err, data) => { if (!err) { resolve(data) } else { reject(err) } }) }) } export function param(data) { let url = '' for (var k in data) { let value = data[k] !== undefined ? data[k] : '' url += '&' + k + '=' + encodeURIComponent(value) } return url ? url.substring(1) : '' }
Promise对象有2个参数（resolve，reject）
resolve函数的作用是，将Promise对象的状态从“未完成”变为“成功”（即从 pending 变为 resolved），
在异步操作成功时调用，并将异步操作的结果，作为参数传递出去；
reject函数的作用是，将Promise对象的状态从“未完成”变为“失败”（即从 pending 变为 rejected），
在异步操作失败时调用，并将异步操作报出的错误，作为参数传递出去。
promise（）充当异步操作和回调函数的中介，起到代理的作用
param（）data数据对象转化成url格式
function param(data){ let url = ''; //遍历拼接对象 for(var k in data){ //以&a=123=yu=789 这样形式拼接 let value = data[k] !== undefined ?data[k] : ''; url += `&${k}=${encodeURIComponent(value)}`; //es6语法 } return url ? url.substring(1):''; }
在创建的config.js下写入jsonp请求通用公共参数
xport const commonParams = { g_tk: 5381, inCharset: 'utf-8', outCharset: 'utf-8', notice: 0, format: 'jsonp', }
// 设置常量 param export const options = { param: 'jsonpCallback' }
// 设置常量 错误信息 0 是 ok export const ERR_OK = 0
recommend.js文件下写入抓取QQ音乐轮播图需要发送数据
import jsonp from '../common/js/jsonp' //引入自定义封装的jsonp函数 import { commonParams, options } from './config' export function getRecommend() { //轮播图请求地址 const url = 'https://c.y.qq.com/musichall/fcgi-bin/fcg_yqqhomepagerecommend.fcg'; 利用es6对象方法进行浅拷贝将数组对象合并到第一个{}对象中 const data = Object.assign({}, commonParams, { platform: 'h5', uin: 0, needNewCode: 1 }) //调用jsonp方法 进行url拼接 return jsonp(url, data, options) }
.组件页面得到数据
将其js文件引入组件中
import {getRecommend} from 'api/recommend';
import {ERR_OK} from 'api/config'g'
获取数据
_getRecommend(){ //因为return new Promise中有.then表示如果异步成功完成就执行 getRecommend().then(res=>{ if(res.code === ERR_OK){ console.log(res.data.slider) this.recommend = res.data.slider;
//放入组件data中接着传入到轮播组件中使用v-for渲染 } }) }
编写拼接url的方法（getRecommend）
MusicJsonCallback30832226944503405({"code":0,
"subcode":0,"msg":"",
"data":{"total":4,"items":[{"from":2,"status":0,"msg_num":0},
{"from":4,"status":0,"msg_num":0},{"from":5,"status":0,"msg_num":0},
{"from":6,"status":0,"msg_num":0}]}})
从recommend调用getRecommend方法
推荐页面
recommend。vue
_getRecommend() { getRecommend().then((res) => { if(res.code === ERR_OK){ // 轮播图数据 this.recommends = res.data.slider } }) },
手写轮播图组件 base/slider
better-scroll文档**
slider.vue
<!-- 轮播图 --> <template> // slider为最外容器 <div class="slider" ref="slider"> // sliderGroup为内层容器 <div class="slider-group" ref="sliderGroup"> <slot> </slot> </div> </div> </template> <script> // 轮播图组件 import BScroll from 'better-scroll' import {addClass} from 'common/js/dom' export default{ data(){ return { dots:[] } }, props:{ loop:{ // 循环轮播 type:Boolean, default: true }, autoPlay:{ // 自动轮播 type:Boolean, default: true }, interval:{ // 时间间隔 type:Number, default:4000 } }, mounted(){ setTimeout(() =>{ this._setSliderWidth() this._initSlider() this._initDots() },20) }, methods:{ _setSliderWidth(){ this.children = this.$refs.sliderGroup.children let width = 0 let sliderWidth = this.$refs.slider.clientWidth for (let i = 0; i < this.children.length;i++){ let child = this.children[i] addClass(child,'slider-item') child.style.width = sliderWidth + 'px' width += sliderWidth } if(this.loop){ width += 2 * sliderWidth } this.$refs.sliderGroup.style.width = width + 'px' }, _initDots() { this.dots = new Array(this.children.length-2) }, _initSlider(){ this.slider = new BScroll(this.$refs.slider,{ scrollX:true, scrollY:false, momentum:false, snap:true, snapLoop:this.loop, snapThreshold:0.3, snapSpeed:400, click:true } ) } } } </script> <style scoped lang="stylus" rel="stylesheet/stylus"> @import "~common/stylus/variable" .slider min-height: 1px .slider-group position: relative overflow: hidden white-space: nowrap .slider-item float: left box-sizing: border-box overflow: hidden text-align: center a display: block 100% overflow: hidden text-decoration: none img display: block 100% .dots position: absolute right: 0 left: 0 bottom: 12px text-align: center font-size: 0 .dot display: inline-block margin: 0 4px 8px height: 8px border-radius: 50% background: $color-text-l &.active 20px border-radius: 5px background: $color-text-ll </style>
<div class="slider" ref="slider">---> 最外层容器 <div class="slider-group" ref="sliderGroup">---> 内层容器 sliderGroup轮播图，只能设置宽度，高度固定 1：获取整个列表有多少个元素 this.children = this.$refs.sliderGroup.children 2：父元素的宽度，图片撑开的宽度 let sliderWidth = this.$refs.slider.clientWidth
给轮播图图片添加样式
（手动写的class，耦合性太强）
a、dom。js--->只对dom元素进行操作的方法（通用）
b、再导入dom。js
// 对dom元素操作的组件 import {addClass} from 'common/js/dom'
c、将slider-item样式添加进去
addClass(child,'slider-item')
计算部分
// 子容器的宽度 要等于父容器的宽度 需要添加单位'px'
child.style.width = sliderWidth + 'px'
// 总宽度需要+父容器的宽度
width += sliderWidth
loop:{
// 循环轮播
type:Boolean,
default: true
},
// 保证其能进行循环切换，需克隆2个sliderWidth-->即宽度需要加2倍sliderWidth
if(this.loop && !isResize){
width += 2 * sliderWidth
}
最后设置宽度
this.$refs.sliderGroup.style.width = width + 'px'
问题：当后面方法需要获取数据时，而获取数据的方法还未执行完毕
在recommend。vue进行判断数据长度
<div v-if='recommends.length' class="slider-wrapper"> <slider> <div v-for="item in recommends"> <a :href="item.linkUrl"> <img :src="item.picUrl"> </a> </div> </slider> </div>
recommend.vue推荐页面
<!-- 推荐页面 -->
<template>
<div class="recommend">
<div class="recommend-content">
<!-- 轮播图 -->
<div v-if='recommends.length' class="slider-wrapper">
<slider>
<div v-for="item in recommends">
<a :href="item.linkUrl">
<img :src="item.picUrl">
</a>
</div>
</slider>
</div>
<div class="recommend-list">
<h1 class="list-title">热门歌单推荐</h1>
</div>
<ul>
</ul>
</div>
</div>
</template>
<script>
// 导入轮播图组件
import Slider from 'base/slider/slider'
// 导入获取轮播数据的方法
import {getRecommend} from 'api/recommend'
// 语义化下面的err_ok
import {ERR_OK} from 'api/config'
// 获取数据created
export default {
data() {
// 定义轮播图数据
return{
recommends:[]
}
},
// 钩子函数
created() {
this._getRecommend()
},
methods: {
_getRecommend() {
getRecommend().then((res) => {
if(res.code === ERR_OK){
// 轮播图数据
this.recommends = res.data.slider
}
})
}
},
components:{
Slider,
}
}
</script>
<style scoped lang="stylus" rel="stylesheet/stylus">
@import "~common/stylus/variable"
.recommend
position: fixed
100%
top: 88px
bottom: 0
.recommend-content
height: 100%
overflow: hidden
.slider-wrapper
position: relative
100%
overflow: hidden
.recommend-list
.list-title
height: 65px
line-height: 65px
text-align: center
font-size: $font-size-medium
color: $color-theme
.item
display: flex
box-sizing: border-box
align-items: center
padding: 0 20px 20px 20px
.icon
flex: 0 0 60px
60px
padding-right: 20px
.text
display: flex
flex-direction: column
justify-content: center
flex: 1
line-height: 20px
overflow: hidden
font-size: $font-size-medium
.name
margin-bottom: 10px
color: $color-text
.desc
color: $color-text-d
.loading-container
position: absolute
100%
top: 50%
transform: translateY(-50%)
</style>
轮播图下的圆圈
<!-- 轮播图 -->
<template>
<div class="slider" ref="slider">
<div class="slider-group" ref="sliderGroup">
<slot>
</slot>
</div>
<!-- 圆圈 -->
<div class="dots">
<span class="dot" v-for = 'item in dots'></span>
</div>
</div>
</template>
<script>
// 轮播图组件
import BScroll from 'better-scroll'
import {addClass} from 'common/js/dom'
export default{
data(){
return {
dots:[]
}
},
props:{
loop:{
// 循环轮播
type:Boolean,
default: true
},
autoPlay:{
// 自动轮播
type:Boolean,
default: true
},
interval:{
// 时间间隔
type:Number,
default:4000
}
},
mounted(){
setTimeout(() =>{
this._setSliderWidth()
this._initSlider()
this._initDots()
},20)
},
methods:{
_setSliderWidth(){
this.children = this.$refs.sliderGroup.children
let width = 0
let sliderWidth = this.$refs.slider.clientWidth
for (let i = 0; i < this.children.length;i++){
let child = this.children[i]
addClass(child,'slider-item')
child.style.width = sliderWidth + 'px'
width += sliderWidth
}
if(this.loop){
width += 2 * sliderWidth
}
this.$refs.sliderGroup.style.width = width + 'px'
},
_initDots() {
this.dots = new Array(this.children.length-2)
},
_initSlider(){
this.slider = new BScroll(this.$refs.slider,{
scrollX:true,
scrollY:false,
momentum:false,
snap:true,
snapLoop:this.loop,
snapThreshold:0.3,
snapSpeed:400,
click:true
}
)
}
}
}
</script>
<style scoped lang="stylus" rel="stylesheet/stylus">
@import "~common/stylus/variable"
.slider
min-height: 1px
.slider-group
position: relative
overflow: hidden
white-space: nowrap
.slider-item
float: left
box-sizing: border-box
overflow: hidden
text-align: center
a
display: block
100%
overflow: hidden
text-decoration: none
img
display: block
100%
.dots
position: absolute
right: 0
left: 0
bottom: 12px
text-align: center
font-size: 0
.dot
display: inline-block
margin: 0 4px
8px
height: 8px
border-radius: 50%
background: $color-text-l
&.active
20px
border-radius: 5px
background: $color-text-ll
</style>
将轮播图当前页与小圆圈绑定样式
<div class="dots">
<span class="dot" v-for = '(item,index) in dots' :class="{active: currentPageIndex === index}">
</span> </div>
index--->索引当前第几个元素
添加样式active
:class="{active: currentPageIndex === index}">
currentPageIndex：标识当前页数
需要先在data（） 方法里面初始化currentPageIndex
export default{ data(){ return { dots:[], // 标识当前页数 currentPageIndex: 0 } },
到索引的页面就添加active类
当前对象。也就是指.dot
当dot是active的时候，就添加样式
维护currentPageIndex
currentPageIndex什么时候切换的？如何将滚动到的页面与currentPageIndex结合？ 当初始化slider的时候，绑定事件 // 当滚动到下一张会触发scrollEnd事件 scrollEnd事件会派发一个回调函数 this.slider.on('scrollEnd', ()=>{ // 获取当前 getCurrentPage()为slider的方法 返回的对象有个pageX方法 pageX--->当前第几个元素 let pageIndex = this.slider.getCurrentPage().pageX if (this.loop) { pageIndex -= 1 //再循环模式下，会默认在第一个元素添加一个拷贝 所以要减1 } this.currentPageIndex = pageIndex })
这里我们用到了 Vue 的特殊元素—— slot 插槽，它可以满足我们灵活定制列表 DOM 结构的需求。接下来我们来看看 JS 部分： <script type="text/ecmascript-6"> import BScroll from 'better-scroll' export default { props: { /** * 1 滚动的时候会派发scroll事件，会截流。 * 2 滚动的时候实时派发scroll事件，不会截流。 * 3 除了实时派发scroll事件，在swipe的情况下仍然能实时派发scroll事件 */ probeType: { type: Number, default: 1 }, /** * 点击列表是否派发click事件 */ click: { type: Boolean, default: true }, /** * 是否开启横向滚动 */ scrollX: { type: Boolean, default: false }, /** * 是否派发滚动事件 */ listenScroll: { type: Boolean, default: false }, /** * 列表的数据 */ data: { type: Array, default: null }, /** * 是否派发滚动到底部的事件，用于上拉加载 */ pullup: { type: Boolean, default: false }, /** * 是否派发顶部下拉的事件，用于下拉刷新 */ pulldown: { type: Boolean, default: false }, /** * 是否派发列表滚动开始的事件 */ beforeScroll: { type: Boolean, default: false }, /** * 当数据更新后，刷新scroll的延时。 */ refreshDelay: { type: Number, default: 20 } }, mounted() { // 保证在DOM渲染完毕后初始化better-scroll setTimeout(() => { this._initScroll() }, 20) }, methods: { _initScroll() { if (!this.$refs.wrapper) { return } // better-scroll的初始化 this.scroll = new BScroll(this.$refs.wrapper, { probeType: this.probeType, click: this.click, scrollX: this.scrollX }) // 是否派发滚动事件 if (this.listenScroll) { let me = this this.scroll.on('scroll', (pos) => { me.$emit('scroll', pos) }) } // 是否派发滚动到底部事件，用于上拉加载 if (this.pullup) { this.scroll.on('scrollEnd', () => { // 滚动到底部 if (this.scroll.y <= (this.scroll.maxScrollY + 50)) { this.$emit('scrollToEnd') } }) } // 是否派发顶部下拉事件，用于下拉刷新 if (this.pulldown) { this.scroll.on('touchend', (pos) => { // 下拉动作 if (pos.y > 50) { this.$emit('pulldown') } }) } // 是否派发列表滚动开始的事件 if (this.beforeScroll) { this.scroll.on('beforeScrollStart', () => { this.$emit('beforeScroll') }) } }, disable() { // 代理better-scroll的disable方法 this.scroll && this.scroll.disable() }, enable() { // 代理better-scroll的enable方法 this.scroll && this.scroll.enable() }, refresh() { // 代理better-scroll的refresh方法 this.scroll && this.scroll.refresh() }, scrollTo() { // 代理better-scroll的scrollTo方法 this.scroll && this.scroll.scrollTo.apply(this.scroll, arguments) }, scrollToElement() { // 代理better-scroll的scrollToElement方法 this.scroll && this.scroll.scrollToElement.apply(this.scroll, arguments) } }, watch: { // 监听数据的变化，延时refreshDelay时间后调用refresh方法重新计算，保证滚动效果正常 data() { setTimeout(() => { this.refresh() }, this.refreshDelay) } } } </script>
JS 部分实际上就是对 better-scroll 做一层 Vue 的封装，通过 props 的形式，
把一些对 better-scroll 定制化的控制权交给父组件；
通过 methods 暴露的一些方法对 better-scroll 的方法做一层代理；
通过 watch 传入的 data，当 data 发生改变的时候，
在适当的时机调用 refresh 方法重新计算 better-scroll 确保滚动效果正常，
这里之所以要有一个 refreshDelay 的设置是考虑到如果我们对列表操作用到了 transition-group 做动画效果
，那么 DOM 的渲染完毕时间就是在动画完成之后。 有了这一层 scroll 组件的封装，我们来修改刚刚最复杂的代码（假设我们已经全局注册了 scroll 组件）。 <template> <scroll class="wrapper" :data="data" :pulldown="pulldown" @pulldown="loadData"> <ul class="content"> <li v-for="item in data">{{item}}</li> </ul> <div class="loading-wrapper"></div> </scroll> </template> <script> import BScroll from 'better-scroll' export default { data() { return { data: [], pulldown: true } }, created() { this.loadData() }, methods: { loadData() { requestData().then((res) => { this.data = res.data.concat(this.data) }) } } } </script> 可以很明显的看到我们的 JS 部分精简了非常多的代码，没有对 better-scroll 再做命令式的操作了，
同时把数据请求和 better-scroll 也做了剥离，父组件只需要把数据 data 通过 prop 传给 scroll 组件，
就可以保证 scroll 组件的滚动效果。
同时，如果想实现下拉刷新的功能，只需要通过 prop 把 pulldown 设置为 true，
并且监听 pulldown 的事件去做一些数据获取并更新的动作即可，整个逻辑也是非常清晰的。
动态的给子元素设置宽度，当能滑动或者自动轮播的时候，子元素的宽度乘以2，用来切换，因为轮播图想无缝滑动，
必须将第一张图放到最后一个位置，最后一张图放到第一张的位置前面，假如有五个轮播图的话，
事实上，获取的宽度是七张图的宽度。
自动播放
slider.vue
props:{ loop:{ // 循环轮播 type:Boolean, default: true }, autoPlay:{ // 自动轮播 ype:Boolean, default: true
优化：
当屏幕宽度变化的时候，图片错位，而宽度是由sliderWidth控制的
方法： 监听Windows的resizer事件，重新渲染sliderWidth
//监听窗口改变事件 window.addEventListener('resize', () => { if (!this.slider){
// 初始化的时候直接返回 return } // 重新调用计算宽度的方法 this._setSliderWidth(true) }) },
window窗口改变事件：resize
addEventListener() 方法
用于向指定元素添加事件句柄
element.addEventListener(event, function, useCapture)
参数： event： 必须。字符串，指定事件名。 注意: 不要使用 "on" 前缀。 例如，使用 "click" ,而不是使用 "onclick" function 必须。指定要事件触发时执行的函数。 当事件对象会作为第一个参数传入函数。 事件对象的类型取决于特定的事件。例如， "click" 事件属于 MouseEvent(鼠标事件) 对象。 useCapture 可选。布尔值，指定事件是否在捕获或冒泡阶段执行。 可能值: true - 事件句柄在捕获阶段执行 false- false- 默认。事件句柄在冒泡阶段执行
添加标志位，重置过的设置为true
methods:{
// isResize标志位判读是不是重置过来的 _setSliderWidth(isResize){ this.children = this.$refs.sliderGroup.children let width = 0 let sliderWidth = this.$refs.slider.clientWidth for (let i = 0; i < this.children.length;i++){ let child = this.children[i] addClass(child,'slider-item') child.style.width = sliderWidth + 'px' width += sliderWidth }
// && !isResize if(this.loop && !isResize){
// 刚开始进来只需要加一次宽度 width += 2 * sliderWidth } this.$refs.sliderGroup.style.width = width + 'px' },
知识点
1：slot---> 插槽
2：使用better-scroll
3：created和mounted
created:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。
mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。
其实两者比较好理解，通常created使用的次数多，而mounted通常是在一些插件的使用或者组件的使用中进行操作，比如插件chart.js的使用: var ctx = document.getElementById(ID);通常会有这一步，而如果你写入组件中，你会发现在created中无法对chart进行一些初始化配置，一定要等这个html渲染完后才可以进行，那么mounted就是不二之选。下面看一个例子（用组件）。