打造自己的音乐小程序（上）——主框架设计

文章目录

• • 效果展示
  • 系统设计
  • 系统属性
  • 代码模块

效果展示

音乐小程序，点击播放效果视频

系统设计

程序主页面，其中包括header content footer 三大部分

• header 是tab栏，用于切换页面
• content 有 主页面信息，音乐播放器，播放列表三部分构成
  • info：主页信息内容部分
  • play：播放器页面
  • playlist：播放列表
• footer 是播放器，用于点击播放，切歌，查看列表，查看播放。

目录结构如下：

系统属性

首先进行整个页面的属性设置，包括小程序名称，顶部样式等等

index.json

{
  "navigationBarBackgroundColor": "#ED2E2E",
  "navigationBarTitleText": "网易云音乐",
  "navigationBarTextStyle": "white"
}

代码模块

主页面采用了include代码引用，将各部分功能分到不同的wxml文件中，代码如下

主界面：index.wxml

<!-- 标签页标题 -->
<include src="./header.wxml"/>
<!-- 内容区域 -->
<view class="content">
  <swiper current="{{item}}" bindchange="changeTab">
    <swiper-item>
      <!-- 中间信息内容部分 -->
      <include src="./info.wxml"/>
    </swiper-item>
    <swiper-item>
      <!-- 播放器页面 -->
      <include src="play.wxml" />
    </swiper-item>
    <swiper-item>
      <include src="playlist.wxml" />
    </swiper-item>
  </swiper>
</view>
<!-- 底部播放器 -->
<include src="./footer.wxml"/>

头部：header

我们要做成 tab滑动切换 的效果，在这里我们就用view实现即可

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

这里的css样式类有基本的共有tab属性 还有一个判断是否选中当前tab 的属性，如果后台检测到的tab值与当前选中的一样，那么给当前选中的tab加上 active 类，active 样式就是进行切换时下面的小横线。

底部：footer

底部我们要做成一个播放器样式

当我们点击头像时会跳转到播放器页面，点击三条横线时会跳转到播放列表页面，点击播放会播放音乐并变成

点击暂停会暂停音乐并变成

点击下一首切换音乐

页面设计代码如下：footer.wxml

<view class="player">
  <image class="player-cover" src="{{play.coverImgUrl}}" bindtap="dumptoplay"/>
  <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>

头像的调转事件

dumptoplay:function(){
  this.setData({
    item:"1",
  });
}

列表与他类似，在这不写了

播放，暂停，下一首事件

// 播放按钮
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 + 1
  this.setMusic(index)
  if (this.data.state === 'running') {
    this.play()
  }
},