Vuejs2.0開發仿QQ音樂webpp案例分析

仿QQ音樂webapp是基于Vue2.0,vuex,vue-router,axios和html5的flexible box布局與及css3的transform,animation,transition組成。Vuejs是一套MVVM框架,主要注重于view層,實現數據雙向綁定與及虛擬DOM,解放你的雙手,讓你不用直接和真實的DOM進行操作,只要數據改變,vue自動檢查DOM結構不同,更新DOM元素結構。其中開發過程之中就遇到手動操作DOM,然后在樣式表之中書寫的樣式無法發揮作用,所以使用Vuejs構建SPA單頁應用的時候應該避免顯式地去操作DOM結構。

  • 運行效果如下所示,項目已經基本全部接上了QQ音樂的線上接口,利用Nodejs的express框架做http中間代理轉發前端請求,從而解決前端跨域事件。


    1.gif
    2.gif
  • 開發目錄是通過vue-cli腳手架生成的,其中webpack構建工具是3.10版本,下面是開發目錄的結構,其中紅色標注是比較主要的文件,其他都是腳手架自動生成的,vuejs開發邏輯與及思路主要放在src目錄進行講解:
    • folderStruct.jpg
  • src目錄結構如下所示,common是自定義邏輯文件,components主要放置開發的組件,router是vue-router定義的文件,store是vuex狀態管理器的定義文件夾,asset是腳手架生成的靜態文件夾。vuejs開發單頁面應用,采取的單一入口文件main.js(其中掛載需要在根組件掛載的資源),App.vue是默認的根組件:


    src.jpg
  • main.js入口文件代碼如下所示,在入口文件引入了vue-router路由,axios的http請求模塊,vuex全局狀態管理,vue-awesome-swiper輪播組件,fastclick(避免移動端點擊延遲300ms的效果)以及vue-lazyload懶加載模塊。
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import axios from 'axios'
import Vuex from 'vuex'
import store from './store/store.js'
import VueAwesomeSwiper from 'vue-awesome-swiper'
import VueLazyload from 'vue-lazyload'
import FastClick from 'fastclick'
FastClick.attach(document.body)
Vue.use(Vuex)
Vue.use(VueAwesomeSwiper)
Vue.use(VueLazyload,{
  preLoad:1.3,
  error:"../static/images/load.png",
  loading:"../static/images/load1.png",
  attempt:1
})
Vue.config.productionTip = false
Vue.prototype.$http=axios
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  template: '<App/>',
  components: { App }
})
  • vue-router引入頁面路由,對頁面組件進行導航,其中其他引入大多是自定義的頁面組件:
import Vue from 'vue'
import Router from 'vue-router'
import Index from "@/components/index"
import List from "@/components/List"
import Search from "@/components/Search"
import Toplist from "@/components/toplist"
import IndexList from '@/components/indexlist'
Vue.use(Router)
export default new Router({
  mode: 'history',
  routes: [
    {
      path:'/',
      redirect:'/recomment'
    },
    {
      path: '/recomment',
      name: 'Index',
      component: Index
    },{
      path: '/list',
      name: 'List',
      component: List
    },{
      path: '/search',
      name: 'Search',
      component: Search
    },{
      path:"/toplist",
      component:Toplist
    },{
      path:'/indexlist',
      component:IndexList
    },{
      path:"*",
      redirect:"/recomment"
    }]
})

  • 關于vuex全局保存各個組件需要共享的數據與及改變數據的邏輯,全部保存在store.js里面,這是關鍵文件。包括利用數組模擬隊列進行播放歌曲的保存,搜索歷史的保存等關鍵邏輯,全部保存在store.js里面。
/**
 * Created by Administrator on 2017/12/18 0018.
 */
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store =new Vuex.Store({
  //定義狀態
  state:{
    toggle:false,
    songPlayList:[{
      mid:'4962990',
      singerAvartar:"https://y.gtimg.cn/music/photo_new/T006R300x300M00000333So02drvak.jpg?max_age=2592000",
      songName:"七里香",
      singer:"周杰倫",
      songSrc:"http://dl.stream.qqmusic.qq.com/C400002ZKnKQ34rbZu.m4a?guid=957707267&vkey=A31FA931F2D4AE48FC9262A169955162673D2882402CF3D4E5FE40F32CD0035C97A18C3BEEA3AE0864D62ED9A8E0DDDC0853D532C1B055AB&uin=&fromtag=999"
    }],
    prevPlayList:[],
    searchHistory:[],
    Mkey:"guid=957707267&vkey=5C23405C26338354E28E61E4679EFE31BCE634C3BC1F4141131DA3C42E45F9C2F20CEA658F41B279C328AA7EB7219CB2B889FCC73918580D&uin=&fromtag=999"
  },
  mutations:{
    addSearchWord(state,word){
      state.searchHistory.push(word);
    },
    clearHistory(state){
      for(var i=0;i<state.searchHistory.length;i++){
        state.searchHistory.pop();
      }
    },
    changeTog(state,toggle){
      state.toggle=toggle;
    },
    nextSong(state,num){
      var prevSong=state.songPlayList.shift();
      state.prevPlayList.push(prevSong);
    },
    prevSong(state,num){

      var stackTop=state.prevPlayList.pop();
      state.songPlayList.unshift(stackTop);
    },
    changeList(state,index){

      var song=state.songPlayList.splice(index,1);
      state.songPlayList.unshift(song[0]);
    },
    addSong(state,data){
      for(var i=0;i<data.length;i++){
        var singleSong={
          singerAvartar:data[i].singerAvartar,
          songName:data[i].title,
          singer:data[i].singer,
          songSrc:data[i].songSrc,
          mid:data[i].mid
        };
        state.songPlayList.push(singleSong);
      }
    }
  }
})
export default store
  • App.vue組件是整個項目的根目錄組件,在這里掛載其他所有的組件。Mheader是QQ音樂的頭部,包括tab部分和狀態欄部分。router-view是將點擊tab單項匹配到路由組件加載到這塊內容。而musicDetail組件是可以查看音樂詳情的組件,采用在App.vue根組件掛載是為了其他加載跳轉操作不至于中斷音樂的播放。audio就是音樂控制面板,當音樂詳情關閉,則就以小化的面板控制音樂。

<template>
  <div id="app">
    <Mheader></Mheader>//頭部
    <router-view></router-view>//動態加載路由匹配的內容將生成這里
    <musicDetail></musicDetail>//為保證整個項目運行過程中,音樂播放器可以不中斷,把他掛載在App.vue
    <audioPane></audioPane>
    <audio id="play"  :src="songPlayList[0].songSrc" @ended="nextSong" @error="nextSong" preload="auto"></audio>//播放器audio
  </div>
</template>

<script type="text/ecmascript-6">
import Mheader from '@/components/my-header';
import audioPane from'@/components/AudioPane';
import musicDetail from '@/components/MusicDetail'
export default {
  components: {
      Mheader,
      audioPane,
      musicDetail,
    },
    methods: {
      nextSong(){

        if(this.$store.state.songPlayList){
          this.$store.commit("nextSong",1);
          var audio=document.getElementById('play');
          audio.addEventListener("canplaythrough", function(){
              audio.play();
          },false);
          if(!this.toggle){
            var state=!this.toggle;
            this.$store.commit('changeTog',state);
          }

        }else{
          console.log("not found this song");
        }

      }
    },
  computed:{
    songPlayList(){
      return this.$store.state.songPlayList;
    }
  },
  mounted() {
    //do something after mounting vue instance
    // this.$http.get("http://localhost:3000/songList").then((response)=>{
    //   var data=response.data.cdlist[0].songlist;
    //   this.$store.commit('addSong',data);
    // }).catch((e)=>{
    //   console.log(e);
    // });
  }
}
</script>

<style scoped>
body{
  margin:0;
  overflow: hidden !important;
}
</style>
  • 開發所采用得思路是,在App.vue掛載tab主要路由,通過<router-view>動態加載其他的組件,而musicDetail組件則內嵌在/recomment路由里面;list組件和toplist組件則以動態路由的防水進行加載之后,通過絕對定位的方式,定位在當前路由組件之上(通過z-index)完成。如果不想組件直接加載在App.vue的路由匹配區域,可以通過當前路由的子路由方式進行組件的加載。

  • 發過程中,可以了解很多Vuejs學習文檔之中不太了解的知識點,例如,使用ref避免了我們直接通過DOM進行操作。還有vuejs的transition過度組件的使用實際意義,在web開發過程之中,想display:none這樣突發性的轉換會破壞CSS3的動畫效果。所以采用官方的transition動畫可以很好解決問題。vuex全局狀態管理器可以為我們提供一個比較方便訪問的類似database。在使用router-view進行路由匹配的時候不要在外面加<keep-alive>,這樣會自動緩存數據,無法根據傳入的數據對模板自動重載;在使用vuejs的列表渲染的時候,加上Key(K大寫)可以使列表順序改變,模板會自動重新渲染,否則,不會出現改變的效果。對于音樂上的歌詞解釋感覺費力,請求的歌詞接口,返回的數據需要正則進行處理才可以真正使用在項目之中。其實比較糾結的是vuejs開發的路由加載問題,一直在想,vuejs開發單頁應用,在一個頁面里面動態加載其他的組件頁面,會不會對頁面造成很大的負載。對項目使用fastclick模塊,可以避免移動端的點擊延遲300ms效果;其次就是使用vuejs的懶加載模塊,懶加載圖片,提高用戶體驗,不會出現加載過程之中的空白情況。

github地址:https://github.com/Harhao/QQMusicPlayerWebApp;該項目依賴nodejs做中間http代理,api的github地址是:https://github.com/Harhao/api。如果覺得有幫助,可以給個star喲。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。