devbox
很楠不爱3
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

移动应用开发——uni-app跨平台开发 UAMusic学习心得_uniapp怎么获取网易云的接口

作者：很楠不爱3 | 2024-02-12 15:01:26

赞

踩

uniapp怎么获取网易云的接口

            随着移动端应用的发展，音乐播放器也成为了人们日常生活中必不可少的一部分。而网易云音乐作为国内最受欢迎的音乐平台之一，其音乐播放器也备受用户喜爱。本文将介绍如何使用uniapp框架实现一个简单的网易云音乐播放器。

目录

一、前期准备

二、技能掌握与应用

1.基本技能

2.开发步骤

三、项目结构

四、页面设计

五、组件封装

六、API

  一、关于API的使用

   1.了解API的限制和使用方式

   2.在Uniapp中集成API

  3.测试和调试

 二、API接口调用

1.歌曲搜索接口

2.歌曲详情接口

3.歌曲播放接口

三、API格式

七、技术栈 

 前端技术栈

 后端技术栈

八、有关代码

   1.歌曲列表组件

2.歌曲详情组件

3.播放器组件

 九、总结

一、前期准备

       在开始之前，需要先准备好uniapp开发环境和网易云音乐API接口。其中，uniapp是基于Vue.js框架的跨平台开发框架，可以快速地开发出iOS、Android、H5等多个平台的应用。而网易云音乐API接口可以通过开放的API文档获取，包括歌曲搜索、歌曲详情、歌曲播放等接口。

uniapp官网如下：

uni-app官网uni-app,uniCloud,serverlesshttps://uniapp.dcloud.net.cn/可以进入其中进行学习。

二、技能掌握与应用

1.基本技能

  1. HTML和CSS的基础知识，包括页面布局、样式设计等。

  2. Vue的基础知识，包括组件、指令、生命周期等。

  3. JavaScript的基础知识，包括变量、函数、事件、DOM操作等。

  4. Uniapp的特性和API，包括路由、组件、网络请求等。

  5. 网易云音乐API的使用方法，包括获取歌单、歌曲、歌手等信息。

2.开发步骤

  1. 设计应用的界面和功能，包括首页、歌单、歌曲播放、搜索等。

  2. 使用Vue框架创建组件，实现数据绑定和事件处理。

  3. 使用Uniapp的路由功能实现页面跳转和参数传递。

  4. 使用Uniapp的网络请求API获取网易云音乐的数据，包括歌单、歌曲、歌手等信息。

  5. 实现歌曲的播放功能，可以使用Uniapp的音频组件或第三方音频库。

  6. 实现搜索功能，可以使用Uniapp的搜索组件或自己编写搜索逻辑。

  7. 进行测试和优化，确保应用的稳定性和用户体验

三、项目结构

       在uniapp中，我们可以使用自带的uni-app模板创建一个新的项目。创建完成后，我们可以在项目结构中添加如下文件夹和文件：

  1. components：存放组件文件；
  2. pages：存放页面文件；
  3. static：存放静态资源文件；
  4. utils：存放工具类文件；
  5. App.vue：应用程序的根组件；
  6. main.js：应用程序的入口文件。

四、页面设计

    在页面设计上，我们可以参考网易云音乐的官方应用，设计出类似的播放器页面。具体包括：

  1. 音乐列表页面：显示歌曲列表，并提供搜索功能；
  2. 歌曲详情页面：显示歌曲的详细信息，包括歌曲封面、歌曲名称、歌手、歌词等；
  3. 播放器页面：实现歌曲的播放、暂停、上一曲、下一曲等功能，并显示歌曲的进度条和播放模式。

五、组件封装

     在uniapp中，我们可以将常用的组件封装成单独的组件，以便于在多个页面中复用。具体包括：

  1. 歌曲列表组件：用于显示歌曲列表，并提供搜索功能；
  2. 歌曲详情组件：用于显示歌曲的详细信息；
  3. 播放器组件：用于实现歌曲的播放、暂停、上一曲、下一曲等功能，并显示歌曲的进度条和播放模式。

六、API

  一、关于API的使用

   1.了解API的限制和使用方式

    不同的API有不同的限制和使用方式。例如，某些API可能要求您使用OAuth2身份验证，而其他API可能只需使用API密钥即可。请仔细阅读所选API的文档以了解其限制和使用方式。

   2.在Uniapp中集成API

     一旦您确定了可用的API和如何使用它们，您就可以开始集成它们。首先，在您的Uniapp项目中安装必要的依赖项。然后，您可以使用JavaScript编写代码来调用API，并处理响应数据。

您可以使用Axios、Fetch等HTTP库来发送请求。以下是一个简单的示例：

  1. const axios = require('axios')
  2.  
  3. axios.get('https://some-api.com/resource')
  4.   .then(response => {
  5.     // 处理响应数据
  6.   })

   您还可以使用Vuex来管理与API的状态和通信。这可以让您更轻松地跟踪和更新您的应用程序中的数据。

  3.测试和调试

  在开始使用API之前，您应该测试和调试您的代码。确保您的API调用返回预期的响应，并处理错误和异常情况。

     与任何其他编程任务一样，调试是关键。如果您遇到麻烦，请耐心地在文档中查找答案或尝试询问其他开发人员的帮助。

 二、API接口调用

    在uniapp中，我们可以使用uni.request()方法调用API接口。具体包括： 

1.歌曲搜索接口

通过关键字搜索歌曲，并返回歌曲列表；

2.歌曲详情接口

通过歌曲ID获取歌曲的详细信息，包括歌曲封面、歌曲名称、歌手、歌词等；

3.歌曲播放接口

通过歌曲ID获取歌曲的播放地址，并实现歌曲的播放、暂停、上一曲、下一曲等功能。

三、API格式

api连接格式如下：

  1. HTTP_VERB https://api.example.com/endpoint/path?param1=value1&param2=value2 HTTP/1.1
  2. HeaderKey1: HeaderValue1
  3. HeaderKey2: HeaderValue2
  4.  
  5. {"request_body_key": "request_body_value"}
  • HTTP_VERB：请求方法（GET，POST，PUT，DELETE等等）。
  • https://api.example.com/endpoint/path：API的完整路径。
  • ?param1=value1&param2=value2：查询参数。
  • HTTP/1.1：HTTP协议版本。
  • HeaderKey: HeaderValue：标头信息。
  • {"request_body_key": "request_body_value"}：POST或PUT请求中包含的请求正文。

请注意，具体的API连接样式可能取决于服务提供商和所使用的API类型。因此，请查看所使用的API的文档或者咨询该API的服务提供商以了解其详细信息。

七、技术栈 

 前端技术栈

  • Vue.js：用于构建用户界面的 MVVM 框架
  • Uniapp：跨平台应用开发框架，支持生成 Android、iOS、H5 等多个平台的应用
  • uView UI：Uniapp 生态下的 UI 组件库，提供了丰富的界面组件和样式

 后端技术栈

  • 网易云音乐 API：提供了获取音乐资源信息的接口
  • Node.js：JavaScript 运行环境，可用于编写服务器端代码
  • Express.js：基于 Node.js 平台的 Web 应用开发框架，可用于构建 RESTful API

八、有关代码

   1.歌曲列表组件

       歌曲列表组件用于显示歌曲列表，并提供搜索功能。具体代码如下：

  1. <template>
  2.   <view class="song-list">
  3.     <input type="text" v-model="keyword" placeholder="请输入关键字">
  4.     <button @click="search">搜索</button>
  5.     <ul>
  6.       <li v-for="(item, index) in songs" :key="index" @click="playSong(item.id)">
  7.         {{ item.name }} - {{ item.artists[0].name }}
  8.       </li>
  9.     </ul>
  10.   </view>
  11. </template>
  12.  
  13. <script>
  14.   export default {
  15.     data() {
  16.       return {
  17.         keyword: '',
  18.         songs: []
  19.       }
  20.     },
  21.     methods: {
  22.       search() {
  23.         uni.request({
  24.           url: 'http://localhost:3000/search',
  25.           data: {
  26.             keywords: this.keyword
  27.           },
  28.           success: res => {
  29.             this.songs = res.data.result.songs
  30.           }
  31.         })
  32.       },
  33.       playSong(id) {
  34.         this.$emit('playSong', id)
  35.       }
  36.     }
  37.   }
  38. </script>

2.歌曲详情组件

        歌曲详情组件用于显示歌曲的详细信息，包括歌曲封面、歌曲名称、歌手、歌词等。具体代码如下：

  1. <template>
  2.   <view class="song-detail">
  3.     <img :src="songDetail.al.picUrl" alt="">
  4.     <h1>{{ songDetail.name }}</h1>
  5.     <h2>{{ songDetail.ar[0].name }}</h2>
  6.     <div class="lyric">
  7.       <p v-for="(item, index) in lyric" :key="index">{{ item }}</p>
  8.     </div>
  9.   </view>
  10. </template>
  11.  
  12. <script>
  13.   export default {
  14.     props: {
  15.       songId: {
  16.         type: Number,
  17.         required: true
  18.       }
  19.     },
  20.     data() {
  21.       return {
  22.         songDetail: {},
  23.         lyric: []
  24.       }
  25.     },
  26.     mounted() {
  27.       this.getSongDetail()
  28.       this.getLyric()
  29.     },
  30.     methods: {
  31.       getSongDetail() {
  32.         uni.request({
  33.           url: 'http://localhost:3000/song/detail',
  34.           data: {
  35.             ids: this.songId
  36.           },
  37.           success: res => {
  38.             this.songDetail = res.data.songs[0]
  39.           }
  40.         })
  41.       },
  42.       getLyric() {
  43.         uni.request({
  44.           url: 'http://localhost:3000/lyric',
  45.           data: {
  46.             id: this.songId
  47.           },
  48.           success: res => {
  49.             this.lyric = res.data.lrc.lyric.split('\n')
  50.           }
  51.         })
  52.       }
  53.     }
  54.   }
  55. </script>

3.播放器组件

      播放器组件用于实现歌曲的播放、暂停、上一曲、下一曲等功能，并显示歌曲的进度条和播放模式。具体代码如下：

  1. <template>
  2.   <view class="player">
  3.     <audio ref="audio" :src="songUrl" @timeupdate="updateTime"></audio>
  4.     <button @click="prevSong">上一曲</button>
  5.     <button @click="togglePlay">{{ isPlaying ? '暂停' : '播放' }}</button>
  6.     <button @click="nextSong">下一曲</button>
  7.     <div class="progress">
  8.       <div class="bar" :style="{ width: progress + '%' }"></div>
  9.     </div>
  10.     <div class="mode">
  11.       <button @click="changeMode">{{ mode }}</button>
  12.     </div>
  13.   </view>
  14. </template>
  15.  
  16. <script>
  17.   export default {
  18.     props: {
  19.       songId: {
  20.         type: Number,
  21.         required: true
  22.       }
  23.     },
  24.     data() {
  25.       return {
  26.         songUrl: '',
  27.         isPlaying: false,
  28.         progress: 0,
  29.         duration: 0,
  30.         currentTime: 0,
  31.         mode: '顺序播放',
  32.         modeList: ['顺序播放', '单曲循环', '随机播放'],
  33.         modeIndex: 0
  34.       }
  35.     },
  36.     mounted() {
  37.       this.getSongUrl()
  38.       this.$refs.audio.addEventListener('ended', this.playNextSong)
  39.     },
  40.     beforeDestroy() {
  41.       this.$refs.audio.removeEventListener('ended', this.playNextSong)
  42.     },
  43.     methods: {
  44.       getSongUrl() {
  45.         uni.request({
  46.           url: 'http://localhost:3000/song/url',
  47.           data: {
  48.             id: this.songId
  49.           },
  50.           success: res => {
  51.             this.songUrl = res.data.data[0].url
  52.             this.play()
  53.           }
  54.         })
  55.       },
  56.       play() {
  57.         this.$refs.audio.play()
  58.         this.isPlaying = true
  59.       },
  60.       pause() {
  61.         this.$refs.audio.pause()
  62.         this.isPlaying = false
  63.       },
  64.       togglePlay() {
  65.         if (this.isPlaying) {
  66.           this.pause()
  67.         } else {
  68.           this.play()
  69.         }
  70.       },
  71.       prevSong() {
  72.         this.$emit('prevSong')
  73.       },
  74.       nextSong() {
  75.         this.$emit('nextSong')
  76.       },
  77.       playNextSong() {
  78.         this.$emit('nextSong')
  79.       },
  80.       updateTime() {
  81.         this.currentTime = this.$refs.audio.currentTime
  82.         this.duration = this.$refs.audio.duration
  83.         this.progress = (this.currentTime / this.duration) * 100
  84.       },
  85.       changeMode() {
  86.         this.modeIndex++
  87.         if (this.modeIndex >= this.modeList.length) {
  88.           this.modeIndex = 0
  89.         }
  90.         this.mode = this.modeList[this.modeIndex]
  91.       }
  92.     }
  93.   }
  94. </script>

   以上代码仅为示例，具体实现还需要根据实际需求进行调整和优化。 

 九、总结

      通过以上步骤，我们可以快速地实现一个基于uniapp的网易云音乐播放器。在实际开发中，我们还可以根据需求添加其他功能，例如歌曲收藏、歌曲分享等。总之，uniapp框架的出现，为跨平台应用的开发提供了更加便利的方式，相信未来也会有更多的开发者加入到这个领域中来。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/很楠不爱3/article/detail/77889
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号