小程序笔记（4） 假的要死的网易云

小程序笔记（4） 假的要死的网易云

1.效果图功能介绍及效果图

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dd94JDrv-1602318873716)(https://i.loli.net/2020/10/10/8duAstHxrhS6y2E.png)]

• 整体采用弹性布局
  • 导航狼儿
  • 轮播图狼儿
  • 控制音乐的狼儿
• 没了看代码吧！！！

2.代码

• index.js

const app = getApp()
const audioCtx = wx.createInnerAudioContext();
Page({
  onReady: function (e) {
    /* 自动播放 */
    // audioCtx.autoplay = true;
    /* 播放的回调函数 */
    audioCtx.onPlay(() => {
      console.log('开始播放');
    })

    /* 播放失败回调函数 */
    audioCtx.onError((res) => {
      console.log(res.errMsg);
      console.log(res.errCode);
    });

    /* 播放第一首歌 */
    this.setMusiceIndex(0);
  },
  /* 数据集 */
  data: {
    /* 导航页面id */
    current: 1,
    /* 正在播放歌曲的图片 */
    playImgPath: "https://img2.kuwo.cn/star/albumcover/500/75/21/2168760169.jpg",
    /* 正在播放歌曲的名称 */
    playMusicName: "",
    /* 正在播放歌曲的歌手名称 */
    playSingerName: "",
    /* 播放状态，根据这个来改变按钮样式 */
    playState: "play",
    /* 正在播放歌曲的索引 */
    playIndex: 0,
    /* 歌曲的列表 */
    playlist: [{
      /* 歌曲对应的id */
      id: 0,
      /* 歌曲名称 */
      title: '最美的光',
      /* 歌手 */
      singer: '尚琪祺',
      /* 资源地址 */
      src: 'http://music.163.com/song/media/outer/url?id=27908100.mp3',
      /* 图片地址 */
      coverImgUrl: 'https://y.gtimg.cn/music/photo_new/T002R300x300M000002UVhvw0piHPf_5.jpg?max_age=2592000'
    }, {
      id: 1,
      title: '飞鸟和蝉',
      singer: '任然',
      src: 'https://eu-sycdn.kuwo.cn/43c207954647fd8cc431101948394036/5f8162f1/resource/n1/95/95/1309381206.mp3',
      coverImgUrl: 'https://img2.kuwo.cn/star/albumcover/500/87/25/2241738210.jpg'
    }, {
      id: 2,
      title: '成都',
      singer: '赵雷',
      src: 'http://music.163.com/song/media/outer/url?id=436514312.mp3',
      coverImgUrl: 'https://img1.kuwo.cn/star/albumcover/500/4/61/2896965973.jpg'
    }]

  },
  /* 点击导航栏 */
  clickTab: function (e) {
    this.setData({
      current: e.currentTarget.dataset.index
    })
  },

  /* 手动划一下屏幕，触发导航栏改变 */
  swiperChange: function (e) {
    this.setData({
      current: e.detail.current
    })
  },

  /* 点击播放和暂停按钮 */
  playChange: function (e) {
    let state = this.data.playState;
    if (state == "play") {
      state = "stop";
      audioCtx.pause();
    } else {
      state = "play";
      audioCtx.play();
    }
    // 设置播放的状态
    this.setData({
      playState: state
    })
  },

  /* 点击播放列表中的项 */
  clickMusicList: function (e) {
    let index = e.currentTarget.dataset.index;
    this.setData({
      playIndex: index,
      playState: "play"
    });
    this.setMusiceIndex(index);
  },

  /* 设置当前歌曲 */
  setMusiceIndex(e) {
    let src = this.data.playlist[e].src;
    let musicName = this.data.playlist[e].title;
    let singer = this.data.playlist[e].singer;
    let playImgPath = this.data.playlist[e].coverImgUrl;
    console.log("播放" + musicName);
    audioCtx.src = src;
    this.setData({
      playIndex: e,
      playMusicName: musicName,
      playSingerName: singer,
      playImgPath: playImgPath
    });
    audioCtx.play();
  },

  /* 下一首歌 */
  nextMusic: function (e) {
    let nextIndex = this.data.playIndex + 1;
    if (nextIndex == this.data.playlist.length) {
      nextIndex = 0;
    }
    this.setMusiceIndex(nextIndex);

  }

})

• index.wxml

<view class="containter">
	<view class="tab">
		<view class="{{current==0?'select':'default'}}" data-index="0" bindtap="clickTab">音乐推荐</view>
		<view class="{{current==1?'select':'default'}}" data-index="1" bindtap="clickTab">播放器</view>
		<view class="{{current==2?'select':'default'}}" data-index="2" bindtap="clickTab">播放列表</view>
	</view>

	<swiper class="content" current="{{current}}" bindchange="swiperChange">
		<swiper-item>
			<!-- 引入外部文件 -->
			<include src="recommend.wxml" />
		</swiper-item>
		<swiper-item>
			<!-- 引入外部播放页面文件 -->
			<include src="playerPage.wxml" />
		</swiper-item>
		<swiper-item>
			<include src="playlist.wxml" />
		</swiper-item>
	</swiper>

	<view class="player">
		<view class="playerLeft">
			<image mode="widthFix" class="playerImg" src="{{playImgPath}}" data-index="1" bindtap="clickTab"></image>
			<view class="title">
				<view class="playMusicName">{{playMusicName}}</view>
				<view class="playSingerName">{{playSingerName}}</view>
			</view>
		</view>
		<view class="playerRight">
			<image mode="widthFix" src="../../img/list.png" data-index="2" bindtap="clickTab" ></image>
			<image mode="widthFix" src="../../img/{{playState=='play'?'stop':'play'}}.png" bindtap="playChange"></image>
			<image mode="widthFix" src="../../img/next.png" bindtap="nextMusic"></image>
		</view>

	</view>
</view>

• index.wss

page {
  width: 100%;
  height: 100%;
}

.containter {
  display: flex;
  flex-direction: column;

  height: 100%;
  background-color: #16181c;
}

.tab {
  flex: 1.5;
  display: flex;
  height: 80rpx;
}

.select {
  display: flex;
  flex: 1;
  justify-content: center;
  align-items: center;
  color: red;
  border-bottom: 1px solid red;
}

.default {
  display: flex;
  color: #fff;
  flex: 1;
  justify-content: center;
  align-items: center;

  border-bottom: 1px solid #ffffff;
}

.content {
  flex: 14;
}


/* 底部播放控制样式 */
.player {
  display: flex;
  background-color: #232326;
  justify-content: space-between;
  align-items: center;
  flex: 2;
}

.playerImg {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 20rpx;
  width: 100rpx;
}

.playerLeft {
  display: flex;

}

.playMusicName {
  margin-top: 20rpx;
  color: #e2e2e2;
}

.playSingerName {
  color: #666666;
  font-size: 30rpx;
}

.playerRight {
  display: flex;
}

.playerRight>image {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 20rpx;
  width: 55rpx;
}


/* 音乐列表 */
.musicList {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.musicItem {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1rpx solid #525252;
  width: 100%;
  height: 50rxp;
}

.playState {
  color: red;
  margin: 20rpx;
}





/* 播放器页面 */
.playPageContainer{
  display: flex;
  height: 100%;
  flex: 1;
  justify-content: center;
  align-items: center;
  color: #fff;
  
}
.playPageTitle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex: 1;
}

• playlist.wxml

<view class="musiceList">
	<scroll-view scroll-y="true" enable-flex="true" style="height: 1000rpx;">

		<view class="musicItem" wx:for="{{playlist}}" wx:key="*this" bindtap="clickMusicList" data-index="{{item.id}}">
			<view class="playerLeft">
				<image class="playerImg" mode="widthFix" src="{{item.coverImgUrl}}"></image>
				<view class="title">
					<view class="playMusicName">{{item.title}}</view>
					<view class="playSingerName">{{item.singer}}</view>
				</view>

			</view>
			<view wx:if="{{playIndex==item.id}}" class="playerRight">
				<view class="playState">
					正在播放
				</view>
			</view>
		</view>



	</scroll-view>

</view>

• playerPage.wxml

<view class="playPageContainer">
	<view class="playPageTitle">正在播放歌曲名称：{{playMusicName}}</view>
	<view class=""></view>
	<view></view>
</view>

3.图标