总结在写音乐小程序中出现的知识点以及思路

在微信小程序中初始化的数据要写在data里，渲染在页面上的数据也要写到data里，将展示在页面的信息写到一个数组里

play: { // 当前播放歌曲的信息
      currentTime: '00:00', // 当前播放时间
      duration: '00:00', // 歌曲总时长
      percent: 0, // 当前播放进度
      title: '',
      singer: '',
      coverImageUrl: '/images/bfzy.png'
    }

页面引用的话应这样使用{{play.imgurl}}
用wx:if来控制状态的显示，状态设置初始值要写在data里，state:paused来判断页面中应该显示的状态，两个中显示一个

<!-- 播放或暂停 -->
    <image wx:if="{{state=='paused'}}" src="/images/02.png" bindtap="play"></image>
    <image wx:else src="/images/02stop.png" bindtap="pause"></image>

在这两个组件中绑定不同的函数bingtap=""来判断audioCtx:null，控制音乐播放的对象，需要设置在onready中，以实现加载页面时获取的对象，那么初始化应放在data外面

 // 页面初次渲染完成时监听加载
  onReady: function () {
    // 获取微信提供的音乐控制对象实例
    this.audioCtx = wx.createInnerAudioContext();
    // 播放失败检测， 回调函数就是一个函数写到另一个参数里面，在回调函数中this的指向改变了，指向了全局window，有两种解决方法：
    // 1. 把回调函数function改为箭头函数 =>。
    // 2. 在调用this前，先把this的指向保存在某个局部变量中，如 var _this=this
    var _this = this;
    this.audioCtx.onError(function (error) {
      console.log('播放失败' + _this.audioCtx.src)
    })
    // 以下为第1种写法：
    // this.audioCtxwx.onError((error) => {
    //   console.log('播放失败' + this.audioCtx.src)
    // })

    // 监听播放完成自动换下一曲
    this.audioCtx.onEnded(function () {
      _this.next();
    })

    // 自动更新播放进度
    // 播放器就绪
    this.audioCtx.onPlay(function () {});
    // 更新进度
    this.audioCtx.onTimeUpdate(function () {
      _this.setData({
        'play.duration': formatTime(_this.audioCtx.duration), // 设置歌曲总时长，时间是毫秒级，必须格式化
        'play.currentTime': formatTime(_this.audioCtx.currentTime), // 设置歌曲当前播放时长
        'play.percent': _this.audioCtx.currentTime / _this.audioCtx.duration * 100
      })
    })

    this.setMusic(0) // 播放哪一条，默认选择第一个歌曲
//格式化日期的格式，以后可以专门写在util里统一使用
    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);
    }
  },

初始化中的数据

playlist:[{     // 播放列表数据
       id: 1,
      title:'不分昼夜',
     singer:'易烊千玺',
      src: 'http://127.0.0.1:3000/不分昼夜.mp3',
     coverImageUrl: '/images/bfzy.png'
     },{
     id: 2,
      title:'Always',
       singer:'Gavin James&Alan Walker',
       src: 'http://127.0.0.1:3000/Always.mp3',
       coverImageUrl: '/images/Always.png'
   }

设置当前播放音乐 setMusic: function (index){}，然后把播放的序号传给微信提供的音乐控制对象的实例，播放的歌曲的内容都在初始化中playlist中获取，为搭建后台服务器时，可先放在data数据里，如果已搭建后台服务器应放在后台服务器传过来，在这个函数中var music = this.data.playlist[index];从data数据里获取的对象存起来赋值给music，this.audioCtx.src 当前控制这个播放对象的地址this.audioCtx.src = music.src;设置待播放的音乐资源路径，确定了哪首播放资源的路径，要把第一首的信息设置好，如果data数据里这样设置可以直接在这里去写playIndex: index,但是在data数据中以数组形式，取出data的数据时就要这样获取'play.title':music.title

  this.setData({
      playIndex: index,
      'play.currentTime': '00:00', // 当前播放时间
      'play.duration': '00:00', // 歌曲总时长
      'play.percent': 0, // 当前播放进度
      'play.title': music.title,
      'play.singer': music.singer,
      'play.coverImageUrl': music.coverImageUrl
    })

在之前wx:if里有两个判断显示用哪个图片的问题绑定的函数play，this.audioCtx.play();播放这个音乐，.play 这个是微信提供的自带函数play（突然想到这个可以运用到登录状态的不同显示的页面不同）

play: function () {
    this.audioCtx.play();
    //用户点了播放设置状态，改变wx:if显示的图片
    this.setData({
      state: 'running'
    })
  }

关于swiper的使用，通过改变当前滑动的页面控制，先给view组件设置相同的绑定事件 bindtap="changeItem"用来区分不同的点击设置data-item="0"/"1"来区分，一个view组件赋值一个，data后面的item可以自己设置名称

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

在判断滑动页时，应显示哪一个呢，在swiper这个组件里用current来区分，其中item用绑定的函数来决定，选中哪一个，隐藏其他的

<view class="content">
  <!-- 滑动页 -->
  <swiper current="{{item}}" bindchange="changeTab">
    <swiper-item>
      <include wx:if="{{showFlag==0}}" src="info.wxml" />
      <!-- 显示云音乐新歌榜 -->
      <include wx:if="{{showFlag==3}}" src="newlist.wxml" />
    </swiper-item>
    <swiper-item>
      <include src="play.wxml" />
    </swiper-item>
    <swiper-item>
      <include src="playlist.wxml" />
    </swiper-item>
  </swiper>
</view>

初始化data里的数据，item:0，标签页标题栏的点击事件处理函数changeItem: function (e) {},如果选中播放器，那么就会将播放器所在的组件中data-item所设置的内容传进来，那么就会得到1，接收传过来的值，然后再复制给item，item: e.currentTarget.dataset.item，这时赋值给item=1，那么swiper组件中current{{item}}传过来的值为1，则显示播放器页面序号与你的页面是同步的，swiper有一个绑定事件，bindchange="changeTab"，当current改变时，会触发change事件滑动的bindchange事件处理函数，获取当前显示的页面索引号，这个bindchange是swiper组件自带的，那么这个传参时可直接通过e.detail.current来获取

// 滑块的bindChange事件处理函数，获取当前显示的页面索引号
  changeTab: function (e) {
  //如果不知道可通过打印来确定
    // console.log(e.detail)
    this.setData({
    //用前先初始化tab
      tab: e.detail.current
    })
  }

class="tab-item {{tab==0?'active':''}}"如果tab=0样式变为active，不是的什么也不操作，保持原来的样式，设置的样式的写法.tab-item.active{样式}
在写playlist这个播放列表页面中应该会用到怎么播放一首歌就添加到到这个列表中的呢？wx:for循环遍历Js文件中的数组playlist，遍历项为item， wx:key取一个唯一属性值作为循环遍历的key，防止遍历重复项，index：列表的索引号，自带属性值，不需要在data中定义

<view class="playlist-item" wx:for="{{playlist}}" wx:key="id" bindtap="change" data-index="{{index}}">
		<image class="playlist-cover" src="{{item.coverImageUrl}}" />
		<view class="playlist-info">
			<view class="playlist-info-title">{{item.title}}</view>
			<view class="playlist-info-singer">{{item.singer}}</view>
		</view>
	</view>

可以使用这种循环实现对添加歌曲的列表信息的添加