---

第一章 开发前的准备

一、项目展示

• 音乐小程序项目效果展示

• 音乐推荐页面展示
  

• 播放器展示
  

• 播放列表展示
  

二、项目分析

• 音乐小程序项目页面结构：

1.tab导航栏
2.content内容区
3.player音乐播放器控件

• 音乐小程序项目目录结构

标签	功能
app.js	应用程序的逻辑文件
app.json	应用程序的配置文件
pages/index/index.js	index页面的逻辑文件
pages/index/index.json	index页面的配置文件
pages/index/index.wxss	index页面的样式文件

三、项目初始化

• 开发者工具创建空白项目：
  

• 修改app.json

{"pages":["pages/index/index"],"window":{"backgroundTextStyle":"light","navigationBarBackgroundColor": "#fff","navigationBarTitleText": "音乐","navigationBarTextStyle":"black"},"style": "v2","sitemapLocation": "sitemap.json"
}

• 删除index.wxml、index.wxss里的内容使其成为一个空白的页面
  

第二章 标签页切换

一、任务分析

• 标签页和页面（info.wxml、play.wxml、palylist.wxml）结构图：
  

二、常用组件介绍

• swiper常用属性：

可选值	说明	默认
indicator-dots	Boolean	是否显示面板指示点，默认为false
indicator-color	Color	指示点颜色，默认为rgba(0,0,0,.3)
indicator-active-color	Color	当前选中的指示点颜色，默认为#000000
autoplay	Boolean	是否自动切换，默认为false
current	Number	当前所在滑块的index，默认为0
current-item-id	String	当前所在滑块的item-id（不能同时指定current）
interval	Number	自动切换时间间隔（毫秒），默认为5000
duration	Number	滑动动画时长（毫秒），默认为500
circular	Boolean	是否采用衔接滑动，默认为false
vertical	Boolean	滑动方向是否为纵向，默认为false
bindchange	EventHandle	current改变时会触发change事件

• swiper组件编写滑动页面结构：

<swiper><swiper-item style="background:#ccc">0</swiper-item><swiper-item style="background:#ddd">1</swiper-item><swiper-item style="background:#eee">2</swiper-item>
</swiper>

三、编写页面结构和样式

• 在pages/index/index.wxml编写页面和tab导航栏

<!-- 标签页标题 -->
<view class="tab"><view class="tab-item {{tab==0?'active':''}}" bindtap="changeItem" data-item="0">音乐推荐</view><view class="tab-item {{tab==1?'active':''}}" bindtap="changeItem" data-item="1">播放器</view><view class="tab-item {{tab==2?'active':''}}" bindtap="changeItem" data-item="2">播放列表</view>
</view>
<!-- 内容区域 -->
<view class="content"></view>
<!-- 底部播放器 -->
<view class="player"></view>

• 在pages/index/index.wxss编写页面样式和tab导航栏样式

page {display: flex;flex-direction: column;background: #17181a;color: #ccc;height: 100%;}.tab {display: flex;
}.tab-item {flex: 1;font-size: 10pt;text-align: center;line-height: 72rpx;border-bottom: 6rpx solid #eee;
}
.tab-item.active {color: #c25b5b;border-bottom-color: #c25b5b;
}

• 添加页面info.wxml、playlist.wxml、play.wxml文件
  

• 实现标签页切换，通过滚动事件切换页面效果

<!-- 标签页标题 -->
<view class="tab"><view class="tab-item {{tab==0?'active':''}}" bindtap="changeItem" data-item="0">音乐推荐</view><view class="tab-item {{tab==1?'active':''}}" bindtap="changeItem" data-item="1">播放器</view><view class="tab-item {{tab==2?'active':''}}" bindtap="changeItem" data-item="2">播放列表</view>
</view>
<!-- 内容区域 -->
<view class="content"><swiper current="{{item}}" bindchange="changeTab"><swiper-item><include src="info.wxml"></include></swiper-item><swiper-item><include src="play.wxml"></include></swiper-item><swiper-item><include src="playlist.wxml"></include></swiper-item></swiper>
</view>
<!-- 底部播放器 -->
<view class="player"></view>

• 滚动事件

    // tab切换changeTab: function(e) {this.setData({tab: e.detail.current})},

• 通过滚动事件切换页面
  

第三章 音乐推荐

一、任务分析

• 音乐推荐页面结构图
  

二、组件介绍

• scroll-view组件的属性及说明

可选值	说明	默认
scroll-x	Boolean	允许横向滚动，默认为false
scroll-y	Boolean	允许纵向滚动，默认为false
scroll-top	Number / String	设置竖向滚动条的位置
scroll-left	Number / String	设置横向滚动条的位置
bindscrolltoupper	EventHandle	滚动到顶部/左边时触发的事件
bindscrolltolower	EventHandle	滚动到底部/右边时触发的事件
scroll-with-animation	Boolean	滚动到顶部/左边时触发的事件
scroll-into-view	String	设置哪个方向可滚动，则在哪个方向滚动到该元素。值应为某子元素id（id不能以数字开头）
bindscroll	EventHandle	滚动时触发的事件

三、编写音乐推荐页面结构和样式

• 在info.wxml里实现内容区域滚动和轮播图

<!-- 内容滚动区域 -->
<scroll-view class="content-info" scroll-y><!-- 轮播图 --><swiper class="content-info-slide" indicator-color="rgba(255,255,255,.5)" indicator-active-color="#fff" indicator-dots circular autoplay><swiper-item><image src="/images/banner.jpg" /></swiper-item><swiper-item><image src="/images/banner.jpg" /></swiper-item><swiper-item><image src="/images/banner.jpg" /></swiper-item></swiper>
</scroll-view>

.content-info {height: 100%;
}::-webkit-scrollbar {width: 0;height: 0;color: transparent;
}/* 轮播图 */.content-info-slide {height: 302rpx;margin-bottom: 20px;
}.content-info-slide image {width: 100%;height: 100%;
}

• 实现展示
  
• 在info.html里实现功能按钮

<!-- 功能按钮 --><view class="content-info-portal"><view><image src="/images/04.png" /><text>私人FM</text></view><view><image src="/images/05.png" /><text>每日歌曲推荐</text></view><view><image src="/images/06.png" /><text>云音乐新歌榜</text></view></view>

/* 功能按钮 */.content-info-portal {display: flex;margin-bottom: 15px;
}.content-info-portal>view {flex: 1;font-size: 11pt;text-align: center;
}.content-info-portal image {width: 120rpx;height: 120rpx;display: block;margin: 20rpx auto;
}

• 实现展示
  
• flex布局实现热门音乐的页面布局

  <!-- 热门音乐 --><view class="content-info-list"><view class="list-title">推荐歌曲</view><view class="list-inner"><view class="list-item"><image src="/images/cover.jpg" /><view>紫罗兰</view></view><view class="list-item"><image src="/images/cover.jpg" /><view>五月之歌</view></view><view class="list-item"><image src="/images/cover.jpg" /><view>菩提树</view></view><view class="list-item"><image src="/images/cover.jpg" /><view>欢乐颂</view></view><view class="list-item"><image src="/images/cover.jpg" /><view>安魂曲</view></view><view class="list-item"><image src="/images/cover.jpg" /><view>摇篮曲</view></view></view></view>

/* 热门音乐 */.content-info-list {font-size: 11pt;margin-bottom: 20rpx;
}.content-info-list > .list-title {margin: 20rpx 35rpx;
}.content-info-list > .list-inner {display: flex;flex-wrap: wrap;margin: 0 20rpx;
}.content-info-list > .list-inner > .list-item {flex: 1;
}.content-info-list > .list-inner > .list-item > image {display: block;width: 200rpx;height: 200rpx;margin: 0 auto;border-radius: 10rpx;border: 1rpx solid #555;
}.content-info-list > .list-inner > .list-item > view {width: 200rpx;margin: 10rpx auto;font-size: 10pt;}

• 实现展示
  
• 在index.wxml里编写底部播放器

<!-- 底部播放器 -->
<view class="player"><image class="player-cover" src="/images/cover.jpg" /><view class="player-info"><view class="player-info-title">钢琴协奏曲</view><view class="player-info-singer">肖邦</view></view><view class="player-controls"><!-- 切换到播放列表 --><image src="/images/01.png" bindtap="changePage" data-page="2" /><!-- 播放或暂停 --><image wx:if="{{state=='paused'}}" src="/images/02.png" bindtap="play" /><image wx:else src="/images/02stop.png" bindtap="pause" /><!-- 下一曲 --><image src="/images/03.png" bindtap="next" /></view>
</view>
</view>

• 底部播放器样式

/* 底部播放器 */.player {display: flex;align-items: center;background: #222;border-top: 1px solid #252525;height: 112rpx;
}.player-cover {width: 80rpx;height: 80rpx;margin-left: 15rpx;border-radius: 8rpx;border: 1px solid #333;
}.player-info {flex: 1;font-size: 10pt;line-height: 38rpx;margin-left: 20rpx;padding-bottom: 8rpx;
}.player-info-singer {color: #888;
}.player-controls image {width: 80rpx;height: 80rpx;margin-right: 15rpx;
}

• 测试效果
  

第四章 播放器

一、任务分析

• 播放器标签页结构图：
  
• 播放器具体功能分析

1.音乐信息：显示当前播放曲目的标题和艺术家
2.专辑封面：当音乐播放时，专辑封面会顺时针旋转
3.播放进度：显示播放进度，调节音乐进度

二、组件介绍

• audioCtx对象声明的方式

var audioCtx = wx.createInnerAudioContext();

• 音频API接口的属性及说明

可选值	名称	说明
属性	src			音频资源的地址，用于直接播放
	startTime			开始播放的位置（秒），默认为0
	autoplay			是否自动开始播放，默认为false
	loop			是否循环播放，默认为false
	volume			音量。范围0~1。默认为1
	duration			音频的长度（秒）。在当前有合法的src时返回（只读）
	currentTime			音频的播放位置（秒）。在当前有合法的src时返回（只读）
	paused			开始播放的位置（秒），默认为0

三、实现播放器功能

• 在index.js里定义基础播放列表和音乐状态数据

/*** 页面的初始数据*/data: {item: 0,tab: 0,// 播放列表数据playlist: [{id: 1,title: '玫瑰花的葬礼',singer: '许嵩',src: 'https://www.ytmp3.cn/down/78393.mp3',coverImgUrl: '/images/cover.jpg'}, {id: 2,title: '幻听',singer: '许嵩',src: 'https://www.ytmp3.cn/down/59696.mp3',coverImgUrl: '/images/cover.jpg'}, {id: 3,title: '清明雨上',singer: '许嵩',src: 'https://www.ytmp3.cn/down/36119.mp3',coverImgUrl: '/images/cover.jpg'}, {id: 4,title: '灰色头像',singer: '许嵩',src: 'https://www.ytmp3.cn/down/59697.mp3',coverImgUrl: '/images/cover.jpg'}],state: 'paused',playIndex: 0,play: {currentTime: '00:00',duration: '00:00',percent: 0,title: '',singer: '',coverImgUrl: '/images/cover.jpg',}},

• 在index.js编辑音乐播放逻辑代码

   // 实现播放器播放功能audioCtx: null,onReady: function() {this.audioCtx = wx.createInnerAudioContext()// 默认选择第1曲this.setMusic(0)var that = this// 播放进度检测this.audioCtx.onError(function() {console.log('播放失败：' + that.audioCtx.src)})// 播放完成自动换下一曲this.audioCtx.onEnded(function() {that.next()})// 自动更新播放进度this.audioCtx.onPlay(function() {})this.audioCtx.onTimeUpdate(function() {that.setData({'play.duration': formatTime(that.audioCtx.duration),'play.currentTime': formatTime(that.audioCtx.currentTime),'play.percent': that.audioCtx.currentTime / that.audioCtx.duration * 100})})// 格式化时间function formatTime(time) {var minute = Math.floor(time / 60) % 60;var second = Math.floor(time) % 60return (minute < 10 ? '0' + minute : minute) + ':' + (second < 10 ? '0' + second : second)}},// 音乐播放setMusic: function(index) {var music = this.data.playlist[index]this.audioCtx.src = music.srcthis.setData({playIndex: index,'play.title': music.title,'play.singer': music.singer,'play.coverImgUrl': music.coverImgUrl,'play.currentTime': '00:00','play.duration': '00:00','play.percent': 0})},

• 修改底部播放器的结构代码

<!-- 底部播放器 -->
<view class="player"><image class="player-cover" src="{{play.coverImgUrl}}" /><view class="player-info"><view class="player-info-title">{{play.title}}</view><view class="player-info-singer">{{play.singer}}</view></view><view class="player-controls"><!-- 切换到播放列表 --><image src="/images/01.png" bindtap="changePage" data-page="2" /><!-- 播放或暂停 --><image wx:if="{{state=='paused'}}" src="/images/02.png" bindtap="play" /><image wx:else src="/images/02stop.png" bindtap="pause" /><!-- 下一曲 --><image src="/images/03.png" bindtap="next" /></view>
</view>

• 底部播放器样式代码

/* 底部播放器 */.player {display: flex;align-items: center;background: #222;border-top: 1px solid #252525;height: 112rpx;
}.player-cover {width: 80rpx;height: 80rpx;margin-left: 15rpx;border-radius: 8rpx;border: 1px solid #333;
}.player-info {flex: 1;font-size: 10pt;line-height: 38rpx;margin-left: 20rpx;padding-bottom: 8rpx;
}.player-info-singer {color: #888;
}.player-controls image {width: 80rpx;height: 80rpx;margin-right: 15rpx;
}

• 底部播放器播放功能
  
• 在indexjs里编写底部播放器暂停/播放按钮控制歌曲以及播放器切换下一曲歌曲功能

// 播放按钮play: function() {this.audioCtx.play()this.setData({state: 'running'})},// 暂停按钮pause: function() {this.audioCtx.pause()this.setData({state: 'paused'})},// 下一曲按钮next: function() {var index = this.data.playIndex >= this.data.playlist.length - 1 ? 0 : this.data.playIndex + 1this.setMusic(index)if (this.data.state === 'running') {this.play()}},

• 测试底部播放功能
  

四、编写播放器页面

• 在play.wxml编写播放器页面代码

<!-- 播放器 -->
<view class="content-play"><!-- 显示音乐信息 --><view class="content-play-info"><text>{{play.title}}</text><view>—— {{play.singer}} ——</view></view><!-- 显示专辑封面 --><view class="content-play-cover"><image src="{{play.coverImgUrl}}" style="animation-play-state:{{state}}" /></view><!-- 显示播放进度和时间 --><view class="content-play-progress"><text>{{play.currentTime}}</text><view><slider bindchange="sliderChange" activeColor="#d33a31" block-size="12" backgroundColor="#dadada" value="{{play.percent}}" /></view><text>{{play.duration}}</text></view>
</view>

• 查看页面
  
• 在index.wxss编写播放器样式

/* 播放器 */.content-play {display: flex;justify-content: space-around;flex-direction: column;height: 100%;text-align: center;
}.content-play-info > view {color: #888;font-size: 11pt;
}
/* 显示专辑页面样式 */.content-play-cover image {animation: rotateImage 10s linear infinite;width: 400rpx;height: 400rpx;border-radius: 50%;border: 1px solid #333;
}@keyframes rotateImage {from {transform: rotate(0deg);}to {transform: rotate(360deg);}
}/* 播放进度和时间 */.content-play-progress {display: flex;align-items: center;margin: 0 35rpx;font-size: 9pt;text-align: center;
}.content-play-progress > view {flex: 1;
}

• 查看播放器页面
  

第五章 播放列表

一、任务分析

• 播放器列表结构
  

二、实现播放列表功能

• 在playlist.wxml编写播放列表结构

<scroll-view class="content-playlist" scroll-y><view class="playlist-item" wx:for="{{playlist}}" wx:key="id" bindtap="change" data-index="{{index}}"><image class="playlist-cover" src="{{item.coverImgUrl}}" /><view class="playlist-info"><view class="playlist-info-title">{{item.title}}</view><view class="playlist-info-singer">{{item.singer}}</view></view><view class="playlist-controls"><text wx:if="{{index==playIndex}}">正在播放</text></view></view>
</scroll-view>

• 查看结果
  
• 在index.wxss编写播放列表样式

/* 播放列表 */.playlist-item {display: flex;align-items: center;border-bottom: 1rpx solid #333;height: 112rpx;
}.playlist-cover {width: 80rpx;height: 80rpx;margin-left: 15rpx;border-radius: 8rpx;border: 1px solid #333;
}.playlist-info {flex: 1;font-size: 10pt;line-height: 38rpx;margin-left: 20rpx;padding-bottom: 8rpx;
}.playlist-info-singer {color: #888;
}.playlist-controls {font-size: 10pt;margin-right: 20rpx;color: #c25b5b;
}

• 查看结果
  
• 在index.js里实现播放列表的切换功能

// 播放列表换曲功能change: function(e) {this.setMusic(e.currentTarget.dataset.index)this.play()}

三、测试播放列表切换功能

• 播放列表测试
  

【微信小程序——云音乐播放器】相关推荐

1. html5音乐播放器设计论文,基于微信小程序的音乐播放器设计和毕业论文

   摘  要 随着通信技术的发展和智能设备的普及,移动互联网在近两年发展迅猛,新兴的移动社交软件"微信"逐渐走进了手机用户的生活,深受全国数亿用户的欢迎.随着微信版本的不断更新,微信也 ...

2. 微信小程序实现音乐播放器（2）

   文章目录 前情提要 BackgroundAudioManager API:wx.setNavigationBarTitle() 搭建静态资源服务器 小程序项目 app.json app.wxss pa ...

3. 许嵩音乐智能问答系统微信小程序之音乐播放器

   许嵩音乐智能问答系统微信小程序之音乐播放器 - 项目简介 项目简介. 音乐播放器搭建. 获取数据及文本分类. 智能客服聊天界面. 连接前端微信小程序输入和后端python,并返回值 连接知识图谱 你还 ...

4. 微信小程序实现音乐播放器（3）（使用全局数据实现数据共享）

   文章目录 前情提要 搭建静态资源服务器 小程序项目 app.json app.js app.wxss pages/index/index.json pages/index/index.wxml pag ...

5. 微信小程序实现音乐播放器（5）

   文章目录 前情提要 pubsubjs实现页面通信 moment.js实现时间格式化 BackgroundAudioManager 小程序项目 app.json app.wxss app.js page ...

6. 微信小程序入门-音乐播放器

   萌新,随便做做,只是了解一下微信小程序,希望可以给看到的胖友一点参考. 之前在网上看到这个人入门四天做完一个,我五天做完了,比他好看,突然有一点自信 然后发现自己特别不乐意重新看自己的代码,总觉得写的 ...

7. 微信小程序017音乐播放器系统 php java

   小程序前端框架:uniapp 小程序运行软件:微信开发者 后端技术:java+Ssm(Spring+SpringMVC+MyBatis)+vue.js 后端开发环境:idea/eclipse 数据库: ...

8. 基于微信小程序的音乐播放器设计

   目 录 1绪论 1 1.1选题背景及意义 1 1.2发展现状 1 1.2.1什么是微信小程序 1 1.2.2小程序市场的现状 4 1.3研究主要内容 4 2系统技术 5 2.1 Java语言 5 2. ...

9. 基于微信小程序java音乐播放器毕业设计论文/程序代码

   摘  要 5G时代已经慢慢的融入了我们的日常生活,随着国家的通信政策以及各大运营商的宣传的影响,5G手机已经随处可见,面对全球信息.技术空前高速发展,信息高速化发展更是社会进步的一个标志.在全球信息化 ...

最新文章

1. Oracle CPU使用率过高问题处理
2. 删除所有的distribution chain再保存的后台执行逻辑
3. 平稳序列的预测和拟合之单位根检验
4. SAP License：SAP 成本管理专题
5. httpSession和Cookie
6. Rust : Tonic 基于Rust的gRPC实现
7. linux ppsspp速度,PPSSPP模拟器详细使用技巧
8. 写贺卡给毕业师姐怎么写计算机系的,写给师姐的毕业祝福语赠言 送给师姐的毕业祝福语大全...
9. 跑语义分割程序时报错
10. 手把手教会你视频转文字怎么操作，快来get
11. 解决Outlook打不开邮件里的链接的方法
12. 【USACO 2020 January Silver】Loan Repayment 题解
13. 一个完整推荐系统的设计实现
14. 涂鸦模组开发（压力传感器HX711）——2. 压力传感器HX711
15. drupal 的简单模板修改
16. 漫画 | 连绿巨人都想要了解的Greenplum
17. java jsp开发的电子商务系统代码下载
18. 服务器系统网口,服务器网口设置方法
19. surface pro 7键盘只能识别功能区，无法输入字母和数字
20. copy和deepcopy

热门文章

1. Python练手小项目（11）用户名密码验证的初步探索
2. 修改win10更新服务器地址,Windows 10 更新缓存位置能否修改
3. MIC：最大信息系数
4. TabLayout+ViewPager+Fragment实现切页展示
5. vcs 覆盖率收集2——覆盖率选项 + 合并覆盖率
6. 顺序栈的实现和两栈共享空间
7. mysql isnum()_mysql 一些基础的语法和命令
8. 视频转换格式该如何操作
9. pcb只开窗不镀锡_关于pads中 PCB铺铜开窗镀锡 的操作
10. 光猫灯显示正常但是报651错误解决办法