完成项目的基本功能，并添加readme.md说明

godlovejack · Feb 15, 2017 · 4221106 · 4221106
1 parent 63dcd05
commit 4221106
Show file tree

Hide file tree

Showing 12 changed files with 71 additions and 34 deletions.
diff --git a/README.md b/README.md
@@ -1,8 +1,21 @@
 # netease-clound-webapps
 
-> A Vue.js project
+> 这是一个用VUEJS写高仿网易云音乐的webapp，只实现了APP的核心功能，这个项目会长期进行更新。
 
-## Build Setup
+[在线地址](http://vuetest-001-site1.btempurl.com/)
+
+### 技术栈
+- 传说中的VUE全家桶(vue vue-router vuex)
+- axios
+- Muse-UI(一个基于Vue2.x的material design 风格UI框架)
+
+## 运行截图
+![首页](https://github.com/javaSwing/NeteaseCloudWebApp/raw/master/screenshots/1.png)
+![详情](https://github.com/javaSwing/NeteaseCloudWebApp/raw/master/screenshots/2.png)
+![动图](https://github.com/javaSwing/NeteaseCloudWebApp/raw/master/screenshots/3.gif)
+![动图](https://github.com/javaSwing/NeteaseCloudWebApp/raw/master/screenshots/4.png)
+
+## 安装运行（Build Setup）
 
 ``` bash
 # install dependencies
@@ -24,4 +37,8 @@ npm run e2e
 npm test
 ```
 
-For detailed explanation on how things work, checkout the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader).
+## TODO
+
+- [ ]  实现音乐播放器的播放模式
+- [ ]  实现音乐列表的显示
+
diff --git a/index.html b/index.html
@@ -3,17 +3,21 @@
 <head>
   <meta charset="utf-8">
   <title>Netease-Clound</title>
-  <!--忽略电话号码和email识别-->
-  <meta name="format-detection" content="telephone=no" />
-  <meta name="format-detection" content="email=no" />
-  <!--当网站添加到主屏幕快速启动方式，将网站添加到主屏幕快速启动方式-->
-  <meta name="apple-mobile-web-app-capable" content="yes" />
-  <!--隐藏ios上的浏览器地址栏-->
-  <meta name="apple-mobile-web-app-status-bar-style" content="black" />
-  <!-- UC默认竖屏 ，UC强制全屏 -->
-  <meta name="full-screen" content="yes">
-  <meta name="browsermode" content="application">
-  <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no,minimal-ui">
+  <meta http-equiv=X-UA-Compatible content="IE=edge">
+  <meta name=format-detection content="telephone=no">
+  <meta name=format-detection content="email=no">
+  <meta name=apple-mobile-web-app-capable content=yes>
+  <meta name=apple-mobile-web-app-status-bar-style content=black>
+  <meta name=full-screen content=yes>
+  <meta name=browsermode content=application>
+  <meta name=x5-orientation content=portrait>
+  <meta name=x5-fullscreen content=true>
+  <meta name=x5-page-mode content=app>
+  <!--清除缓存-->
+  <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
+  <meta http-equiv="Pragma" content="no-cache" />
+  <meta http-equiv="Expires" content="0" />
+  <meta name=viewport content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,minimal-ui">
   <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic">
   <link href="http://cdn.bootcss.com/material-design-icons/3.0.1/iconfont/material-icons.min.css" rel="stylesheet">
   <script>

diff --git a/screenshots/1.png b/screenshots/1.png
diff --git a/screenshots/2.png b/screenshots/2.png
diff --git a/screenshots/3.gif b/screenshots/3.gif
diff --git a/screenshots/4.gif b/screenshots/4.gif
diff --git a/src/api/index.js b/src/api/index.js
@@ -9,7 +9,7 @@ export default {
     return _baseUrl2 + '?type=lyric&id=' + id
   },
   getSong (id) {
-    return _baseUrl + '/detail?ids=' + id
+    return _baseUrl2 + '?id=' + id
   },
   getPlayListDetail (id) {
     return _baseUrl2 + '?type=playlist&id=' + id

diff --git a/src/components/playerBar.vue b/src/components/playerBar.vue
@@ -103,9 +103,12 @@ export default {
   computed: {
     ...mapGetters([
       'audio',
+      'change',
       'playing',
       'loading',
+      'currentTime',
       'prBufferedTime',
+      'tmpCurrentTime',
       'prCurrentTime'
     ])
   }

diff --git a/src/store/index.js b/src/store/index.js
@@ -122,20 +122,13 @@ const store = new Vuex.Store({
       commit('openLoading')
       Axios.get(api.getSong(id)).then(res => {
         // 统一数据模型，方便后台接口的改变
-        var id = res.data.songs[0].id
-        var name = res.data.songs[0].name
-        var singer = res.data.songs[0].artists[0].name
-        var albumPic = res.data.songs[0].album.picUrl
-        var location = res.data.songs[0].mp3Url
-        var album = res.data.songs[0].album
-        var audio = {id, name, singer, albumPic, location, album}
-        commit('addToList', audio)
+        var url = res.data.data[0].url
         commit('setAudio')
+        commit('setLocation', url)
       })
     },
     getLrc ({commit, state}, id) {
       commit('setLrc', '[txt](加载中。。。')
-      console.log('getlrc')
       Axios.get(api.getLrc(id)).then(res => {
         // 1、先判断是否有歌词
         if (res.data.nolyric) {

diff --git a/src/views/playListDetail.vue b/src/views/playListDetail.vue
@@ -33,7 +33,7 @@
             <div>
               <mu-circular-progress :size="40" class="center" v-if="isloading"/>
                 <mu-list :value="value" v-show="!isloading" @change="change">
-                <div v-for="(item, index) in list" @click="playAudio(item.id)">
+                <div v-for="(item, index) in list" @click="playAudio(item)">
                     <mu-list-item  :disableRipple="true" :title="item.name" :value="item.id" :describeText="item.ar[0].name">
                         <span slot="left" class="indexStyle">{{index + 1}}</span>
                     </mu-list-item>
@@ -109,12 +109,17 @@ export default {
     change (val) {
       this.value = val
     },
-    playAudio (id) {
-      // 暂时歌曲，并重置进度条(进度条重置没有实现:TODO)
-      this.$store.commit('resetAudio')
+    playAudio (song) {
       document.getElementById('audioPlay').pause()
       this.$store.commit('pause')
-      this.$store.dispatch('getSong', id)
+      var audio = {}
+      audio.id = song.id  // id
+      audio.singer = song.ar[0].name // 演唱者
+      audio.albumPic = song.al.picUrl
+      audio.name = song.name
+      // 通过Vuex改变状态
+      this.$store.commit('addToList', audio)
+      this.$store.dispatch('getSong', audio.id)
     }
   },
   filters: {

diff --git a/src/views/playerDetail.vue b/src/views/playerDetail.vue
@@ -31,7 +31,7 @@
               <div class="process-bar">
                 <div class="pro">
                 <div class="pro-wrap">
-                  <mu-slider class="song-slider" v-model="prCurrentTime"/>
+                  <mu-slider class="song-slider" @change="changeTime" v-model="prCurrentTime"/>
                 </div>
                 <div class="time">
                   <time id="cur">{{currentTime | time}}</time>
@@ -41,9 +41,9 @@
               </div>
               <div class="control-bar ">
                 <mu-icon-button class="btn d-mode"/>
-                <mu-icon-button class="btn d-prev"/>
+                <mu-icon-button class="btn d-prev" @click="playPrev"/>
                 <mu-icon-button class="btn d-play btn-big" @click="togglePlay" :class="{'d-pause': playing}"/>
-                <mu-icon-button class="btn d-next"/>
+                <mu-icon-button class="btn d-next" @click="playNext"/>
                 <mu-icon-button class="btn d-list"/>
               </div>
             </mu-flexbox-item>
@@ -57,7 +57,7 @@
     </div>
 </template>
 <script>
-import { mapGetters } from 'vuex'
+import { mapGetters, mapMutations } from 'vuex'
 import api from '../api'
 export default {
   data () {
@@ -73,6 +73,11 @@ export default {
       vm.loadLrc(vm.audio.id)
     })
   },
+  watch: {
+    audio (val) {
+      this.loadLrc(val.id)
+    }
+  },
   methods: {
     togglePlay () {
       if (this.playing) {
@@ -87,6 +92,11 @@ export default {
       this.$router.go(-1)
       this.$store.commit('toggleDetail')
     },
+    changeTime (value) { // 改变播放时间事件
+      var time = (value * this.durationTime) / 100
+      this.$store.commit('changeTime', time)
+      this.$store.commit('setChange', true)
+    },
     loadLrc (id) {
       this.afterLrc = [{'txt': '正在加载中...'}]
       if (!id) {
@@ -134,7 +144,11 @@ export default {
         }
         this.afterLrc = lrcObj
       }
-    }
+    },
+    ...mapMutations([
+      'playNext',
+      'playPrev'
+    ])
   },
   computed: {
     ...mapGetters([

diff --git a/src/views/songList.vue b/src/views/songList.vue
@@ -69,6 +69,7 @@ export default {
 }
 .wrapper {
     width: 100%;
+    padding:0 10px;
     height: 28rem;
     overflow: auto;
     -webkit-overflow-scrolling: touch;