Vue2.0 開發移動端音樂webApp 筆記

時間 2019-11-12

標籤 vue2.0 vue 開發移動音樂 webapp 筆記欄目無線简体版

原文原文鏈接

項目預覽地址：http://ustbhuangyi.com/music/#/recommendcss

獲取歌曲 url 地址方法升級：https://github.com/ustbhuangyi/vue-music/issues/111html

參考：vue

https://github.com/ustbhuangyi/vue-music/issues/166

https://github.com/ustbhuangyi/vue-music/issues/164

https://github.com/ustbhuangyi/vue-music/issues/136

https://github.com/ustbhuangyi/vue-music/issues/111

https://github.com/ustbhuangyi/vue-music/issues/114

https://github.com/ustbhuangyi/vue-music/issues/77

一、能夠把一些經常使用的、操做dom的方法封裝到js裏面，好比addClassgit

二、頁面中的方法，儘可能封裝成一個個小方法，減小每一個方法裏面的代碼github

三、recommend.vue，爲何要在引入輪播圖插件的外面進行判斷？緣由是：created（）{} 裏面獲取數據是一個異步操做,請求後臺數據須要一點時間web

四、slider.vue，mounted裏的setTimeout的時間爲20的緣由，瀏覽器刷新一次的時間爲17毫秒npm

五、app.vue 編程

當切換組件後，再切回來，數據會再請求一次api

優化方法數組

在app.vue裏面，添加

1 <keep-alive>
2       <router-view></router-view>
3 </keep-alive>

添加keep-alive後，數據會保存到內存中

六、slide.vue

1 destroyed () {
2   clearTimeout(this.timer)
3 }

當組件被切換出去，生命週期就進入到destroyed，要進行clearTimeout。

注意：當組件中用到了計時器時，要在destroyed中進行clearTimeout，釋放內存資源，這是一種好的編程習慣

七、scroll.vue組件

經過監控data數據的變化來調用refresh()方法

8.、recommend.vue組件

在使用scroll組件的時候，傳入data的爲discList的緣由是：

discList數據後獲取，但有一個問題，若是recommend數據沒有獲取到，或者在discList數據以後獲取，那麼滾動的時候，就會少了下面這一塊區域

解決的辦法：

結果分析：上面這一塊的高度，是由圖片撐開的，因此咱們能夠給圖片綁定一個load方法，當圖片加載時，就調用

1 loadImage () {
2   if (!this.checkloaded) {
3     this.checkloaded = true
4     setTimeout(() => {
5       this.$refs.scroll.refresh()
6     }, 20)
7   }
8 }

小技巧：圖片有不少，咱們不須要每一張圖片都調用load方法，能夠添加有一個判斷值 this.checkloaded

九、在頁面中，咱們要加載不少圖片，不須要一次性所有加載，只要滑動到相應位置再加載，這時候就須要用到vue-lazyload

地址:https://github.com/hilongjw/vue-lazyload

使用方法，先用npm 安裝vue-lazyload

main.js 引入vue-lazyload

須要用到的地方

<img>標籤裏面，把:src改爲v-lazy

十、當一個組件中，同時使用了fastclick 和better-scroll,且better-scroll設置了click:true屬性，這時會出現一個問題，

沒法點擊了，解決辦法是，在Iimg處設置class="needsclick"，這個是fastclick的屬性

十一、數據沒有加載時顯示的效果，請看 loading.vue

十二、singer.vue

數組進行排序，用來sort方法，sort方法內部的返回倆個數的charCodeAt相減的bollean值

1三、listview.vue

這個表示向下取整，緣由：

由於|這個是或位操做符，意思是先將數值轉換成32位二進制整數值（若是有小數則忽略），再對二進制上每一位進行或運算，得出結果；

這裏xxx|0，由於0的二進制就是0000000...00一共32位（32個0），不管任何數對0進行或運算都是原來的數，所以能夠用它來進行向下取整

1四、scroll.vue （第5章用到）

1五、

1六、子路由的配置

router文件夾下的Index.js裏面

singer.vue裏面

// router的編程式調用接口，相似於申明式<router-link :to="...">
參考地址：http://blog.csdn.net/sinat_17775997/article/details/68941091

1七、在vue中，用export註冊的東西，其餘頁面獲取的時候，要用 import {Xx} from ，或者import * as 本身起的名字 from

1八、singer-datail.vue

刷新詳情頁的時候，由於沒有singer.id，容易要加這個判斷，返回到singer頁面。（小技巧）

1九、singer-detail.vue

這塊定義musicData的時候，爲何要用{musicData}?

item：是這樣的

一個object裏面包含一個musicData的object，這個項目咱們只須要musicData，因此能夠這樣定義：{musicData}

20、music-list.vue

這塊爲何要用this.$refs.list.$el.style.top這種方法

由於this.$refs.list是Vuecomponent

使用了$el,才能返回dom,，才能夠用來設置style

2一、music-list.vue

若是this.$refs.layer是dom。要設置style,上面這倆種方式均可以

2二、dom.js

在script裏面設置style,咱們須要兼容各類瀏覽器，爲了避免須要重複寫代碼，在dom.js裏面封裝了相應的方法

 1 let vendor = (() => {
 2   let transformNames = {
 3     webkit: 'webkitTransform',
 4     Moz: 'MozTransform',
 5     O: 'OTransform',
 6     ms: 'msTransform',
 7     standard: 'transform'
 8   }
 9   for (let key in transformNames) {
10     if (elementStyle[transformNames[key]] !== undefined) {
11       return key
12     }
13   }
14   return false
15 })()
16 export function prefixStyle (style) {
17   if (vendor === false) {
18     return false
19   }
20 
21   if (vendor === 'standard') {
22     return style
23   }
24 
25   return vendor + style.charAt(0).toUpperCase() + style.substr(1)
26 }

如何使用

music-list.vue

1 const transform = prefixStyle('transform')
2 
3 this.$refs.layer.style[transform]=`translate3d(0,${translateY}px,0)`

2三、切記mapMutations是{}，mapActions是[]

2四、play.vue

解析裏面的值：

//      獲取初始位置和初始縮放比例
      _getPosAndScale () {
        const targetWidth = 40 // mini左側圖標大小
        const paddingLeft = 40 // mini左側圖標距離左側的長度
        const paddingBottom = 30 // mini左側圖標距離底部的長度
        const paddingTop = 80 // nomal唱片距離頭部的長度
        const width = window.innerWidth * 0.8 // nomal唱片一半的寬度
        const scale = targetWidth / width
        const x = -(window.innerWidth / 2 - paddingLeft)
        const y = window.innerHeight - paddingTop - width / 2 - paddingBottom
        return {
          x,
          y,
          scale
        }
      },

1是targetWidth 2是paddingBottom 3是paddingLeft 4是paddingTop 5是X 6是Y

2五、play.vue

這部分講的是如何用vue鉤子實現css動畫（之後能夠看）

2六、play.vue

快速點擊上一首、下一首的時候，會出現上面的錯誤，這是由於audio標籤裏面有play（從加載到播放執行）和error（url錯誤或者因爲昂羅問題沒有url執行）倆個方法

解決辦法是：

給audio綁定play和error方法，定義一個songReady變量，在ready和error裏面，修改songReady的值

2六、play.vue

1  let index = list.findIndex((item) => {
2           return item.id === this.currentSong.id
3         })

數組findIndex（條件）傳入一個測試條件，符合就返回相應的Index

連接：http://www.runoob.com/jsref/jsref-findindex.html

2七、common.js/song.js

1 getLyric () {
2     getLyric(this.mid).then((res) => {
3       if (res.retcode === ERR_OK) {
4         this.lyric = Base64.decode(res.lyric)
5         console.log(this.lyric)
6       }
7     })
8   }