> 效果如图  >1. 制作component组件 在组件中通过play是否为true控制: 图片是否加`rotate` 旋转属性，以及播放图片的src ``` --music.wxml-- <view class="banner"> <image class="{{play?'rotate':''}}" src="/images/banner.png" /> <image class="play" src="{{play?'/images/play.png':'/images/pause.png'}}" mode="widthFix" bindtap="onMusic"/> </view> ``` ``` --rotate动画-- .rotate { animation: rotate 3s linear infinite; //linear线性平滑过渡 } @keyframes rotate { 0% { transform: rotate(0);} 100% { transform: rotate(360deg);} } ``` >2. 注册并使用组件 先在index.json中注册组件 ``` "usingComponents":{ "v-music": "/components/music/music" } ``` 再在index.wxml中使用并通过属性传递数据 ``` <v-music title="{{music.title}}" url="{{music.url}}"></v-music> ``` >3. 组件接受所需数据 ``` --music.js-- properties: { title: String, url: String } ``` >4. 实现点击功能 ``` const audio = wx.getBackgroundAudioManager(); methods: { onPlay(){ if(this.data.isPlay){ audio.pause(); this.setData({ isPlay: !this.data.isPlay }) }else{ audio.title = this.properties.mTitle; audio.src = this.properties.mUrl; this.setData({ isPlay: !this.data.isPlay }); } } }, attached(){ /* 音乐播放 */ audio.onPlay(()=>{ this.setData({ play: true }); }); /* 暂停 */ audio.onPause(()=>{ this.setData({ play: false }); }); /* 停止 */ audio.onStop(()=>{ this.setData({ play: false }); }); /* 播放完 */ audio.onEnded(()=>{ this.setData({ play: false }); }); } ```