微信小程序介绍音乐界面源码

以下是一个简单的微信小程序介绍音乐界面的源码示例，包括一个音乐播放器和一些歌曲信息的展示：

1. 页面结构

<view class="container">
  <view class="music-info">
    <image class="cover" src="{{song.coverUrl}}"></image>
    <view class="detail">
      <text class="name">{{song.name}}</text>
      <text class="artist">{{song.artist}}</text>
    </view>
    <button class="play-btn" bindtap="togglePlay">
      <image class="play-icon" src="{{playing ? 'pause.png' : 'play.png'}}"></image>
    </button>
  </view>
  <audio id="audio" src="{{song.musicUrl}}" bindplay="onPlay" bindpause="onPause"></audio>
</view>

页面主要由两部分组成：音乐信息展示区和音乐播放器。音乐信息展示区包括歌曲封面、歌曲名、歌手名和播放按钮；音乐播放器使用微信小程序的audio组件实现音乐播放。

2. 页面逻辑

Page({
  data: {
    playing: false,
    song: {
      name: '演员',
      artist: '薛之谦',
      coverUrl: 'https://xxx.com/xxx.png',
      musicUrl: 'https://xxx.com/xxx.mp3'
    }
  },
  togglePlay: function() {
    if (this.data.playing) {
      wx.pauseBackgroundAudio();
    } else {
      wx.playBackgroundAudio({
        dataUrl: this.data.song.musicUrl,
        title: this.data.song.name,
        coverImgUrl: this.data.song.coverUrl
      });
    }
    this.setData({
      playing: !this.data.playing
    });
  },
  onPlay: function() {
    this.setData({
      playing: true
    });
  },
  onPause: function() {
    this.setData({
      playing: false
    });
  }
})

页面逻辑主要包括两部分：音乐播放控制和播放状态更新。togglePlay函数用于切换播放状态，如果当前正在播放，则暂停音乐；否则，播放音乐。同时，将音乐的标题、封面和数据源传递给微信小程序的播放器组件。onPlay和onPause函数分别在音乐播放和暂停时更新播放状态。

3. 样式表

.container {
  padding: 20rpx;
}
.music-info {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
}
.cover {
  width: 100rpx;
  height: 100rpx;
  margin-right: 20rpx;
}
.detail {
  flex: 1;
}
.name {
  font-size: 28rpx;
  color: #333333;
  margin-bottom: 10rpx;
}
.artist {
  font-size: 24rpx;
  color: #999999;
}
.play-btn {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  background-color: #FFDC4B;
  display: flex;
  justify-content: center;
  align-items: center;
}
.play-icon {
  width: 40rpx;
  height: 40rpx;
}

样式表用于设置页面的布局和样式，主要包括容器、音乐信息展示区、播放按钮等元素的样式设置。