Implementado en el subprograma WeChat——【Reproductor de música】

1. Objetivos de aprendizaje

1. Domine el uso de componentes de deslizamiento y componentes de vista de desplazamiento

2. Domina el uso de los componentes de la imagen

3. Domina el uso de la API de audio

4. Domina el uso de componentes deslizantes

2. Preparación antes del desarrollo

Visualización del efecto del proyecto del applet de música:

1. Diagrama de estructura de la página

pestaña barra de navegación
contenido área de contenido
jugador control de reproducción de música

2. Inicialización del proyecto

Las herramientas de desarrollo crean un proyecto en blanco:

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

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

3. Análisis de tareas

Pestañas y páginas info.wxml, play.wxml, palylist.wxml

4. Conocimientos preliminares

El componente swiper escribe la estructura de la página deslizante

<swiper>
<swiper-item style="background:#ccc">0</swiper-item>
<swiper-item style="background:#ddd">1</swiper-item>
<swiper-item style="background:#eee">2</swiper-item>
</swiper-item>

El componente swiper escribe la estructura de página deslizante index.wxml:

<swiper current-item-id="c">
< swiper-item item-id="a"> <image
src= "https://assets.lexus.com.cn/images/index/kv/2880x1480. newes. 1.jpg?x-Oss-
process=image/resize,w. 1898/quality.q. 80" mode= "widthFix" > </image> </swiper-item>
<swiper-item item-id="b"> <image src= https://assets.exus.com.cn/images/models/s/s -kv-1 2880.jpg?x-oss-
process=image/resize,w. 1898/quality.q. 80" mode= "widthFix" > </image> </swiper-item>
<swiper-item item-id="c"> <image src="https://assets.lexus.com.cn/images/index/kv/ux. 300e-kv-1-2880.jpg?x-
oss-process= image/resize,w 1898/quality,q 80" mode="widthFix"> </image> </swiper-item>
</swiper>

El componente swiper escribe la estructura de página deslizante index.wxss:

image{
width：100%;
}

El objetivo principal de incluir:
1. Dividir el código en varios archivos, lo que facilita encontrar el código.
2. Extraiga la parte común del código. Introducido a través de archivos externos.

<include src="header.wxml />
<view>body</view>
<include src="footer.wxml " />

3. Cambio de pestaña

1. Página y estilo:

<view class="tab>
<view class="tab-item">音乐推荐</view>
</view>
<!---内容区域--->
<view class="content"></view>
<!---底部播放器--->
<view class="player"></view>

2. La página básica y el estilo del applet de música:

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

Páginas y estilos:

3. El estilo de navegación de la pestaña de estilo y página:

Efecto de navegación de pestañas:

4. Pruebe los archivos info.wxml, page.wxml, play.wxml de la página:

<view style= "background:#ddd; color:#000; h
eight:100%"> play </view>
<view style= "background:#ccc; color:#000; he
ight:100%" > info< /view>
<view style= "background:#eee; color:#00O; he
ight:100%" > playlist</view>

Realice el cambio de página de pestañas
Haga clic en la pestaña de la barra de navegación para realizar el cambio de página de pestañas:

<view class="tab-item {
   
   {tab==0?'a
ctive':'}}"
bindtap=" changeltem" data-item
="0">
音乐推荐< /view>
changeltem: function(e) {
this.setData({
item: e.target.dataset.item,
tab:e.target.dataset.item
}},

Estilo de cambio de pestaña

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

5. Cambia los efectos de página desplazando el tiempo

< swiper current= "{item}" bindchange="c
hangeTab"> 
< swiper- item>
<include src = ../index/info" > </include>
</swiper-item>
< swiper- item>
<include src= ../index/play" > </include>
</swiper-item>
< swiper- item>
<include src=”./index/playlist" > </include>
</swiper-item>
</swiper>

(1) Evento de desplazamiento

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

(2) Cambiar efectos de página a través de eventos de desplazamiento:

4. Recomendación musical

1. Propiedades y descripción del componente de vista de desplazamiento:

< scroll-view scroll-x scroll-y style="hei
ght:200px" bindscroll- "scroll">
<view style ="width:200%;height:400p
x;background:#ccc" > </view>
</scroll-view>
scroll: function(e) {
console.log(e.detail)
},

2. Modo de escalado de componentes de imagen y prueba de modo de recorte:

desplazamiento del área de contenido

(1) componente de vista de desplazamiento:

< scroll-view class= "content-info" scroll-y>
<view style= "background:#eee;height:10
00px" > </view>
<view>已到达底部< /view>
< /scroll-view>

3. El componente swiper realiza el mapa de carrusel:

<swiper class="content-info-slide" indicator-color="rgba(255,255,255,.5)" indicator-active-color="#fff" indicator-dots circular autoplay>
    <swiper-item>
      <image src="/images/banner.jpg" />
    </swiper-item>
    <swiper-item>
      <image src="/images/banner.jpg" />
    </swiper-item>
    <swiper-item>
      <image src="/images/banner.jpg" />
    </swiper-item>
  </swiper>

4. El diseño flexible implementa botones de función:

<view class="content-info-portal">
    <view>
      <image src="/images/04.png" />
      <text>私人FM</text>
    </view>

(1) El diseño flexible realiza botones de función:

.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;
}

(2) El diseño flexible realiza el diseño de la página:

  <view class="content-info-list">
    <view class="list-title">推荐歌曲</view>
    <view class="list-inner">
      <view class="list-item">
        <image src="/images/cover.jpg" />
        <view>紫罗兰</view>
      </view>

golpear la musica

.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. Juega en la parte inferior de la página de índice

<!-- 底部播放器 -->
<view class="player">
  <image class="player-cover" src="{
   
   {play.coverImgUrl}}" />
  <view class="player-info">
    <view class="player-info-title">{
   
   {play.title}}</view>
    <view class="player-info-singer">{
   
   {play.singer}}</view>
  </view>
  <view class="player-controls">
    <!-- 切换到播放列表 -->
    <image src="/images/01.png" bindtap="changePage" data-page="2" />
    <!-- 播放或暂停 -->
    <image wx:if="{
   
   {state=='paused'}}" src="/images/02.png" bindtap="play" />
    <image wx:else src="/images/02stop.png" bindtap="pause" />
    <!-- 下一曲 -->
    <image src="/images/03.png" bindtap="next" />
  </view>
</view>

.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;
}

5. jugador

1. La forma de declaración del objeto audioctx:

var  audioctx = wx.createInnerAudioContext();

(1) Uso del caso InnerAudioContext:

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

(2) Uso del componente deslizante:

<slider bindchanging = "sliderChangeing" show-value />
sliderChanging:function(e){
console.log(e.detail.value)
},

(3) Lista de reproducción de música y datos de estado de la música:

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

(4) realizar la función de reproducción de música

Código lógico de reproducción de música:

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

(5) El código estructural del jugador inferior:

<!-- 底部播放器 -->
<view class="player">
  <image class="player-cover" src="{
   
   {play.coverImgUrl}}" />
  <view class="player-info">
    <view class="player-info-title">{
   
   {play.title}}</view>
    <view class="player-info-singer">{
   
   {play.singer}}</view>
  </view>

Código de estilo para el jugador inferior:

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

(6) El botón de pausa/reproducción del reproductor inferior controla la canción:

   <image wx:if="{
   
   {state=='paused'}}" src="/images/02.png" bindtap="play" />
    <image wx:else src="/images/02stop.png" bindtap="pause" />

(7) Date cuenta de que el jugador cambia a la siguiente canción:

    <image src="/images/03.png" bindtap="next" />

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

(8) Código de estructura de la página del jugador:

<view class="content-play">
  <!-- 显示音乐信息 -->
  <view class="content-play-info">
    <text>{
   
   {play.title}}</text>
    <view>—— {
   
   {play.singer}} ——</view>
  </view>

6. Jugador

<!-- 播放器 -->
<view class="content-play">
  <!-- 显示音乐信息 -->
  <view class="content-play-info">
    <text>{
   
   {play.title}}</text>
    <view>—— {
   
   {play.singer}} ——</view>
  </view>
  <!-- 显示专辑封面 -->
  <view class="content-play-cover">
    <image src="{
   
   {play.coverImgUrl}}" style="animation-play-state:{
   
   {state}}" />
  </view>
  <!-- 显示播放进度和时间 -->
  <view class="content-play-progress">
    <text>{
   
   {play.currentTime}}</text>
    <view>
      <slider bindchange="sliderChange" activeColor="#d33a31" block-size="12" backgroundColor="#dadada" value="{
   
   {play.percent}}" />
    </view>
    <text>{
   
   {play.duration}}</text>
  </view>
</view>

1. Estilo de jugador 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. Realice la función de rotación del póster a través de la animación CSS3:

  <!-- 显示专辑封面 -->
  <view class="content-play-cover">
    <image src="{
   
   {play.coverImgUrl}}" style="animation-play-state:{
   
   {state}}" />
  </view>

3. La estructura deslizante en la parte inferior de la página del reproductor:

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

3. Muestra el progreso de la reproducción de música:

  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. Controle la longitud de la barra de progreso para controlar el progreso de reproducción de la canción:

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

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

Controle la longitud de la barra de progreso para controlar el progreso de reproducción de la canción:

<scroll-view class="content-playlist" scroll-y>
  <view class="playlist-item" wx:for="{
   
   {playlist}}" wx:key="id" bindtap="change" data-index="{
   
   {index}}">
    <image class="playlist-cover" src="{
   
   {item.coverImgUrl}}" />
    <view class="playlist-info">
      <view class="playlist-info-title">{
   
   {item.title}}</view>
      <view class="playlist-info-singer">{
   
   {item.singer}}</view>
    </view>
    <view class="playlist-controls">
      <text wx:if="{
   
   {index==playIndex}}">正在播放</text>
    </view>
  </view>
</scroll-view>

7. Lista de reproducción

1. Controle la longitud de la barra de progreso para controlar el progreso de reproducción de la canción:

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

2. Realice la función de cambio de canción:

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