在数字化时代,音乐不再仅仅是一种娱乐方式,它已经成为我们生活中不可或缺的一部分。无论是放松身心、激发创造力,还是与朋友分享喜悦,音乐都有着不可比拟的力量。现在,一个全新的微信小程序项目——“云音乐”为您带来了发现音乐的全新方式。
技术名 | 功能 | 官网 |
---|---|---|
原生微信小程序 | 开发微信小程序 | 微信开放文档 |
TDesign | UI组件库 | TDesign |
Sass | css预处理器 | Sass: Syntactically Awesome Style Sheets |
mobx-miniprogram | 全局状态管理 | mobx-miniprogram |
https://www.bilibili.com/video/BV1rK4y1w7m6
例如
git clone https://gitee.com/tmaofu/mini-program---cloud-music.git
进入项目根目录,执行npm install
安装项目依赖
cd ./mini-program---cloud-music
npm install
使用微信开发者工具导入项目
开始构建npm包,构建成功后关闭微信开发者工具。
具体可以参考:
安装
git clone git@github.com:Binaryify/NeteaseCloudMusicApi.git
cd NeteaseCloudMusicApi
npm install
运行
node app.js
服务器启动默认端口为 3000, 若不想使用 3000 端口 , 可使用以下命令 : Mac/Linux
$ PORT=4000 node app.js
windows 下使用 git-bash 或者 cmder 等终端执行以下命令 :
$ set PORT=4000 && node app.js
再次用微信开发者工具打开项目,
编辑config\config.js
文件中的baseUrl
为你的API接口服务的地址。
export default {
baseUrl: 'http://127.0.0.1:3000',
cookieKey: 'cookie', //cookie保存本地的key名称
blogUrl: 'https://www.yuque.com/maofu-rzqcp',
searchHistoryKey: 'searchHistory'
}
当配置好之后就可以编译运行了
api: 管理主包中用到的api接口
assets: 存放主包中的静态资源文件
behaviors: 存放公用的behaviors
components: 存放主包中的组件
config: 存放配置文件
custom-tab-bar: 自定义tab-bar组件
data: 存放一些会用到的数据
miniprogram_npm: npm包
node_modules: npm包
packages: 存放分包
pages: 存放主包中的页面
store: 状态管理仓库
template: 存放主包中的模板
utils: 存放工具性质的文件
flx-TDesign.scss: 修改TDesign样式
iconfont.scss: 阿里巴巴图标字体样式
index.scss: 存放一些共用样式类
variable.scss: 定义了一系列css样式变量
injectAppStore.js: 可以向组件或者页面注入应用的状态,例如tab-bar当前的索引值
injectCheckLogin.js: 注入检查登录相关的函数
injectMusicPlayerStore.js:注入音乐播放器相关的状态
injectUserStore.js:注入用户相关的状态
common: 存放公共组件
home-center: 存放首页中会用到的组件
personal-center:存放个人中心页会用到的组件
video-center: 存放视频中心页会用到的组件
├─components
│ ├─common
│ │ ├─comment-area
│ │ ├─comment-item
│ │ ├─info-item-card
│ │ ├─music-player
│ │ ├─my-loading
│ │ ├─play-controll
│ │ ├─program-display-list
│ │ ├─song-display-list
│ │ ├─song-list
│ │ └─touch-panel
一个触摸面板组件,可以触发触摸,滑动事件,判断滑动方向,滑动距离等。
在音乐播放器组件(music-player)中,个人中心-个人背景卡片中,有使用。
├─components
│ ├─home-center
│ │ ├─home-item-card
│ │ └─rank-list-card
├─components
│ ├─personal-center
│ │ ├─collect-songList
│ │ └─create-songList
├─components
│ └─video-center
│ ├─commend-video
│ ├─commend-video-item
│ └─mv-video
export default {
baseUrl: 'http://127.0.0.1:3000',
cookieKey: 'cookie', //cookie保存本地的key名称
blogUrl: 'www.maofu123.top',
searchHistoryKey: 'searchHistory'
}
packges-common: 公共分包
packges-home-center: 首页分包,存放了在首页中会进入的页面,要使用的组件,等等资源。
packges-personal-center: 个人中心分包
packges-sys: 系统分包,存放了登录相关的页面。
packges-video-center: 视频中心分包
├─packages
│ ├─package-common
│ │ └─pages
│ │ └─comment-display
页面/组件名称 | 功能 |
---|---|
comment-display | 评论展示页面 |
├─packages
│ ├─package-home-center
│ │ ├─components
│ │ │ ├─broadcaster-item-display
│ │ │ ├─playlist-item-display
│ │ │ ├─search-list
│ │ │ ├─search-result-dj
│ │ │ ├─search-result-playlist
│ │ │ ├─search-result-song
│ │ │ ├─search-result-tabs
│ │ │ ├─search-result-video
│ │ │ └─search-result-voice
│ │ └─pages
│ │ ├─broadcaster-center
│ │ ├─broadcaster-display
│ │ ├─broadcaster-tags
│ │ ├─playlist-center
│ │ ├─playlist-display
│ │ ├─playlist-tags
│ │ ├─recommended-daily
│ │ ├─recommended-playlist
│ │ ├─search-center
│ │ └─toplist-center
组件名称 | 功能 |
---|---|
broadcaster-item-display | ![]() |
playlist-item-display | ![]() |
search-list | ![]() |
search-result-dj | 搜索结果展示列表-电台 |
search-result-playlist | 搜索结果展示列表-歌单 |
search-result-song | 搜索结果展示列表-歌曲 |
search-result-tabs | 搜索结果展示的tabs |
search-result-video | 搜索结果展示列表-视频 |
search-result-voice | 搜索结果展示列表-声音 |
页面名称 | 功能 |
---|---|
broadcaster-center | ![]() |
broadcaster-display | ![]() |
broadcaster-tags | ![]() |
playlist-center | ![]() |
playlist-display | ![]() |
playlist-tags | ![]() |
recommended-daily | ![]() |
recommended-playlist | ![]() |
search-center | ![]() |
toplist-center | ![]() |
├─packages
│ ├─package-personal-center
│ │ ├─components
│ │ │ ├─ei-form-item
│ │ │ ├─mc-album
│ │ │ ├─mc-dj
│ │ │ ├─mc-video
│ │ │ ├─rp-album
│ │ │ ├─rp-dj
│ │ │ ├─rp-song
│ │ │ ├─rp-songList
│ │ │ ├─rp-video
│ │ │ └─rp-voice
│ │ ├─pages
│ │ │ ├─edit-info
│ │ │ ├─my-collection
│ │ │ ├─mylike-video
│ │ │ └─recent-play
│ │ └─template
│ │ ├─mc-item-card
│ │ └─rp-item-card
组件名称 | 功能 |
---|---|
ei-form-item | ![]() |
mc-album | ![]() |
mc-dj | ![]() |
mc-video | ![]() |
rp-album | 最近播放-专辑 |
rp-dj | 最近播放-电台 |
rp-song | 最近播放-歌曲 |
rp-songList | 最近播放-歌单 |
rp-video | 最近播放-视频 |
rp-voice | 最近播放-声音 |
页面名称 | 功能 |
---|---|
edit-info | ![]() |
my-collection | ![]() |
mylike-video | ![]() |
recent-play | ![]() |
模板名称 | 功能 |
---|---|
mc-item-card | 我的收藏-信息展示模板![]() ![]() ![]() |
rp-item-card | 最近播放-信息展示模板![]() ![]() |
├─packages
│ ├─package-sys
│ │ ├─assets
│ │ │ └─img
│ │ └─pages
│ │ └─login
页面名称 | 功能 |
---|---|
login | ![]() |
├─packages
│ └─package-video-center
│ ├─components
│ │ └─video-play-item
│ └─pages
│ └─video-player
组件名称 | 功能 |
---|---|
video-play-item | 视频播放器-每一项![]() |
页面名称 | 功能 |
---|---|
video-player | 视频播放器页面-可滑动加载更多 |
├─pages
│ ├─TB-home
│ ├─TB-personal-center
│ └─TB-video
页面名称 | 功能 |
---|---|
TB-home | 首页 |
TB-personal-center | 个人中心页 |
TB-video | 视频中心页 |
├─store
│ ├─app
│ ├─musicPlayer
│ └─user
文件名 | 功能 |
---|---|
app | 关于app的全局状态仓库 |
musicPlayer | 关于音乐播放器的全局状态仓库 |
user | 关于用户信息的全局状态仓库 |
├─template
│ ├─common
│ │ └─info-display-card
│ ├─home-center
│ │ └─rank-list-item
│ └─personal-center
│ └─more-operations-item
模板名 | 功能 |
---|---|
info-display-card | ![]() |
模板名 | 功能 |
---|---|
rank-list-item | ![]() |
模板名 | 功能 |
---|---|
more-operations-item | ![]() |
└─utils
│ getArea.js
│ localStorage.js
│ request.js
│ util.js
│
├─filter-js
│ filter.js
│
└─filter-wxs
filter.wxs
文件名 | 功能 |
---|---|
getArea | 获取省份,城市名 |
localStorage | 本地存储 |
request | 封装wx.request |
util | 存放一些工具性质的函数 |
filter.js | 过滤器 |
filter.wxs | 过滤器 |
这是我这个项目中用到的一些api接口,接口返回的数据均有示例。
使用须知 - 小程序-云音乐
打开 utils/request.js
,修改 Requester
类中的方法:
方法名 | 功能 |
---|---|
requestIntercept | 请求拦截器 |
responseIntercept | 响应拦截器 |
errIntercept | 错误拦截器 |
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。