chopper云音乐开发笔记

依赖版本号

  "dependencies": {
    "axios": "^0.18.0",
    "fastclick": "^1.0.6",
    "jsonp": "^0.2.1",
    "vue": "^2.5.2",
    "vue-awesome-swiper": "^3.1.3",
    "vue-router": "^3.0.1"
  },

问题总汇

1. 开发前的准备工作

1) vue-cli脚手架安装

vue init webpack my-project

2) 配置meta标签

  <meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">

3) 解决移动端300ms延迟

//main.js
import FastClick from 'fastclick'
FastClick.attach(document.body)

4) 解决抓取接口的跨域问题
（没用原视频讲的jsonp方法）
参考文章：
https://blog.csdn.net/u012369...
https://blog.csdn.net/fabulou...

2. props中 数组和对象 的写法

   props: {
    items: {
      type: Array,
      default () {
        return []
      }
    }
   }

3. <keep-alive>缓存路由页面

<keep-alive>
    <router-view/>
</keep-alive>

了解更多<keep-alive>: https://segmentfault.com/a/11...

4. promise封装

   new Promise((resolve, reject) => {
    jsonp(url, option, (err, data) => {
      if (!err) {
        console.log(data);
        reslove(data)
      } else {
        console.error(err)
        reject(reject)
      }
    })
  })

5. get请求的url拼接

     url += (url.indexOf('?') < 0 ? '?' : '&') + param(data)

    function param (data) {
      let url = ''
      for (let i in data) {
        let value = data[i] !== undefined ? data[i] : ''
        url += `&${i}=${encodeURIComponent(value)}`
      }
      return url ? url.substring(1) : ''
    }

6. encodeURI() 与 encodeURIComponent()区别

encodeURI()是对整个URL编码的函数，对特殊含义的符号"; / ? : @ & = + $ , #"不进行编码，解码函数decodeURI()。
encodeURIComponent()能编码"; / ? : @ & = + $ , #"这些特殊字符，解码函数decodeURIComponent()。
例：

encodeURIComponent('{ "ct": 24 }') // 结果： "%7B%20%22ct%22%3A%2024%20%7D"
encodeURI('{ "ct": 24 }')  //结果："%7B%20%22ct%22:%2024%20%7D"

参考文章： https://www.cnblogs.com/huzi0...

7. scoped 与 module区别

网上一搜一大堆内容，我用的module，就是每次写$style.className好头疼。。。

8. css样式：两行后省略

display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;

9. 箭头函数与普通函数中的this指向

见我提的问题：https://segmentfault.com/q/10...
参考文章：https://www.cnblogs.com/freel...

10. slice(),splice(),split()用法

slice:

返回为新数组，原数组没有变化
var arr= [1,2,3,4];
var sliceArr= arr.slice(1,2);
此时arr还是[1,2,3,4],sliceArr是[2]

splice:

返回被删除的项目，原数组发生变化
arrayObject.splice(index,howmany,item1,.....,itemX),
第一个参数是删除的index，第二个是数量，第三个和之后的是插入的内容，从第一个参数开始的位置插入。

var arr=[1,2,3,4,5,6];
arr.splice(1,2,7);
返回[2,3]，arr是[1,7,4,5,6]

split:
把一个字符串分割成字符串数组
var str="1-2-3-4";
var spliteStr = str.split("-");
返回数组[1,2,3,4]

11. vue-awesome-swiper 设置swiperOption参数无效，自动轮播无效。

个人理解：
需要组件有高度时才能轮播，即需要先有元素渲染
参考文章：https://blog.csdn.net/m0_3788...

//在slider组件上加 v-if="items.length"功能可实现，其中items是轮播图数组数据。
<slider :swiperOption=options :items="bannerList"  v-if="items.length"/>

鼠标翻页后，自动轮播又无效？？
未解决

12. vue浏览器小图标不显示

将favicon.icon放在根目录下（与 index.html同级）
我用的vue-cli，需要配置webpack.dev.conf.js:

new HtmlWebpackPlugin({
    filename: 'index.html',
    template: 'index.html',
    inject: true,
    favicon: './favicon.ico'  
})

参考文章：https://www.jianshu.com/p/877...

13.vue懒加载插件： vue-lazyload

14. $emit

实现功能： 点击基础组件的某个元素进行二级路由跳转
不在基础组件中做业务逻辑

//base.vue
<template>
  <div>
    <h2 @click="recommendMore">更多推荐</h2>  
  </div>
</template>

 methods: {
   recommendMore () {
     this.$emit('recomMore')
   }
  }

//home.vue
 <base @recomMore="recomMore"/>

  methods: {
    recomMore () {
      this.$router.push({
        path: '/recommend/recommendMore'
      })
    }
  }

15. 二级子页面滚动完成后继续滚动一级页面？

未解决

16. 什么时候用vuex

如vuex文档所，它就像眼镜，自会知道什么时候需要它。
所要实现的功能：
点击一组列表，跳转到每个列表的详情页，
而详情的数据获取依赖于被点击的某个列表的id，
此时需要将id传到 路由跳转到的二级页面。

在click 每个item时，除了实现跳转功能，还要实现将数据传到跳转页面

    clickItem(item) {
      this.$router.push({
        path: `/recommend/${item.content_id}`
      })
      //在这里调详情接口数据能获得到，但是传不到跳转页面 需vuex？嗯，需vuex!! 直接将所需参数传过去，在详情页调用详情接口。
      
      this.setRecommend(item)

（这里卡了好长时间，一直在找数据传递的方法，没思考到要用vuex）

17. 重启项目npm run dev时，报错

Error parsing D:\project\myworkplace\vue-music\my-music\node_modules\_node-libs-browser@2.1.0@node-libs-browser\node_modules\crypto-browserify\package.json

打开报错文件目录下的package.json为空，上次打开还可以正常运行，不知道报错原因。
因为是调用的qq音乐的接口，估计跟接口发生了变动有关？
我的思路：
注释掉相关接口，重启 (无效)
删除node_modules，再重新安装一遍（代价太大，想了想然后放弃）
原因：
与原依赖对比，package.json不应该是空，应该是有内容的。怀疑是自己午休时不注意碰到按键删除了。。。。
将package.json内容恢复后项目正常运行。
crypto-browserify地址：https://github.com/crypto-bro...

18.刷新子组件页面时数据失效

未解决

19. 列表上拉时bg-layer随着向上移动。

未解决

20. vue jsonp接口返回200，但报错“Uncaught ReferenceError: jsonCallback is not defined” ，前端取不到数据。

原因：
jsonp自身增加了一个参数： callback=__jp1， 这个参数不是我想要的，与后台协议好的参数是： jsonCallback: jsonCallback
所以需要自定义callback的名和值,即设置option:

  const option = {
    param: 'jsonCallback', //名
    prefix: 'jsonCallback' //值
  }

但是，这样设置还不够，设置的值会自己在后边加数字，会出现jsonCallback0 jsonCallback1。。。等情况。
所以还需要最后一步，修改jsonp源码index.js如下代码：

 // var id = opts.name || (prefix + (count++));  //源代码
  var id = opts.name || prefix;//修改后代码，禁止参数自增

21. vue-router跳转问题

有一组id，当id= 2时跳转到mv页面，其他时候跳转到song页面。
我的问题： 虽然在点击调转时做了判断，链接也跳到了nv页面，但是渲染的却是song的页面

//router下的index.js
{
  path: '/home',
  name: 'Home',
  component: Home,
  children: [
{
  path: ':id',
  component: SongDetail
},
{
  path: 'mv',
  component: MvDetail
}]
}

//home.vue下的click点击跳转方法

click(item) {
  if (item.id === 2) {
    this.$router.push({
    path: '/home/mv'
})
  }
  else {
    this.$router.push({
    path: `/home/${item.id}`
})
  }
},

解决方法：将router index.js路由交换，将mv放上边，如下：

{
  path: '/home',
  name: 'Home',
  component: Home,
  children: [{
  path: 'mv',
  component: MvDetail
},
{
  path: ':id',
  component: SongDetail
}]
}

22. v-lazy默认图片怎么根据不同实际图片尺寸发生变化

未解决

23. vuex报错："Error: [vuex] Expects string as the type, but found undefined."

actions写错：

//错误写法
import mutationTypes from './mutation-types'

export const clickPlayerItem = function ({ commit }, { playList, index }) {
  commit(mutationTypes.SET_PLAYLIST, playList)
  commit(mutationTypes.playIndex, index) //错误在这里，将SET_PLAYINDEX 写成了 playIndex，导致报错
}

//正确写法
export const clickPlayerItem = function ({ commit}, { playList, index }) {
  commit(mutationTypes.SET_PLAYLIST, playList)
  commit(mutationTypes.SET_PLAYINDEX, index)
}

24. [Vue warn]: Computed property "showBigPlayer" was assigned to but it has no setter

showBigPlayer 是从vuex中获取，改变时不能直接像如下代码这样改变：

    back () {
       this.showBigPlayer = false
    }

应该通过mapMutations进行值的改变，正确代码如下：

back () {
  this.setShowBigPlayer(false)
},
 ...mapMutations({
  setShowBigPlayer: 'SET_SHOW_BINGPLAYER'
})