微信小程序之组件的集合（三）

　　看看音乐播放组件是如何实现完成的音乐的播放的！！！

一、音乐music组件的开发

1、页面以及页面样式的开发

// music组件页面开发
<view hidden="{{hidden}}" class="container">
  <image class="classic-img {{playing?'rotation':''}}" src='{{img}}'/>
  <image class="player-img" bind:tap="onPlay" src='{{!playing?playSrc:pauseSrc}}' />
  <image class="tag" src='images/music@tag.png' />
  <text class="content">{{content}}</text>
</view>

// 样式的开发 css代码
.container{
  display: flex;
  flex-direction: column;
  align-items: center
}

.classic-img{
   422rpx;
  height: 422rpx;
  margin-top: 60rpx;
  border-radius: 50%;
}

.player-img{
   120rpx;
  height: 120rpx;
  position: relative;
  bottom: 270rpx;
}

.tag{
   44rpx;
  height: 128rpx;
  position: relative;
  bottom: 160rpx;
  right: 310rpx;
}
/* 旋转的动画效果css */
.rotation {
  -webkit-transform: rotate(360deg);
  animation: rotation 12s linear infinite;
  -moz-animation: rotation 12s linear infinite;
  -webkit-animation: rotation 12s linear infinite;
  -o-animation: rotation 12s linear infinite;
}


@-webkit-keyframes rotation {
  from {
    -webkit-transform: rotate(0deg);
  }

  to {
    -webkit-transform: rotate(360deg);
  }
}

2、页面中逻辑代码的开发

这里用到了微信小程序中的音乐管理对象，音乐的播放都是通过这个来控制的。

import {
  classicBeh
} from '../classic-beh.js';

// 创建微信小程序中的音乐管理对象
const mMgr = wx.getBackgroundAudioManager();

Component({
  /**
   * 组件的属性列表 动画效果，当音乐播放的时候，图片是会转动的。如何实现？？？
   * CSS3 小程序中的动画API
   */
  behaviors: [classicBeh],
  properties: {
    src: String,
    title: String
  },

  /**
   * 组件的初始数据
   */
  data: {
    pauseSrc: 'images/player@pause.png',
    playSrc: 'images/player@play.png',
    playing: false
  },

  // 在组件实例进入页面节点树时执行
  attached:function(event){
     this._recoverStatus();
     this._mointorSwitch();
  },

  // 生命周期函数 当组件被移除时候触发
  detached:function(event){
    // 只有当用wx:if 控制组件的显示的时候。才会起作用。hidden控制的时候不会起作用
    // wx:if hidden 的区别 wx:if控制组件的显示的时候回重新完成的加载真个组件的生命周期，所以在频繁的切换组件的时候不建议使用的
    // mMgr.stop();
  },
  /**
   * 组件的方法列表
   */
  methods: {
    onPlay: function(event) {
      // 图片要切换
      if(!this.data.playing){
        this.setData({
          playing: true
        })
        mMgr.src = this.properties.src;
      }else{
        this.setData({
          playing: false
        })
        mMgr.pause();
      }
      mMgr.title = this.properties.title;
    },

  // 控制音乐播放的图片的切换
    _recoverStatus:function(){
      // 当前组件中没有音乐在播放
      if(mMgr.paused){
        this.setData({
          playing:false
        })
        return;
      }
      // 当前有一个组件中的音乐正在播放，并且当前位置就是那个音乐组件
      if(mMgr.src == this.properties.src){
        this.setData({
          playing: true
        })
      }
    },

    // 监听总控开关和组件联动
    _mointorSwitch:function(){
      // 播放音乐
      mMgr.onPlay(()=>{
        this._recoverStatus();
      })
      // 暂停音乐
      mMgr.onPause(()=>{
        this._recoverStatus();
      })
      // 关闭音乐总开关
      mMgr.onStop(()=>{
        this._recoverStatus();
      })

      // 一首音乐自动名播放完成切换状态
      mMgr.onEnded(()=>{
        this._recoverStatus();
      })
    }
  }
})

3、组件使用注意事项

组件在classic中使用的时候，需要考虑组件的显示与隐藏使用hidden属性还是wx:if来控制，至于这两者的区别，官方的文档来看：

https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/conditional.html#wx:if%20vs%20hidden

使用的代码：

<!-- 这里只能使用wx:if 不能用自定义的hidden属性，涉及到生命周期函数的触发 -->
  <v-music wx:if='{{classic.type == 200}}' img='{{classic.image}}' content='{{classic.content}}' src='{{classic.url}}' title='{{classic.title}}' />

二、小程序中tab栏的开发

这个不用自己重新编写，小程序中提供了现成的底部tab栏的，只需要在app.json 中配置一下就可以了：

{
  "pages": [
    "pages/classic/classic",
    "pages/book/book",
    "pages/my/my"
  ],
  "window": {
    "navigationBarBackgroundColor": "#ffffff",
    "navigationBarTitleText": "SSC在雨中",
    "navigationBarTextStyle": "black"
  },
  "sitemapLocation": "sitemap.json",
  "tabBar" : {
    "selectedColor":"#000000",
    "backgroundColor": "#ffffff",
    "color": "#c7c7c7",
    "list":[
      {
        "pagePath":"pages/classic/classic",
        "text": "流行",
        "iconPath": "/images/tab/classic.png",
        "selectedIconPath":"/images/tab/classic@highlight.png"
      },
      {
        "pagePath": "pages/book/book",
        "text": "书籍",
        "iconPath": "/images/tab/book.png",
        "selectedIconPath": "/images/tab/book@highlight.png"
      },
      {
        "pagePath": "pages/my/my",
        "text": "喜欢",
        "iconPath": "/images/tab/my.png",
        "selectedIconPath": "/images/tab/my@highlight.png"
      }
    ]
  }
}

 接下来就是另一个大的模块的开发了，bool模块的开发，继续继续...

内容出处：七月老师《纯正商业级小程序开发》视频课程

视频课程链接：https://coding.imooc.com/class/251.html