文章目录

• 一、学习目标
• • • 1、掌握swiper组件、scroll-view组件的使用
    • 2、掌握image组件的使用
    • 3、掌握音频API的使用
    • 4、掌握slider组件的使用
• 二、开发前的准备
• • • 1、页面结构图
    • 2、项目初始化
    • 3、 任务分析
    • 4、 前导知识
• 三、标签页切换
• • • 1、页面和样式：
    • 2、音乐小程序基础页面和样式：
    • 3、页面和样式tab导航的样式：
    • 4、测试页面info.wxml、page.wxml、play.wxml文件：
    • 5、通过滚动时间切换页面效果
    • • （一）滚动事件
      • （二）通过滚动事件切换页面效果：
• 四、音乐推荐
• • • • 1、scroll-view组件的属性及说明：
    • 2、image组件缩放模式和裁剪模式测试：
    • • （一）scroll-view组件：
    • 3、swiper组件实现轮播图：
    • 4、flex布局实现功能按钮：
    • • （一）flex布局实现功能按钮：
      • （二）flex布局实现页面布局：
      • 5、index页面底部播放
• 五、播放器
• • • 1、audioctx对象声明的方式：
    • • （一）innerAudioContext案例使用：
      • （二）slider组件的使用：
      • （三）音乐播放列表和音乐状态数据：
      • （四）实现音乐播放功能
      • （五）底部播放器的结构代码：
      • （六）底部播放器暂停/播放按钮控制歌曲：
      • (七）实现播放器切换下一曲歌曲：
      • （八）播放器页面结构代码：
• 六、播放器
• • 1、播放器样式1
  • 2、通过CSS3动画实现海报的旋转功能：
  • 3、播放器页面下方的滑块结构：
  • 3、显示音乐的播放进度：
  • 4、控制进度条的长度控制歌曲播放进度：
• 七、播放列表
• • 1、控制进度条的长度控制歌曲播放进度：
  • 2、实现换曲功能：

一、学习目标

1、掌握swiper组件、scroll-view组件的使用

2、掌握image组件的使用

3、掌握音频api的使用

4、掌握slider组件的使用

二、开发前的准备

音乐小程序项目效果展示：

1、页面结构图

tab导航栏
content内容区
player音乐播放控件

2、项目初始化

开发者工具创建空白项目：

{"pages:["pages/index/index"]}

“navigationBarBackgroudColor”:"#fff,
“navigationBartitletext”:“音乐,”
“navigationBarBackgroudColor”:“black”,

3、 任务分析

标签页和页面info.wxml、play.wxml、palylist.wxml

4、 前导知识

swiper组件编写滑动页面结构

012

swiper组件编写滑动页面结构index.wxml:

< swiper-item item-id="a">         

swiper组件编写滑动页面结构index.wxss：

image{width：100%;}

include主要用途：
1、将代码拆分到多个文件中，可以更方便地查找代码。
2、将代码公共部分抽取出来。通过外部文件引入。

三、标签页切换

1、页面和样式：

音乐推荐

2、音乐小程序基础页面和样式：

音乐推荐< /view>{tab== 1? actie':"}}" bindtap=”changeItem”data-item="1" >播放器< /view>{tab== 2? actie':"}}" bindtap=”changeItem”data-item= "2" >播放列表< /view>< /view>

页面和样式：

3、页面和样式tab导航的样式：

tab导航效果：

4、测试页面info.wxml、page.wxml、play.wxml文件：

 play  info< /view> playlist

实现标签页切换
单击导航栏选项卡实现标签页切换：

音乐推荐< /view>changeltem: function(e) {this.setData({item: e.target.dataset.item,tab:e.target.dataset.item}},

标签页切换样式

.tab -item.active {color: #c25b5b;border- bottom-color: #c25b5b;

5、通过滚动时间切换页面效果

< swiper current= "{item}" bindchange="changeTab"> < swiper- item> < swiper- item> < swiper- item> 

（一）滚动事件

change Tab: function(e) {this.setData({tab: e.detail.current.tab-item.active {color: #c25b5b;border- bottom-color: #c25b5b;}

（二）通过滚动事件切换页面效果：

四、音乐推荐

1、scroll-view组件的属性及说明：

< scroll-view scroll-x scroll-y style="height:200px" bindscroll- "scroll"> scroll: function(e) {console.log(e.detail)},

2、image组件缩放模式和裁剪模式测试：

内容区域滚动

（一）scroll-view组件：

< scroll-view class= "content-info" scroll-y> 已到达底部< /view>< /scroll-view>

3、swiper组件实现轮播图：

4、flex布局实现功能按钮：

                私人FM    

（一）flex布局实现功能按钮：

.content-info-portal {  display: flex;  margin-bottom: 15px;}.content-info-portal > view {  flex: 1;  font-size: 11pt;  text-align: center;}.content-info-portal image {  width: 120rpx;  height: 120rpx;  display: block;  margin: 20rpx auto;}

（二）flex布局实现页面布局：

      推荐歌曲                          紫罗兰      

热门音乐

.content-info-list > .list-inner > .list-item {  flex: 1;}.content-info-list > .list-inner > .list-item > image {  display: block;  width: 200rpx;  height: 200rpx;  margin: 0 auto;  border-radius: 10rpx;  border: 1rpx solid #555;}.content-info-list > .list-inner > .list-item > view {  width: 200rpx;  margin: 10rpx auto;  font-size: 10pt;}

5、index页面底部播放

        {{play.title}}    {{play.singer}}                                  

.player {  display: flex;  align-items: center;  background: #222;  border-top: 1px solid #252525;  height: 112rpx;}.player-cover {  width: 80rpx;  height: 80rpx;  margin-left: 15rpx;  border-radius: 8rpx;  border: 1px solid #333;}

.player-info {  flex: 1;  font-size: 10pt;  line-height: 38rpx;  margin-left: 20rpx;  padding-bottom: 8rpx;}.player-info-singer {  color: #888;}.player-controls image {  width: 80rpx;  height: 80rpx;  margin-right: 15rpx;}

五、播放器

1、audioctx对象声明的方式：

var  audioctx = wx.createInnerAudioContext();

（一）innerAudioContext案例使用：

onReady: function() {var audioCtx = wx.createInnerAudioContext(audioCtx.src = htt.:/....x.o.audioCtx.onPlay(function() {console.log('开始播放')})...},

（二）slider组件的使用：

sliderChanging:function(e){console.log(e.detail.value)},

（三）音乐播放列表和音乐状态数据：

   playlist: [{      id: 1,      title: '钢琴协奏曲',      singer: '肖邦',      src: 'Http://localhost:3000/1.mp3',      coverImgUrl: '/images/cover.jpg'    },

（四）实现音乐播放功能

音乐播放逻辑代码：

 audioCtx: null,  onReady: function() {    this.audioCtx = wx.createInnerAudioContext()    // 默认选择第1曲    this.setMusic(0)    var that = this    // 播放进度检测    this.audioCtx.onError(function() {      console.log('播放失败：' + that.audioCtx.src)    })    // 播放完成自动换下一曲    this.audioCtx.onEnded(function() {      that.next()    })    // 自动更新播放进度    this.audioCtx.onPlay(function() {})    this.audioCtx.onTimeUpdate(function() {      that.setData({        'play.duration': fORMatTime(that.audioCtx.duration),        'play.currentTime': formatTime(that.audioCtx.currentTime),        'play.percent': that.audioCtx.currentTime / that.audioCtx.duration * 100      })    })    // 格式化时间    function formatTime(time) {      var minute = Math.floor(time / 60) % 60;      var second = Math.floor(time) % 60      return (minute < 10 ? '0' + minute : minute) + ':' + (second < 10 ? '0' + second : second)    }  },  // 音乐播放  setMusic: function(index) {    var music = this.data.playlist[index]    this.audioCtx.src = music.src    this.setData({      playIndex: index,      'play.title': music.title,      'play.singer': music.singer,      'play.coverImgUrl': music.coverImgUrl,      'play.currentTime': '00:00',      'play.duration': '00:00',      'play.percent': 0    })  },

（五）底部播放器的结构代码：

        {{play.title}}    {{play.singer}}  

底部播放器的样式代码：

.player {  display: flex;  align-items: center;  background: #222;  border-top: 1px solid #252525;  height: 112rpx;}

（六）底部播放器暂停/播放按钮控制歌曲：

(七）实现播放器切换下一曲歌曲：

 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()    }  },

（八）播放器页面结构代码：

        {{play.title}}    —— {{play.singer}} ——  

六、播放器

        {{play.title}}    —— {{play.singer}} ——                    {{play.currentTime}}                  {{play.duration}}  

1、播放器样式1

.content-play {  display: flex;  justify-content: space-around;  flex-direction: column;  height: 100%;  text-align: center;}.content-play-info > view {  color: #888;  font-size: 11pt;}

2、通过css3动画实现海报的旋转功能：

3、播放器页面下方的滑块结构：

3、显示音乐的播放进度：

  onReady: function() {    this.audioCtx = wx.createInnerAudioContext()    // 默认选择第1曲    this.setMusic(0)    var that = this    // 播放进度检测    this.audioCtx.onError(function() {      console.log('播放失败：' + that.audioCtx.src)    })    // 播放完成自动换下一曲    this.audioCtx.onEnded(function() {      that.next()    })

4、控制进度条的长度控制歌曲播放进度：

< sliderbindchange= "sliderChange"activeColor= " #d33a31 block- size=”12"backgroundColor= " #dadada"value= "{{play.percent}}" />

sliderChange: function(e) {var second = e.detail.value*this.audioCtx.duration / 100this.audioCtx.seek(second)},

控制进度条的长度控制歌曲播放进度：

                {{item.title}}      {{item.singer}}              正在播放      

七、播放列表

1、控制进度条的长度控制歌曲播放进度：

.playlist-item {display: flex;align-items:center;border- bottom: 1rpx solid #333;height: 112rpx;}...

2、实现换曲功能：

change:function(e){this.setMusic(e.currentTarget.dateset.index)this.play()},

来源地址：https://blog.csdn.net/py20010218/article/details/128263602