微信小程序实战-第3章 音乐小程序项目

微信小程序实战-第3章 音乐小程序项目

3.1 开发前准备

3.1.1项目展示

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

3.1.2项目分析

3.1.3项目初始化

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

index

{
  "pages": [
    "pages/index/index"
  ]
}

{
  "navigationBarBackgroundColor": "#fff",
  "navigationBarTitleText": "音乐",
  "navigationBarTextStyle": "black"
}

3.2 【任务1】标签页切换

3.2.1任务分析

3.2.2前导知识

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

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>

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

item-id属性

<swiper current-item-id="c">
  <swiper-item item-id="a" style="background:#ccc">0</swiper-item>
  <swiper-item item-id="b" style="background:#ddd">1</swiper-item>
  <swiper-item item-id="c" style="background:#eee">2</swiper-item>
</swiper>

include

<include src="header.wxml" />
<view> body </view>
<include src="footer.wxml" />

3.2.3编写页面结构和样式

音乐小程序基础页面和样式：
pages/index/index.wxml

 <!-- 标签页标题 -->
<view class="tab">
  <view class="tab-item">音乐推荐</view>
   …
 </view>
<!-- 内容区域 -->
<view class="content"></view>
<!-- 底部播放器 -->
<view class="player"></view>

音乐小程序基础页面和样式：
pages/index/index.wxss

page {
     display: flex;
     flex-direction: column;
     background: #17181a;
     color: #ccc;
     height: 100%;
    }
...

测试页面info.wxml、page.wxml、play.wxml文件：

<view style="background:#ddd; color:#000; height:100%"> play</view>
<view style="background:#ccc; color:#000; height:100%">info</view>
<view style="background:#eee; color:#000; height:100%">playlist</view>

3.2.4实现标签页切换

单击导航栏选项卡实现标签页切换：

 单击事件
 <view class="tab-item {{tab==0?'active':''}}" 
bindtap="changeItem" data-item="0">
音乐推荐</view>
changeItem: function(e) {
…
},

标签页切换样式

.tab-item.active {
  color: #c25b5b;
  border-bottom-color: #c25b5b;
}

通过滚动事件切换页面效果：

滚动事件
 <swiper current="{{item}}" bindchange="changeTab">
changeTab: function(e) {
…
},

标签页切换样式

.tab-item.active {
  color: #c25b5b;
  border-bottom-color: #c25b5b;
}

3.3 【任务2】音乐推荐

3.3.1任务分析

3.3.2前导知识

scroll-view组件事件对象：

<scroll-view scroll-x scroll-y style="height:200px" bindscroll="scroll">
  <view style="width:200%;height:400px;background:#ccc"></view>
</scroll-view>
scroll: function(e) {
  console.log(e.detail)
},

image组件缩放模式和裁剪模式测试：

3.3.3内容区域滚动

scroll-view组件

  <scroll-view class="content-info" scroll-y>
  <view style="background:#eee;height:1000px"></view>
  <view>已到达底部</view>
</scroll-view>

3.3.4轮播图

swiper组件实现轮播图
pages/index/info.wxml

 <swiper class="content-info-slide" indicator-color="rgba(255,255,255,.5)" indicator-active-color="#fff" indicator-dots circular autoplay>
  <swiper-item></swiper-item>…
</swiper>

3.3.5功能按钮

flex布局实现功能按钮：
pages/index/info.wxml

 <view class="content-info-portal">
  <view>
    <image src="/images/04.png" />
    <text>私人FM</text>
  </view>
  …
</view>

3.3.6热门音乐

flex布局实现页面布局：
pages/index/info.wxml

 <view class="content-info-list">
  <view class="list-title">推荐歌曲</view>
  <view class="list-inner">
    <view class="list-item"></view>
    …
</view>
</view>

3.4 【任务3】播放器

3.4.1任务分析

3.4.2前导知识

audioCtx对象声明的方式：
创建audioCtx上下文实例

 var audioCtx = wx.createInnerAudioContext();

innerAudioContext案例使用：

page/test/test.js

onReady: function() {
var audioCtx = wx.createInnerAudioContext()
audioCtx.src = 'http://……/xx.mp3'
audioCtx.onPlay(function() {
    console.log('开始播放')
  })
…
},

slider组件的使用：

page/test/test.wxml

<slider bindchanging="sliderChanging" show-value />

page/test/test.js

sliderChanging: function(e) {
  console.log(e.detail.value)
},

3.4.3定义基础数据

音乐播放列表和音乐状态数据:
pages/index/index.js

playlist: [{
  id: 1, title: '钢琴协奏曲', singer: '肖邦',
  src: 'http://…….mp3', coverImgUrl: 
         '/images/cover.jpg'
}…}],

state: 'paused',
playIndex: 0,
play: {
  …
},

3.4.4实现音乐播放功能

音乐播放逻辑代码：
pages/index/index.js

 audioCtx: null,
onReady: function() {
  this.audioCtx = wx.createInnerAudioContext()
  // 默认选择第1曲
  this.setMusic(0)
},
setMusic: function(index) {…},

底部播放器的结构代码：

pages/index/index.wxml

 <!-- 底部播放器 -->
<view class="player">
  <image class="player-cover" src="{{play.coverImgUrl}}" />
  <view class="player-info">
  …
  </view>
</view>

底部播放器的样式代码：

.player {
  display: flex;
  align-items: center;
  background: #222;
  border-top: 1px solid #252525;
  height: 112rpx;
}
…

底部播放器暂停/播放按钮控制歌曲：

pages/index/index.wxml

<image wx:if="{{state=='paused'}}" src="/images/02.png" bindtap="play" />
<image wx:else src="/images/02stop.png" bindtap="pause" />

pages/index/index.js

play: function() {
  this.audioCtx.play()
  this.setData({ state: 'running' })
}
…

实现播放器切换下一曲歌曲：

pages/index/index.wxml

 <image src="/images/03.png" bindtap="next" />

pages/index/index.js

next: function() {
  var index = this.data.playIndex >= this.data.playlist.length- 1 ?
                      0 : this.data.playIndex + 1
  this.setMusic(index)
…},

3.4.5编写播放器页面

播放器页面结构代码：
pages/index/play.wxml

 <view class="content-play">
<view class="content-play-info">
    <text>{{play.title}}</text>
    <view>—— {{play.singer}} ——</view>
  </view>
  …
</view>

播放器页面样式代码
pages/index/play.wxss

.content-play {
  display: flex;
  justify-content: space-around;
  flex-direction: column;
  height: 100%;
  text-align: center;
}
…

通过CSS3动画实现海报的旋转功能：

pages/index/play.wxml

<!-- 显示专辑封面 -->
<view class="content-play-cover">
  <image src="{{play.coverImgUrl}}" 
  style="animation-play-state:
  {{state}}" />
</view>

通过CSS3动画实现海报的旋转功能：

pages/index/play.wxss

.content-play-cover image {
  animation: rotateImage 10s linear infinite;
  …
}
@keyframes rotateImage {
  from {transform: rotate(0deg);
  } to {transform: rotate(360deg);}
}

3.4.6控制播放进度

播放器页面下方的滑块结构：
pages/index/play.wxml

 <slider activeColor="#d33a31" block-size="12"
backgroundColor="#dadada" value="{{play.percent}}" />
<text>{{play.duration}}</text>

播放器页面下方的滑块样式：

pages/index/play.wxss

 .content-play-progress {
  display: flex;
  align-items: center;
…}
.content-play-progress > view {
  flex: 1;
}

显示音乐的播放进度：

pages/index/index.js

 onReady: function() {
  this.audioCtx = wx.createInnerAudioContext()
  var that = this
  this.audioCtx.onEnded(function() {
    that.next()
  })
  …
},

控制进度条的长度控制歌曲播放进度：

slider组件

 <slider 
bindchange="sliderChange" 
activeColor="#d33a31" 
block-size="12"
backgroundColor="#dadada" 
value="{{play.percent}}" />

滑块事件处理函数

sliderChange: function(e) {
  var second = e.detail.value *
  this.audioCtx.duration / 100
  this.audioCtx.seek(second)
},

3.5 【任务4】播放列表

3.5.1任务分析

控制进度条的长度控制歌曲播放进度：

编写页面和结构样式
控制进度条的长度控制歌曲播放进度：
pages/index/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>
…
</scroll-view>

控制进度条的长度控制歌曲播放进度：

pages/index/index.wxss

 .playlist-item {
  display: flex;
  align-items: center;
  border-bottom: 1rpx solid #333;
  height: 112rpx;
}
…

实现换曲功能：

pages/index/index.js

 change: function(e) {
  this.setMusic(e.currentTarget.dataset.index)
  this.play()
},

本章总结

本章讲解了音乐小程序项目的完整开发流程，其开发步骤包括页面结构的分析、样式的设计、组件的运用等。通过本章的学习，读者能够掌握小程序的基本交互逻辑的开发，能够运用API来实现项目中的特定功能，学会解决开发过程中常见的问题。
需要该项目整体运行源代码，可私信我免费提供。