看看音乐播放组件是如何实现完成的音乐的播放的！！！
一、音乐music组件的开发
1、页面以及页面样式的开发
1 // music组件页面开发
2 <view hidden="{{hidden}}" class="container">
3 <image class="classic-img {{playing?'rotation':''}}" src='{{img}}'/>
4 <image class="player-img" bind:tap="onPlay" src='{{!playing?playSrc:pauseSrc}}' />
5 <image class="tag" src='images/music@tag.png' />
6 <text class="content">{{content}}</text>
7 </view>
8
9 // 样式的开发 css代码
10 .container{
11 display: flex;
12 flex-direction: column;
13 align-items: center
14 }
15
16 .classic-img{
17 width: 422rpx;
18 height: 422rpx;
19 margin-top: 60rpx;
20 border-radius: 50%;
21 }
22
23 .player-img{
24 width: 120rpx;
25 height: 120rpx;
26 position: relative;
27 bottom: 270rpx;
28 }
29
30 .tag{
31 width: 44rpx;
32 height: 128rpx;
33 position: relative;
34 bottom: 160rpx;
35 right: 310rpx;
36 }
37 /* 旋转的动画效果css */
38 .rotation {
39 -webkit-transform: rotate(360deg);
40 animation: rotation 12s linear infinite;
41 -moz-animation: rotation 12s linear infinite;
42 -webkit-animation: rotation 12s linear infinite;
43 -o-animation: rotation 12s linear infinite;
44 }
45
46
47 @-webkit-keyframes rotation {
48 from {
49 -webkit-transform: rotate(0deg);
50 }
51
52 to {
53 -webkit-transform: rotate(360deg);
54 }
55 }
2、页面中逻辑代码的开发
这里用到了微信小程序中的音乐管理对象，音乐的播放都是通过这个来控制的。
1 import {
2 classicBeh
3 } from '../classic-beh.js';
4
5 // 创建微信小程序中的音乐管理对象
6 const mMgr = wx.getBackgroundAudioManager();
7
8 Component({
9 /**
10 * 组件的属性列表 动画效果，当音乐播放的时候，图片是会转动的。如何实现？？？
11 * CSS3 小程序中的动画API
12 */
13 behaviors: [classicBeh],
14 properties: {
15 src: String,
16 title: String
17 },
18
19 /**
20 * 组件的初始数据
21 */
22 data: {
23 pauseSrc: 'images/player@pause.png',
24 playSrc: 'images/player@play.png',
25 playing: false
26 },
27
28 // 在组件实例进入页面节点树时执行
29 attached:function(event){
30 this._recoverStatus();
31 this._mointorSwitch();
32 },
33
34 // 生命周期函数 当组件被移除时候触发
35 detached:function(event){
36 // 只有当用wx:if 控制组件的显示的时候。才会起作用。hidden控制的时候不会起作用
37 // wx:if hidden 的区别 wx:if控制组件的显示的时候回重新完成的加载真个组件的生命周期，所以在频繁的切换组件的时候不建议使用的
38 // mMgr.stop();
39 },
40 /**
41 * 组件的方法列表
42 */
43 methods: {
44 onPlay: function(event) {
45 // 图片要切换
46 if(!this.data.playing){
47 this.setData({
48 playing: true
49 })
50 mMgr.src = this.properties.src;
51 }else{
52 this.setData({
53 playing: false
54 })
55 mMgr.pause();
56 }
57 mMgr.title = this.properties.title;
58 },
59
60 // 控制音乐播放的图片的切换
61 _recoverStatus:function(){
62 // 当前组件中没有音乐在播放
63 if(mMgr.paused){
64 this.setData({
65 playing:false
66 })
67 return;
68 }
69 // 当前有一个组件中的音乐正在播放，并且当前位置就是那个音乐组件
70 if(mMgr.src == this.properties.src){
71 this.setData({
72 playing: true
73 })
74 }
75 },
76
77 // 监听总控开关和组件联动
78 _mointorSwitch:function(){
79 // 播放音乐
80 mMgr.onPlay(()=>{
81 this._recoverStatus();
82 })
83 // 暂停音乐
84 mMgr.onPause(()=>{
85 this._recoverStatus();
86 })
87 // 关闭音乐总开关
88 mMgr.onStop(()=>{
89 this._recoverStatus();
90 })
91
92 // 一首音乐自动名播放完成切换状态
93 mMgr.onEnded(()=>{
94 this._recoverStatus();
95 })
96 }
97 }
98 })
3、组件使用注意事项
组件在classic中使用的时候，需要考虑组件的显示与隐藏使用hidden属性还是wx:if来控制，至于这两者的区别，官方的文档来看：
https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/conditional.html#wx:if%20vs%20hidden
使用的代码：
1 <!-- 这里只能使用wx:if 不能用自定义的hidden属性，涉及到生命周期函数的触发 -->
2 <v-music wx:if='{{classic.type == 200}}' img='{{classic.image}}' content='{{classic.content}}' src='{{classic.url}}' title='{{classic.title}}' />
二、小程序中tab栏的开发
这个不用自己重新编写，小程序中提供了现成的底部tab栏的，只需要在app.json 中配置一下就可以了：
1 {
2 "pages": [
3 "pages/classic/classic",
4 "pages/book/book",
5 "pages/my/my"
6 ],
7 "window": {
8 "navigationBarBackgroundColor": "#ffffff",
9 "navigationBarTitleText": "SSC在雨中",
10 "navigationBarTextStyle": "black"
11 },
12 "sitemapLocation": "sitemap.json",
13 "tabBar" : {
14 "selectedColor":"#000000",
15 "backgroundColor": "#ffffff",
16 "color": "#c7c7c7",
17 "list":[
18 {
19 "pagePath":"pages/classic/classic",
20 "text": "流行",
21 "iconPath": "/images/tab/classic.png",
22 "selectedIconPath":"/images/tab/classic@highlight.png"
23 },
24 {
25 "pagePath": "pages/book/book",
26 "text": "书籍",
27 "iconPath": "/images/tab/book.png",
28 "selectedIconPath": "/images/tab/book@highlight.png"
29 },
30 {
31 "pagePath": "pages/my/my",
32 "text": "喜欢",
33 "iconPath": "/images/tab/my.png",
34 "selectedIconPath": "/images/tab/my@highlight.png"
35 }
36 ]
37 }
38 }
接下来就是另一个大的模块的开发了，bool模块的开发，继续继续...