uni-app 完整的音乐APP

当然，下面是一个基于uni-app的简化版音乐APP的代码示例，主要展示核心功能如音乐播放、列表展示和页面导航。由于篇幅限制，这里只展示关键代码部分。

1. 项目结构

- pages/
  - index/
    - index.vue
  - player/
    - player.vue
- static/
  - music/
    - song1.mp3
    - song2.mp3
- App.vue
- main.js
- manifest.json
- pages.json

2. main.js

import Vue from 'vue'
import App from './App'
import store from './store' // 假设使用了Vuex进行状态管理

Vue.config.productionTip = false

App.mpType = 'app'

const app = new Vue({
    store,
    ...App
})
app.$mount()

3. pages/index/index.vue

<template>
  <view>
    <list>
      <block v-for="(song, index) in songs" :key="index">
        <navigator :url="'/pages/player/player?id=' + song.id">
          <text>{{ song.name }}</text>
        </navigator>
      </block>
    </list>
  </view>
</template>

<script>
export default {
  data() {
    return {
      songs: [
        { id: 1, name: 'Song 1' },
        { id: 2, name: 'Song 2' }
      ]
    }
  }
}
</script>

4. pages/player/player.vue

<template>
  <view>
    <audio :src="songUrl" @play="onPlay" @pause="onPause" ref="audio"></audio>
    <button @click="togglePlay">
      {{ isPlaying ? 'Pause' : 'Play' }}
    </button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      songId: this.$route.params.id,
      songUrl: '',
      isPlaying: false
    }
  },
  mounted() {
    this.songUrl = `/static/music/song${this.songId}.mp3`;
  },
  methods: {
    togglePlay() {
      const audio = this.$refs.audio;
      if (audio.paused) {
        audio.play();
        this.isPlaying = true;
      } else {
        audio.pause();
        this.isPlaying = false;
      }
    },
    onPlay() {
      console.log('Song is playing');
    },
    onPause() {
      console.log('Song is paused');
    }
  }
}
</script>

5. pages.json

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "Music List"
      }
    },
    {
      "path": "pages/player/player",
      "style": {
        "navigationBarTitleText": "Music Player"
      }
    }
  ]
}

这个示例展示了如何使用uni-app创建一个简单的音乐APP，包括音乐列表展示和播放器页面。实际项目中，你可能需要添加更多功能，如歌曲搜索、播放列表管理、歌词显示等，并处理更多细节，如错误处理和性能优化。