找回密码
 立即注册

QQ登录

只需一步,快速开始

微信小程序开发资源

关注:1354

所属分类: 微信开发 微信小程序开发资源

本版块为微信小程序资源分享版块,包括微信小程序开发中可能会用到的各类小程序开发工具、小程序demo及开发教程等。

快捷导航www.henkuai.com):微信小程序开发者社区微信小程序开发问答微信小程序开发交流群

[最新文章] 微信小程序小白项目开发案例之音乐播放器—音乐播放页

[复制链接]
查看: 609|回复: 0
最佳答案
1 

17

主题

21

帖子

825

积分

专家路上

积分
825
 楼主| 发表于 2017-2-17 16:41:25 | 显示全部楼层 |阅读模式
本帖最后由 peoples 于 2017-2-17 16:46 编辑

音乐播放页

最后我们完成音乐播放页面,在前文的基础上这部分的逻辑代码很好完成,我们将重点放在页面布局上,先看下我们希望达到的效果
656.png

这个页面分为3个部分:顶部信息栏(歌曲名/专辑名),中间的唱片图,以及底下的控制按钮。
首先是信息栏:
  1. <view class="song-info">
  2.       <text class="song-title">{{playingMusic.name}}</text>
  3.       <text class="song-subtitle">
  4.         <block wx:for="{{playingMusic.singer}}" wx:key="unique">
  5.           <block wx-if="{{index!=0}}">*</block>{{item.name}}</block>
  6.       </text>
  7.     </view>
复制代码

这部分很简单,与我们前面写过的类似,多个歌手之间用“*”分隔。格式文件为:
  1. .song-info {
  2.     width:100%;
  3.     padding:30rpx;
  4.     box-sizing:border-box;
  5.     text-align:center;
  6. }
  7. .song-title {
  8.     display:block;
  9.     width:100%;
  10.     color:#fff;
  11.     font-size:36rpx;
  12.     line-height:60rpx;
  13.     overflow:hidden;
  14.     white-space:nowrap;
  15.     text-overflow:ellipsis;
  16. }
  17. .song-subtitle {
  18.     display:block;
  19.     width:100%;
  20.     font-size:28rpx;
  21.     line-height:40rpx;
  22.     color:rgba(255,255,255,.6);
  23.     overflow:hidden;
  24.     white-space:nowrap;
  25.     text-overflow:ellipsis;
  26. }
复制代码

然后是中间的图片,这部分我们以动画形式表现,让唱片一直旋转,先看布局文件:
  1. <view class="cd-info">
  2.       <view class="cd-gan"></view>
  3.       <view class="cd-inner cd-animation">
  4.         <image class="cd-img" src="{{playingMusic.img}}"></image>
  5.       </view>
  6.     </view>
  7. “cd-gan”是唱片部分里白色的播放杆部分,“cd-inner”是唱片部分,在这里为它添加表示唱片的黑色背景,然后在里门用小一圈的“cd-img”来加载我们获取的网络图片。最后为整个唱片添加动画“cd-animation”。这些工作全部由格式文件完成。
  8. .cd-info {
  9.   position: relative;
  10.   width: 100%;
  11.   text-align: center;
  12.   padding-top: 120rpx;
  13. }

  14. .cd-gan {
  15.   position: absolute;
  16.   left: 50%;
  17.   margin-top: -80rpx;
  18.   margin-left: -150rpx;
  19.   display: block;
  20.   width: 300rpx;
  21.   height: 200rpx;
  22.   background: url('../../resources/images/cd_g.png');
  23.   background-size: cover;
  24.   z-index: 10;
  25. }

  26. .cd-inner {
  27.   position: relative;
  28.   display: inline-block;
  29.   z-index: 4;
  30.   height: 500rpx;
  31.   width: 500rpx;
  32.   background: url('../../resources/images/cd_b.png');
  33.   background-size: cover;
  34.   text-align: center;
  35.   padding-top: 100rpx;
  36.   box-sizing: border-box;
  37. }

  38. .cd-animation {
  39.   -webkit-animation: circle 10s infinite linear;
  40.   animation: circle 10s infinite linear;
  41. }

  42. .cd-img {
  43.   display: inline-block;
  44.   width: 300rpx;
  45.   height: 300rpx;
  46.   border-radius: 50%;
  47. }

  48. @keyframes circle {
  49.   0% {
  50.     transform: rotate(0deg);
  51.   }

  52.   100% {
  53.     transform: rotate(360deg);
  54.   }
  55. }
复制代码

这里面大多数的代码相信大家已经很熟悉了,重点看一下“cd-animation”这一部分,这里加载了动画“circle”并设置了动画时长与无限循环,这样就实现了在音乐播放时,唱片一直旋转的效果。“circle”动画我们使用关键帧keyframes来实现。

完成这两部分后我们以一个view来包裹它们,确定它在页面的位置。
  1. <view class="main-box">
  2.     <view class="song-info">
  3.       <text class="song-title">{{playingMusic.name}}</text>
  4.       <text class="song-subtitle">
  5.         <block wx:for="{{playingMusic.singer}}" wx:key="unique">
  6.           <block wx-if="{{index!=0}}">*</block>{{item.name}}</block>
  7.       </text>
  8.     </view>
  9.     <view class="cd-info">
  10.       <view class="cd-gan"></view>
  11.       <view class="cd-inner cd-animation">
  12.         <image class="cd-img" src="{{playingMusic.img}}"></image>
  13.       </view>
  14.     </view>
  15.   </view>
  16. .main-box {
  17.   position: absolute;
  18.   top: 0;
  19.   bottom: 308rpx;
  20.   z-index: 3;
  21.   width: 100%;
  22.   background: rgba(0, 0, 0, 0.2);
  23. }
复制代码

接着我们完成底下的操作部分。
  1. <view class="ctre-box">
  2.     <view class="slider-box">
  3.       <text class="slider-text st-l">{{currTimeStr}}</text>
  4.       <slider class="slider-inner"></slider>
  5.       <text class="slider-text st-r">{{musicTimeStr}}</text>
  6.     </view>
  7.     <view class="music-ctr">
  8.       <block wx-if="{{playType==0}}">
  9.         <view class="music-sort ms-loop" data-type="{{playType}}" bindtap="changePlayType"></view>
  10.       </block>
  11.       <block wx-if="{{playType==1}}">
  12.         <view class="music-sort ms-shuffle" data-type="{{playType}}" bindtap="changePlayType"></view>
  13.       </block>
  14.       <block wx-if="{{playType==2}}">
  15.         <view class="music-sort ms-one" data-type="{{playType}}" bindtap="changePlayType"></view>
  16.       </block>
  17.       <view class="mc-inner">
  18.         <view class="mci-icon mci-prev"></view>
  19.         <view class="mci-icon mci-play"></view>
  20.         <view class="mci-icon mci-next"></view>
  21.       </view>
  22.       <view class="music-list-btn" bindtap="showPlayList"></view>
  23.     </view>
  24.   </view>
复制代码

操作控制部分由最上边的进度条部分“slider-box”和底下的操作按钮“mucis-ctr”组成。进度条我们使用slider组件,两段用两个text组件来显示当前播放时间与总时长。操作按钮部分,首先是播放模式的按钮,根据playType的值,改变顺序/随机/单曲的播放模式并对应加载不同的图片。然后是3个按钮,分别表示前一首/播放/下一首。最后是显示播放列表的按钮。
格式文件为:
  1. .slider-box {
  2.   box-sizing: border-box;
  3.   padding: 20rpx 130rpx;
  4. }

  5. .slider-text {
  6.   position: absolute;
  7.   display: block;
  8.   width: 100rpx;
  9.   height: 40rpx;
  10.   line-height: 40rpx;
  11.   font-size: 24rpx;
  12.   color: #fff;
  13. }

  14. .st-l {
  15.   left: 60rpx;
  16. }

  17. .st-r {
  18.   top: 20rpx;
  19.   right: 40rpx;
  20.   text-align: right;
  21. }

  22. .slider-inner {
  23.   width: 100%;
  24. }
  25. .ctre-box {
  26.   height: 308rpx;
  27.   position: absolute;
  28.   bottom: 0;
  29.   z-index: 3;
  30.   width: 100%;
  31.   background: rgba(0, 0, 0, 0.2);
  32. }

  33. .music-ctr {
  34.   position: relative;
  35.   padding: 20rpx 120rpx;
  36. }

  37. .music-sort {
  38.   position: absolute;
  39.   left: 20rpx;
  40.   width: 108rpx;
  41.   height: 108rpx;
  42. }

  43. .ms-loop {
  44.   background: url("../../resources/images/play_icn_loop.png");
  45.   background-size: cover;
  46. }

  47. .ms-one {
  48.   background: url("../../resources/images/play_icn_one.png");
  49.   background-size: cover;
  50. }

  51. .ms-shuffle {
  52.   background: url("../../resources/images/play_icn_shuffle.png");
  53.   background-size: cover;
  54. }

  55. .music-list-btn {
  56.   position: absolute;
  57.   top: 36rpx;
  58.   right: 20rpx;
  59.   width: 108rpx;
  60.   height: 108rpx;
  61.   background: url("../../resources/images/play_icn_src.png");
  62.   background-size: cover;
  63. }

  64. .mc-inner {
  65.   text-align: center;
  66. }

  67. .mci-icon {
  68.   display: inline-block;
  69.   width: 142rpx;
  70.   height: 142rpx;
  71. }

  72. .mci-prev {
  73.   background: url("../../resources/images/play_btn_prev.png");
  74.   background-size: cover;
  75. }

  76. .mci-play {
  77.   background: url("../../resources/images/play_btn_play.png");
  78.   background-size: cover;
  79. }

  80. .mci-pause {
  81.   background: url("../../resources/images/play_btn_pause.png");
  82.   background-size: cover;
  83. }

  84. .mci-next {
  85.   background: url("../../resources/images/play_btn_next.png");
  86.   background-size: cover;
  87. }
复制代码

最后写一下播放列表的布局:
  1. <view class="play-list" hidden="{{showPlayList}}">
  2.     <view class="play-list-header">
  3.       <text>播放列表(185)</text>
  4.       <text class="play-list-clear">清空</text>
  5.     </view>
  6.     <view class="play-list-inner">
  7.       <block wx:for="{{playList}}" wx:key="unique">
  8.         <view class="play-item">
  9.           {{item.name}}
  10.         </view>
  11.       </block>
  12.     </view>
  13.     <view class="play-list-bottom" bindtap="closePlayList">关闭</view>
  14.   </view>
复制代码

格式文件为:
  1. .play-list {
  2.   position: absolute;
  3.   top: 20%;
  4.   bottom: 0;
  5.   left: 0;
  6.   width: 100%;
  7.   z-index: 99;
  8.   background: rgba(255, 255, 255, 0.95);   
  9. }

  10. .play-list-header {
  11.   line-height: 88rpx;
  12.   font-size: 32rpx;
  13.   text-align: center;
  14.   border-bottom: 2rpx solid rgba(0, 0, 0, 0.1);
  15. }

  16. .play-list-clear {
  17.   position: absolute;
  18.   right: 30rpx;
  19.   font-size: 28rpx;
  20.   color: rgba(0, 0, 0, 0.6);
  21. }

  22. .play-list-bottom {
  23.   position: absolute;
  24.   width: 100%;
  25.   bottom: 0;
  26.   height: 100rpx;
  27.   line-height: 100rpx;
  28.   text-align: center;
  29.   font-size: 32rpx;
  30.   border-top: 2rpx solid rgba(0, 0, 0, 0.1);
  31. }

  32. .play-list-inner {
  33.   position: absolute;
  34.   top: 90rpx;
  35.   bottom: 102rpx;
  36.   width: 100%;
  37.   overflow-x: hidden;
  38.   overflow-y: auto;
  39.   padding-left: 20rpx;
  40. }

  41. .play-item {
  42.   position: relative;
  43.   widows: 100%;
  44.   box-sizing: border-box;
  45.   padding-right: 90rpx;
  46.   height: 88rpx;
  47.   line-height: 88rpx;
  48.   font-size: 30rpx;
  49.   border-bottom: 2rpx solid rgba(0, 0, 0, 0.1);
  50.   white-space: nowrap;
  51.   overflow: hidden;
  52.   text-overflow: ellipsis;
  53. }
复制代码

这里使用“z-index: 99;background: rgba(255, 255, 255, 0.95);”使播放列表覆盖部分音乐播放页面且背景半透明。

最后我们使用一个view来为整个页面加载背景,这个背景为我们获取的图片加上模糊效果。最后用一个view包裹所有布局。
  1. <view class="play-view">
  2.    ...
  3.    <view class="bg blur" style="background-image:url('{{playingMusic.img}}');"></view>
  4. </view>
复制代码

使用格式文件添加模糊效果:
  1. .paly-view {
  2.   display: block;
  3.   position: relative;
  4.   width: 100%;
  5.   height: 100%;
  6.   overflow: hidden;
  7. }

  8. .blur {
  9.   filter: blur(80rpx);
  10. }

  11. .bg {
  12.   position: absolute;
  13.   left: 0;
  14.   right: 0;
  15.   top: 0;
  16.   bottom: 0;
  17.   background-size: cover;
  18.   background-position: bottom center;
  19. }
复制代码

最后我们加载数据:
  1. var app = getApp()

  2. Page({
  3.     data: {
  4.         playList: [],
  5.         playIndex: 0,
  6.         showPlayList: true,
  7.         playingMusic: {},
  8.         musicTime: 0,
  9.         currTime: 0,
  10.         musicTimeStr: 0,
  11.         currTimeStr: 0,
  12.         isPlay: false,
  13.         playInv: 0,
  14.         playPro: '',
  15.         playType: 1
  16.     },
  17.     onLoad: function (options) {
  18.         // 页面初始化 options为页面跳转所带来的参数
  19.         var self = this;
  20.         var list = app.globalData.playList;
  21.         var playingMusic = null;
  22.         if (list.length) {
  23.             var index = app.globalData.playIndex;
  24.             index = (list.length - 1 < index) ? list.length - 1 : index;
  25.             playingMusic = list[index];
  26.             this.setData({
  27.                 playList: list,
  28.                 playIndex: index,
  29.                 playingMusic: playingMusic
  30.             });
  31.         }
  32.         wx.playBackgroundAudio({
  33.             dataUrl: list[index].url,
  34.             title: list[index].title,
  35.             coverImgUrl: list[index].img,
  36.             success: function () {
  37.             },
  38.             fail: function () {
  39.                 console.log('播放失败!');
  40.             }
  41.         });
  42.     },
  43.     changePlayType: function (e) {
  44.         var dataSet = e.currentTarget.dataset;
  45.         if (dataSet.type == 1) {
  46.             this.setData({
  47.                 playType: 2
  48.             });
  49.         }
  50.         if (dataSet.type == 2) {
  51.             this.setData({
  52.                 playType: 0
  53.             });
  54.         }
  55.         if (dataSet.type == 0) {
  56.             this.setData({
  57.                 playType: 1
  58.             });
  59.         }
  60.     },
  61.     closePlayList: function (e) {
  62.         this.setData({
  63.             showPlayList: true
  64.         })
  65.     },
  66.     showPlayList: function (e) {
  67.         this.setData({
  68.             showPlayList: false
  69.         })
  70.     },
  71.     //三个按钮的点击事件
  72.     pauseMusic: function () {
  73.     },
  74.     playNextMusic: function () {
  75.     },
  76.     playPreMusic:function(){
  77.     },
  78. })
复制代码

上一节:微信小程序小白项目开发案例之音乐播放器-完成相似页面
下一节:微信小程序小白项目开发案例之音乐播放器-总结


回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则


易域网-您身边的域名管家

henkuai.com是专业的第三方微信开发者平台,为生态而生。


本站为第三方微信开发者平台,非腾讯官方网站。

天津市滨海新区
中新生态城中成大道生态建设公寓9号楼3层301

欢迎来这里一起喝喝茶,
聊聊你的产品。

微信公众号gongzhongkaifa

工作日12小时内回复。

网站业务
zhongcong@henkuai.com

工作日12小时内回复。

市场合作
songchang@henkuai.com