微信小程序实战之网易云音乐歌曲详情页实现代码

标题：微信小程序实战之网易云音乐歌曲详情页实现代码攻略

介绍：本攻略将带领读者实现微信小程序版网易云音乐歌曲详情页，在本攻略中，我们将介绍如何创建一个小程序、如何组织页面结构和如何实现歌曲详情页的布局和功能。

创建一个新的小程序

首先，打开微信小程序开发者工具，选择创建一个新的小程序项目，填写 appID 和项目名称。（这里我就不放截图了）

组织页面结构

接下来，我们需要设置小程序的页面结构，创建一个新页面，位于 pages/songDetail 目录下，打开 songdetail.json，设置页面的 navigationBarTitleText 为“歌曲详情”：

{
  "navigationBarTitleText": "歌曲详情"
}

然后打开 songdetail.wxml，布局页面的组件结构，推荐按照下面的组件顺序进行布局：（这里仅展示核心代码）

<!-- 顶部部分 -->
<view class="top">
  <image class="cover" src="{{song.cover}}" mode="aspectFill" />
  <view class="detail">
    <view class="title">{{song.title}}</view>
    <view class="info">
      <image class="avatar" src="{{song.artist.picUrl}}" />
      <text class="name">{{song.artist.name}}</text>
    </view>
    <view class="operations">
      <!-- 操作按钮部分 -->
    </view>
  </view>
</view>

<!-- 播放器部分 -->
<view class="audio">
  <audio id="audio" src="{{song.src}}" bindtimeupdate="onTimeUpdate" bindended="onAudioEnded" />
  <view class="progress">
    <view class="current" style="width:{{progressWidth}}"></view>
    <slider min="0" max="{{song.duration}}" value="{{currentTime}}" bindchange="onSeekbarChanged" />
  </view>
  <view class="controls">
    <!-- 控制按钮部分 -->
  </view>
</view>

实现歌曲详情页布局和功能

接下来，我们将实现歌曲详情页的布局和功能，主要包括歌曲封面、标题、歌手信息、播放器、播放进度、操作按钮和控制按钮。

歌曲封面

我们需要在 top 组件里放置歌曲封面，封面图片的地址和大小可以通过歌曲对象 song 获取：

<image class="cover" src="{{song.cover}}" mode="aspectFill" />

标题和歌手信息

我们需要在 detail 组件里放置歌曲标题和歌手信息：

<view class="title">{{song.title}}</view>
<view class="info">
  <image class="avatar" src="{{song.artist.picUrl}}" />
  <text class="name">{{song.artist.name}}</text>
</view>

播放器和进度条

我们需要在 audio 组件里放置播放器和进度条，播放器的 src 属性可以绑定歌曲地址，进度条可以通过 slider 组件实现：

<audio id="audio" src="{{song.src}}" bindtimeupdate="onTimeUpdate" bindended="onAudioEnded" />
<view class="progress">
  <view class="current" style="width:{{progressWidth}}"></view>
  <slider min="0" max="{{song.duration}}" value="{{currentTime}}" bindchange="onSeekbarChanged" />
</view>

操作按钮和控制按钮

我们需要在 operations 和 controls 组件里放置操作按钮和控制按钮，操作按钮可以实现歌曲的分享和下载，控制按钮可以实现播放、暂停、上一曲和下一曲等功能：

<view class="operations">
  <button class="btn-share" open-type="share">分享</button>
  <button class="btn-download">下载</button>
</view>

<view class="controls">
  <button class="btn-prev" bindtap="onPrev"><icon class="iconfont icon-prev" /></button>
  <button class="{{playing ? 'btn-pause' : 'btn-play'}}" bindtap="onTogglePlay"><icon class="iconfont {{playing ? 'icon-pause' : 'icon-play'}}" /></button>
  <button class="btn-next" bindtap="onNext"><icon class="iconfont icon-next" /></button>
</view>

示例说明

这里提供两个示例，分别是：

示例一：播放器进度条

我们在 songdetail.js 页面中添加两个方法，一个用于监听播放器时间变化，更新进度条，一个用于监听进度条变化，快进或快退歌曲：

Page({
  data: {
    currentTime: 0,
    progressWidth: 0,
    ...
  },
  onTimeUpdate: function (e) {
    const { currentTime, duration } = e.detail;
    const progressWidth = `${currentTime / duration * 100}%`;
    this.setData({ currentTime, progressWidth });
  },
  onSeekbarChanged: function (e) {
    const { value } = e.detail;
    this.setData({ currentTime: value });
    const audioContext = wx.createAudioContext('audio');
    audioContext.seek(value);
  },
  ...
})

绑定进度条的变化事件：

<slider min="0" max="{{song.duration}}" value="{{currentTime}}" bindchange="onSeekbarChanged" />

示例二：播放列表

我们在歌曲详情页中添加一个按钮，点击按钮后，可以进入播放列表页面 pages/playlist，展示和操作歌曲列表：

<button bindtap="onPlaylist"><icon class="iconfont icon-playlist"></icon></button>

Page({
  onPlaylist: function () {
    wx.navigateTo({ url: '/pages/playlist/playlist' });
  }
  ...
})

至此，我们已完成了微信小程序版网易云音乐歌曲详情页的布局和功能。