微信小程序开发-Music_of_Ponfey_com – 朱小帅

调试预览

小程序首页展示：首页banner轮播图

小程序播放器页面展示：（目前暂未开发歌词同步显示）

开发流程分析

1、swiper组件：滑块视图容器，用于实现轮播图
2、scroll-view组件：用于可滚动视图区域
3、image组件：定义图片，类似HTML中<img>标签
4、slider组件:滑选某一个值，实现播放器进度条功能
5、音频API组件

开发步骤：

确定目录结构 > 确定页面基础构建，编写页面结构和基础样式 > 实现标签页切换 > 实现功能按钮 > 实现基础播放器功能 > 实现换曲功能

目录结构：

app.js 应用程序逻辑文件
app.json 应用程序逻辑文件
pages/index/index.js index页面的逻辑文件
pages/index/index.json index页面的配置文件
pages/index/index.wxss index页面的样式文件
pages/index/index.wxml index页面的结构文件
pages/index/info.wxml 音乐推荐的标签页面的结构文件
pages/index/play.wxml 播放器的标签页面的结构文件
pages/index/playlist.wxml 播放列表的标签页面的结构文件
image 图片文件

页面结构：

tab导航栏 > content内容区 > player音乐播放控件

核心代码：

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组件编写滑动页面结构：

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

小程序基础页面和样式：

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

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

<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) {
…
}, // 滚动事件

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)
},

scroll-view组件事件对象参数分析：

scrollLeft：横向滚动条左侧到视图左边的距离;
scrollTop：纵向滚动条上端到视图顶部的距离;
scrollHeight：纵向滚动条在Y轴上最大滚动距离;
scrollWidth：横向滚动条在X轴上最大的滚动距离;
deltaX：横向滚动条的滚动状态;
deltaY：纵向滚动条的滚动状态;

scroll-view组件：

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

swiper组件实现轮播图：

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

flex布局实现功能按钮：

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

audioCtx对象声明的方式：

var audioCtx = wx.createInnerAudioContext(); // 创建audioCtx上下文实例

innerAudioContext案例使用：

onReady: function() {
var audioCtx = wx.createInnerAudioContext()
audioCtx.src = 'https://www.ponfey.com/files/.../.../秦海清-不如.qmcflac'
audioCtx.onPlay(function() {
    console.log('开始播放')
  })
…
},

slider组件的使用：

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

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

音乐播放列表和音乐状态数据：

playlist: [{
  id: 1, title: '不如', singer: '秦海清',
  src: 'https://www.ponfey.com/files/.../.../秦海清-不如.qmcflac', coverImgUrl: 
         '/images/秦海清-不如.jpg'
}…}],

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

音乐播放逻辑代码：

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

底部播放器的结构代码：

<!-- 底部播放器 -->
<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;
}
…

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

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

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

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

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

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

播放器页面下方的滑块结构：

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

显示音乐的播放进度：

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

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

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

sliderChange: function(e) {
  var second = e.detail.value *
  this.audioCtx.duration / 100
  this.audioCtx.seek(second)
}, // 滑块事件处理函数

实现换曲功能：

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