微信小程序仿网易云音乐（使用云开发，提供源码）

2024-05-04 03:25:09

微信小程序仿网易云音乐（使用云开发，提供源码）！！！！！！！！！！！
源码：
链接：https://pan.baidu.com/s/1z_ZnRVbT4vjEENimi8yBQQ
提取码：u0o3

一、实现页面情况

（1）云村首页

（2）云村中的云圈

（3）歌曲搜索功能

（4）达人页面

（5）视频播放以及弹幕

（6）手机型号自适应性

二、源码文件打开方式

(1)微信开发者工具打开的是这个文件不要弄错了

（1）打开（数据库）中的两个json文件修改_openid

在使用云开发导入数据库之前，有一个很重要的地方需要修改，就是每个微信小程序的_openid，_openid只能用自己的，不能使用别人的否则获取的数据库数据为空，
获取自己_openid的方式https://blog.csdn.net/yingshuangtu/article/details/118566022
将获取到的自己的openid对应两个数据库中的_openid进行修改
打开我给的数据库文件，然后快捷键ctrl+H查找替换

第一个框是我的openid,第二个框输入你的openid,然后在第二个框里回车全部替换，最后替换成功保存，

接下来导入数据到云开发平台的数据集

（2）打开云数据库并导入数据

点击菜单栏的云开发，打开云开发控制台

点击数据库，点击加号创建数据集合

创建好数据集以后，一定注意要修改权限，以下为默认权限“仅创建者可写”，

获取到的数据为空

修改“仅创建者可读写”为“所有用户可读，仅创建者可写”

然后查看获取数据情况，获取到数据了

创建两个数据集，yc_list,yc_search,这时里面数据为空
导入我给的两个数据库，不要导入错了第一个json文件导入yc_list数据库集合，第二个文件导入yc_search数据库集合

实现方法：点击要导入的数据集，然后点击导入

在弹窗中点击选择文件

然后就导入了，这是导入完成的数据库

点击顶部的‘’运营分析”，

微信小程序普通用户连接数据库的每天次数有限，注意！！！

三、总结

涉及知识点

（1）通过数据库查询实现路由切换菜单栏

（2）navigator跳转页面

（3）点击实现页面跳转并传参

（4）实现弹幕，视频的播放

（5）对数据库的查询

（6）swiper轮播图

（7）简单的移动

（8）css实现左侧边栏

（9）瞄点实现分类菜单栏

（10）点击隐藏出现

最后，码字不易，喜欢就点个赞吧！

微信小程序仿网易云音乐（使用云开发，提供源码）相关推荐

微信小程序之网易云音乐（五）- 排行详情页、歌单详情页、播放器组件开发
微信小程序之网易云音乐(五)- 排行详情页.歌单详情页.播放器组件开发一. 排行详情页模块二. 歌单详情页模块三. 播放器组件微信小程序之网易云音乐导航一. 排行详情页模块 rank.vue ...
微信小程序之网易云音乐（三）- 主页面底部导航、轮播图、歌单及歌曲模块开发
微信小程序之网易云音乐(三)- 主页面底部导航.轮播图.歌单及歌曲模块开发前言一. 主页面底部导航二. 轮播图区域三. 歌单区域四. 歌曲区域微信小程序之网易云音乐导航前言创建一个新模 ...
微信小程序之网易云音乐（一）- uni-app的基本使用
微信小程序之网易云音乐(一)- uni-app的基本使用前言一. uni-app 1.1 利用HBuilder来进行开发: 二. 案例 2.1 案例1:MVC以及数据双向绑定 2.2 案例2:响应 ...
微信小程序之网易云音乐导航
微信小程序之网易云音乐导航微信小程序之网易云音乐(一)- uni-app的基本使用微信小程序之网易云音乐(二)- uni-app标签的使用微信小程序之网易云音乐(三)- 主页面底部导航.轮播图. ...
微信小程序调用网易云音乐接口
微信小程序调用网易云音乐接口前段时间QQ音乐的调用接口不能用了,给大家整理了一个网易云音乐的调用接口. 1.API接口: API接口地址 2.访问连接地址: http://neteasecloudm ...
微信小程序之网易云音乐（四）- 排行、歌手及歌手详情页模块开发
微信小程序之网易云音乐(四)- 排行.歌手及歌手详情页模块开发一. 排行模块开发二. 歌手模块开发三. 歌手详情页开发微信小程序之网易云音乐导航一. 排行模块开发 rank.vue文件: & ...
微信小程序【网易云音乐实战】（第二篇轮廓图、阿里巴巴的矢量图标、滚动条、前后端交互、列表渲染）
下面通过webStrom来写代码,通过微信开发者工具来调试! 本篇最终效果图: 这里写目录标题一.轮播图二. 五个小图标 1. 将阿里巴巴矢量图标转换为本地的 2. 项目使用图标三.滚动条 sc ...
微信小程序之网易云音乐小案例
目录一.编写对网易云音乐api发起请求的代码二.编写视频项(组件) 三.编写mv列表:包含(轮播图+视频列表[每个视频项引用组件来呈现]) 四.编写视频详情页成品图: 准备工作: --在page ...
微信小程序【网易云音乐实战】（第五篇转发分享、每日推荐、音乐播放、页面通信npm包、进度条、全局数据）
一.转发分享功能 onShareAppMessage(Object object) Button <button open-type="share" class=" ...

最新文章

热门文章