“音乐”小程序项目

学习目标
开发前准备
- 项目展示
- 项目分析
- - 页面结构
  - 目录结构
标签页切换--index页面
音乐推荐
播放器页面
播放列表
逻辑文件index.js
- data数据
- 函数
本人的bug

已经更新，可以在手机上进行调试

图片利用图床生成在线链接
网易云音乐MP3地址为http://music.163.com/song/media/outer/url?id= ？.mp3

学习目标

掌握swiper组件的使用
掌握scroll-view组件的使用
掌握image组件的使用
掌握slider组件的使用
掌握音频API的使用

具体使用请看微信开发文档

开发前准备

项目展示

项目分析

页面结构

页面由上、中、下三个区域组成（tab，content，player）
content通过左右滑动可以实现标签页的转换
音乐推荐向用户推荐热门音乐
播放器显示当前播放进度，用户可以跳转进度
播放列表显示当前播放的曲目列表，用户可以进行曲目切换
player三个按钮 打开播放列表 播放暂停 切换到下一曲

目录结构

标签页切换–index页面

<!-- 顶部 -->
<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"><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>

音乐推荐

<scroll-view class="content-info" scroll-y><!-- 轮播图 --><swiper class="content-info-slide" indicator-color="rgba(255,255,255,0.5)" indicator-active-color="#fff" indicator-dots autoplay><swiper-item><image src="../images/b1.jpg" /></swiper-item><swiper-item><image src="../images/b2.jpg" /></swiper-item><swiper-item><image src="../images/b3.jpg" /></swiper-item></swiper><!-- 功能按钮 --><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><!-- 热门音乐 --><view class="content-info-list"><view class="list-title">推荐歌曲</view><view class="list-inner"><view wx:if="{{index<6}}" wx:for="{{playlist}}" wx:key="id" bindtap="change" data-index="{{index}}" class="list-item"><image src="{{item.coverImgUrl}}"></image><view>{{item.title}}</view></view></view>
</scroll-view>

播放器页面

<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>

播放列表

<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.js

data数据

data: {item:0,tab:0,playlist:[{id:1,title:'有何不可',singer:'许嵩',src:'/pages/mp3/1.mp3',coverImgUrl:'../images/m1.jpg'},{id:2,title:'Love Story',singer:'Taylor swift',src:'/pages/mp3/2.mp3',coverImgUrl:'../images/m2.jpg'},{id:3,title:'无人之岛(Cover 任然)',singer:'鸣小明',src:'/pages/mp3/3.mp3',coverImgUrl:'../images/m3.jpg'},{id:4,title:'云烟成雨',singer:'房东的猫',src:'/pages/mp3/4.mp3',coverImgUrl:'../images/m4.jpg'},{id:5,title:'小幸运',singer:'刘烨',src:'/pages/mp3/5.mp3',coverImgUrl:'../images/m5.jpg'},{id:6,title:'理想三旬',singer:'陈鸿宇',src:'/pages/mp3/6.mp3',coverImgUrl:'../images/m6.jpg'}],state:'paused',playIndex:0,play:{currentTime:'00:00',duration:'00:00',percent:0,title:'',singer:'',coverImgUrl:'../images/m1.jpg'}
},
//音频对象
audioCtx:null

函数

//tab绑定事件--滑动content
changeItem:function(e){this.setData({item:e.target.dataset.item})},
//content swiper绑定事件 改变tab
changeTab:function(e){this.setData({tab:e.detail.current})},
//加载页面时执行
onReady:function(){this.audioCtx = wx.createInnerAudioContext();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.currentTime':that.formatTime(that.audioCtx.currentTime),'play.duration':that.formatTime(that.audioCtx.duration),'play.percent':that.audioCtx.currentTime/that.audioCtx.duration*100})})// 默认第一曲this.setMusic(0);
},
// 格式化时间
formatTime:function(time){var minute=Math.floor(time/60)%60;var second=Math.floor(time)%60;return (minute<10?'0'+minute:minute)+":"+(second<10?'0'+second:second)
},
//根据index切换当前播放曲目
setMusic:function(index){var music=this.data.playlist[index];this.audioCtx.src=music.src;this.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})
},
//切换到播放列表
changePage:function(e){this.setData({item:e.currentTarget.dataset.page,tab:e.currentTarget.dataset.page})
},
//播放曲目
play:function(){this.audioCtx.play();this.setData({state:'running'})
},
//暂停曲目
pause:function(){this.audioCtx.pause();this.setData({state:'paused','play.duration':this.formatTime(this.audioCtx.duration)})
},
//播放下一首
next:function(){var index=this.data.playIndex>=this.data.playlist.length-1?0:this.data.playIndex+1;this.setMusic(index);this.forward(0);//此处请看下面的format函数
},
//改变进度条，改变当时播放时长
sliderChange:function(e){var second=e.detail.value*this.audioCtx.duration/100;this.forward(second);//此处请看下面的format函数
},
//单击播放列表，改变播放曲目
change:function(e){this.setMusic(e.currentTarget.dataset.index);this.forward(0);//此处请看下面的format函数
},

本人的bug

由于InnerAudioContext.seek 跳转时长不会更新,请看开发文档解决

forward:function(second){this.audioCtx.pause();// 先暂停this.audioCtx.seek(second);// 再跳转setTimeout(() => {this.play();}, 500);// 延时播放
})

由于路径播放不成功问题，请看路径问题使用绝对路径

微信小程序第三章 “音乐”小程序项目相关推荐

计算机二级web考点,2017年计算机二级考点解析：WEB程序第三章
2017年计算机二级考点解析:WEB程序第三章 2017-08-26 12:16:38来源:计算机等级考试网分享导读:在计算机等级考试中,有许多的知识点是需要我们积累掌握的,每个等级的内容都是不同的 ...
第三章 VB的程序设计基础
轉自:http://wwww.hyit.edu.cn/edu/vb/study/index.htm 第三章 VB的程序设计基础 2.1 VB编码规则 1. 语言元素 VB的语言基础是BASIC语 ...
DSP28335，三相逆变电路电压闭环程序，三相逆变数字电源程序
DSP28335,三相逆变电路电压闭环程序,三相逆变数字电源程序. 包括源代码文件和PDF说明文件. 详细说明了代码含义,三相逆变电路电路电压闭环分析,电路设计步骤,软件设计流程,软件调试步骤等. I ...
微信小程序教学第三章第四节（含视频）：小程序中级实战教程：下拉更新、分享、阅读标识...
为什么80%的码农都做不了架构师?>>> 下拉更新.分享.阅读标识本文配套视频地址: https://v.qq.com/x/page/h0554i4u5ob.html 开始前 ...
微信小程序之网易云音乐小案例
目录一.编写对网易云音乐api发起请求的代码二.编写视频项(组件) 三.编写mv列表:包含(轮播图+视频列表[每个视频项引用组件来呈现]) 四.编写视频详情页成品图: 准备工作: --在page ...
算法小论——第三章又把新桃换旧符
2019独角兽企业重金招聘Python工程师标准>>> 笔记这一章主要是渐进记号和高中数学的回忆. 几个标记: Θ -- 上界和下界,绑定值,相当于f(n) ∈ [c1 * g(n ...
高频电子线路——第三章高频小信号放大器
14天阅读挑战赛努力是为了不平庸~ 算法学习有些时候是枯燥的,这一次,让我们先人一步,趣学算法!欢迎记录下你的那些努力时刻(算法学习知识点/算法题解/遇到的算法bug/等等),在分享的同时加深对于算 ...
MySQL数据库https接口_第三章 mysql 数据库接口程序以及SQL语句操作
mysql 数据库接口程序以及SQL语句操作用于管理数据库: 命令接口自带命令 DDL:数据定义语言(create drop ) DCL: 数据控制语言(grant revoke) DML: 数据 ...
java全文检索工具_全文检索工具elasticsearch：第三章： Java程序中的应用
搭建模块创建二个项目 gmall-list-service的appliction.properties: server.port=8073 spring.datasource.url=jdbc:my ...

微信小程序第三章 “音乐”小程序项目

“音乐”小程序项目

学习目标

开发前准备

项目展示

项目分析

页面结构

目录结构

标签页切换–index页面

音乐推荐

播放器页面

播放列表

逻辑文件index.js

data数据

函数

本人的bug

微信小程序第三章 “音乐”小程序项目相关推荐

最新文章

热门文章

微信小程序 第三章 “音乐”小程序项目

“音乐”小程序项目

学习目标

开发前准备

项目展示

项目分析

页面结构

目录结构

标签页切换–index页面

音乐推荐

播放器页面

播放列表

逻辑文件index.js

data数据

函数

本人的bug

微信小程序 第三章 “音乐”小程序项目相关推荐

最新文章

热门文章

微信小程序第三章 “音乐”小程序项目

微信小程序第三章 “音乐”小程序项目相关推荐