微信小程序实验(二)

（四）音乐播放器（播放器）

1. 实验目的：

通过本实验，学生将了解和掌握一般微信小程序的复杂页面结构设计方法，其中包括页面结构.wxml文件中元素的flex布局方法、轮播图实现、slider组件使用，以及在.js文件中的代码里编写具体的事件处理函数。

2 实验平台：

硬件：个人笔记本电脑

软件：微信小程序开发工具 

3. 实验内容和步骤：

3.1 修改主页面结构文件index.wxml，从而在底部增加播放器栏

<!-- 底部播放器 -->
<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 src="/images/07.png" bindtap="prev" />
<!-- 播放或暂停 -->
<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>

3.2 在播放器页面结构文件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>

3.3 修改主页面样式文件index.wxss，从而实现底部播放器和播放页面的样式

/* ***********下：底部播放器部分*********** */
/* 底部播放器样式 */
.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;
}

/* ***********2：播放器页*********** */
/* 整个播放器页样式 */
.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;
}

3.4 修改主页面逻辑功能文件index.js，从而实现底部播放器play和pause功能，以及播放页显示功能

// 播放按钮
play: function() {
this.audioCtx.play()
this.setData({
state: 'running'
})
},
// 暂停按钮
pause: function() {
this.audioCtx.pause()
this.setData({
state: 'paused'
})
},
//点击底部图片跳转到播放器页
player: function (e) {
this.setData({
item: 1
})
},

（五）音乐播放器（播放列表） 

1. 实验目的：

通过本实验，学生将了解和掌握一般微信小程序的复杂页面结构设计方法，其中包括页面结构.wxml文件中元素的flex布局方法和条件渲染+列表渲染方法，以及在.js文件中的代码里编写具体的事件处理函数。

2 实验平台：

硬件：个人笔记本电脑

软件：微信小程序开发工具 

3. 实验内容和步骤：

3.1 修改播放列表页面结构文件playerlist.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>

3.2 修改主页面样式文件index.wxss，从而实现播放列表页面的样式

/* ***********3：播放列表页*********** */
/* 播放列表 */
.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;
}

3.3 修改主页面逻辑功能文件index.js，从而实现底部播放器跳转功能和后退+前进功能，以及播放列表页面中的播放提示和切歌提示功能。

//点击底部列表图标跳转到播放列表
changePage: function (e) {
this.setData({
item:2
})
},
// 上一曲按钮
prev: function() {
var index = this.data.playIndex >= this.data.playlist.length - 1 ? 0 : this.data.playIndex - 1
this.setMusic(index)
if (this.data.state === 'running') {
this.play()
}
},
// 下一曲按钮
next: function() {
var index = this.data.playIndex >= this.data.playlist.length - 1 ? 0 : this.data.playIndex + 1
this.setMusic(index)
if (this.data.state === 'running') {
this.play()
}
},