音樂播放最終版 · 微信小程序

[TOC] ### 1. wxml （模板） ~~~ <view class="m-container"> <image src="{{image}}" class="m-banner {{isPlay?'rotate':''}}"></image> <image src="{{isPlay?play:pause}}" class="m-play" bind:tap="onMusic"></image> <image src="images/music.png" class="m-icon"></image> <view class="text">{{content}}</view> </view> ~~~ ### 2. wxss （模板） ~~~ .m-container{ display: flex; align-items: center; flex-direction: column; } .m-banner{ width:400rpx; height:400rpx; border-radius: 50%; } .m-icon{ top:-100rpx; left:-300rpx; width:46rpx; height:142rpx; position: relative; } .m-play{ width:100rpx; height:100rpx; position: relative; top:-230rpx; } .rotate { animation: rotate 6s linear infinite; } @keyframes rotate { 0% { transform: rotate(0);} 100% { transform: rotate(360deg);} } ~~~ ### 3. js （模板） ~~~ // components/classic/music/index.js const audio = wx.getBackgroundAudioManager(); Component({ /** * 組件的屬性列表 */ properties: { image: String, content: String, url: String, title: String }, /** * 組件的初始數據 */ data: { isPlay: false, play: "images/play.png", pause: "images/pause.png" }, /** * 組件的方法列表 */ methods: { onMusic() { if (this.data.isPlay) { audio.pause(); this.setData({ isPlay: false }) } else { audio.title = this.properties.title; audio.src = this.properties.url; this.setData({ isPlay: true }) } }, _recoveryMusic() { if (audio.src == this.properties.url) { this.setData({ isPlay: true }) } if (audio.paused) { this.setData({ isPlay: false }) } }, _monitorMusic() { //點播放，開始 audio.onPlay(() => { this.setData({ isPlay: true }) }) //點暫停，不播放 audio.onPause(() => { this.setData({ isPlay: false }) }) //關掉的時候，不播放 audio.onStop(() => { this.setData({ isPlay: false }) }) //歌曲放完的時候，自動停止 audio.onEnded(() => { this.setData({ isPlay: false }) }) } }, attached() { this._recoveryMusic(); this._monitorMusic(); } }) ~~~ ### 4. wxml （使用） ~~~ <v-music wx:if="{{classic.type==200}}" url="{{classic.url}}" image="{{classic.image}}" content="{{classic.content}}"></v-music> ~~~ ### 5. js （使用） ~~~ onLoad: function (options) { classicModel.getLatest(res => { this.setData({ classic: res, like:res.like_status, count:res.fav_nums }) }) }, ~~~ ### 6. 載次封裝http ~~~ import { HTTP } from "../utils/http"; class ClassicModel extends HTTP { getLatest(callback) { this.request({ url: "/classic/latest", success: res => { let index = res.index; callback(res); wx.setStorageSync('latest', res.index) } }) } getClassic(index, nextOrprevious, callback) { /* 有緩存則取緩存沒有緩存,則發送http */ const key = (nextOrprevious == "next") ? this._getKey(index + 1) : this._getKey(index - 1); const classic = wx.getStorageSync(key); if (classic) { callback(classic); } else { this.request({ url: `/classic/${index}/${nextOrprevious}`, success: res => { callback(res); wx.setStorageSync(this._getKey(res.index), res); } }) } } isFirst(index) { return index == 1 ? true : false } isLatest(index) { const latest = wx.getStorageSync('latest'); return index == latest ? true : false; } _getKey(index) { return "classic" + index; } } export { ClassicModel }; ~~~