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'
})