基于网易云音乐API的微信小程序——zwhdlb的音乐平台

2024-05-26 16:29:32

1项目说明

最近在学习小程序的开发的过程中，临时想写一个音乐小程序，看到了网易云
提供了后台api程序，这方便我们直接进行音乐小程序的开发不用再从后端开始开发，网易云音乐平时也经常在用，因此想记录一下学习过程

2项目环境准备

开发工具：微信开发者工具
界面UI组件库用到的是ColorUI
网易云开发接口文档：网易云开发接口文档

3项目开发过程

3.1登录页面

登录页面样式是借鉴之前别人已经开发好的登录界面进行修改实现的，作为一个后端对于前端样式真的调不来。。。。
采用手机号+密码的方式登录（网易云的账号和密码登录）

3.2首页设计

主要分为几部分：搜索栏，轮播图，推荐歌单，热门歌手精选。
搜索根据搜索的关键词搜索对应的歌曲列表

歌单点击后进入歌单列表界面，展示对应歌单的歌曲列表，点击可进行播放
切换等相关操作

歌手热门精选点击后是对应歌手简介信息和对应的歌曲列表

3.3分类页面

主要分为：搜索栏，分类歌曲排行榜，热门视频推荐，热门话题精选几部分。
搜索栏：和首页搜索类似
分类歌曲排行榜点击进入歌曲播放页面，播放相关的歌曲
热门话题精选进入话题列表页，展示相关的动态
点击热门视频推荐进入视频播放界面，展示相似视频推荐，相关评论列表
发弹幕等

3.4我的页面

主要展示对应登录用户的音乐个人信息，个人关注列表，最近歌曲播放列表
创建的歌单列表

3.5动态页面

这里主要展示对应用户关注的人相关动态信息浏览，相关评论列表展示

4视频展示

小程序演示视频

5到的问题

1歌曲播放时有时播放会出现错误，这个和后台接口和网络有一定关系，还没根本解决。
2页面渲染过慢的问题。

6总结

开发这个音乐小程序过程中进一步了解了小程序的结构，对相关的api操作也
更熟悉了一点，同时也发现了很多问题，总之就是收获满满。
感兴趣的小伙伴可以一起交流学习呀~想要相关资料的可以联系我：QQ
1625095546
虽然项目基本模块已经开发完成，但是个人感觉还是没有完善，所以相关资料就先不放上来了。后面完善后再同步到这里。

基于网易云音乐API的微信小程序——zwhdlb的音乐平台相关推荐

基于网易云音乐API的微信小程序——网愈芸音乐
网愈芸音乐一.项目说明二.项目环境准备三.项目初始化 1.新建项目 2.安装依赖Vant Weapp,构建NPM 四.项目具体开发过程 1.欢迎页面(首页): 2.登陆页面 1.界面设计 2.逻 ...
php获取QQ音乐直链,微信小程序-获取QQ音乐直链
获取QQ音乐直链-用于微信小程序补充:以下方法获取的直链会有失效期,如果大家有嗅探等工具可以直接上QQ音乐网站获取资源的直链,此方法仅供参考. 问题起源: 最近在做小程序音频播放这一块的时候发现一个 ...
许嵩音乐智能问答系统微信小程序之获取数据及文本分类
许嵩音乐智能问答系统微信小程序之获取数据及文本分类项目简介. 音乐播放器搭建. 获取数据及文本分类. 智能客服聊天界面. 连接前端微信小程序输入和后端python,并返回值连接知识图谱数据获取 ...
微信小程序开发之——音乐播放器-播放器(3.4)
一概述常用组件及API介绍播放器页面任务播放器页面任务数据准备音乐播放功能播放器页面二常用组件及API介绍 2.1 音频API 介绍微信小程序提供了播放音频的API,掌握这个API ...
node mysql商城开发_ＮideShop：基于Node.js+MySQL开发的微信小程序商城开源啦
NideShop:基于Node.js+MySQL开发的微信小程序商城开源啦发布时间:2020-04-14 04:23:37 来源:51CTO 阅读:2894 作者:ch10mmt 高仿网易严选的微信 ...
利用WordPress REST API 开发微信小程序从入门到放弃
自从我发布并开源WordPress版微信小程序以来,很多WordPress网站的站长问有关程序开发的问题,其实在文章:<用微信小程序连接WordPress网站>讲述过一些基本的要点,不过仍 ...
许嵩音乐智能问答系统微信小程序之音乐播放器
许嵩音乐智能问答系统微信小程序之音乐播放器 - 项目简介项目简介. 音乐播放器搭建. 获取数据及文本分类. 智能客服聊天界面. 连接前端微信小程序输入和后端python,并返回值连接知识图谱你还 ...
基于java springboot的小说阅读微信小程序含后台管理系统源码
系统运行环境开发工具 eclipse(idea),mysql5.7(大于5.5),navicat,小程序开发工具硬件要求 windows操作系统 cpu:2.4GHz 内存:4G 硬盘:100G ...
微信小程序模仿华为音乐列表界面
微信小程序模仿华为音乐列表界面 index.js var app=getApp(); var listDatas = require("../../data/data_list.js&q ...

最新文章

热门文章