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

刺骨的言语ヽ痛彻心扉 2022-11-15 05:53 147阅读 0赞

### 文章目录 ###

*   *  效果展示
     *  系统设计
     *  系统属性
     *  代码模块
     *   *  主界面：index.wxml
         *  头部：header
         *  底部：footer

## 效果展示 ##

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

## 系统设计 ##

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

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

目录结构如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUyNTI3Mg_size_16_color_FFFFFF_t_70]

## 系统属性 ##

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

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实现即可  
![在这里插入图片描述][20210331160918843.png]  
header.wxml

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

### 底部：footer ###

底部我们要做成一个播放器样式  
![在这里插入图片描述][20210331162223148.png]  
当我们点击头像时会跳转到播放器页面，点击三条横线时会跳转到播放列表页面，点击播放会播放音乐并变成  
![在这里插入图片描述][20210331163049885.png]  
点击暂停会暂停音乐并变成  
![在这里插入图片描述][20210331163101221.png]  
点击下一首切换音乐

页面设计代码如下：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()
      }
    },

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUyNTI3Mg_size_16_color_FFFFFF_t_70]: /images/20221022/4b9bbfea1a7f41b98ad09d057458e907.png
[20210331160918843.png]: /images/20221022/2067c2dc874b4e08b03f20248a045570.png
[20210331162223148.png]: https://img-blog.csdnimg.cn/20210331162223148.png
[20210331163049885.png]: https://img-blog.csdnimg.cn/20210331163049885.png
[20210331163101221.png]: https://img-blog.csdnimg.cn/20210331163101221.png