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

《chopper云音乐开发笔记》

打开报错文件目录下的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'
})
    原文作者:豌豆突突突
    原文地址: https://segmentfault.com/a/1190000015957692
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞