在微信開發中，寫過的一個簡單的音樂播放組件，記錄下。
music
音樂播放組件。
屬性
| 屬性名 | 類型 | 默認值 | 說明 |
|---|---|---|---|
| music | String | 傳入的音樂資源地址 | |
| musicStyle | String | (隨便寫了個) | 音樂組件的樣式 |
| rotate | Boolean | true | 播放時是否有旋轉效果 |
| iconOn | String | (隨便寫了個) | 音樂播放時的icon地址 |
| iconOff | String | (隨便寫了個) | 音樂暫停時的icon地址 |
代碼
properties: { // 音樂路徑 music: { type: String, value: '', observer: function (newVal) { this._initMusic(newVal) } }, // 樣式 musicStyle: { type: String, value: 'position: absolute; right: 20rpx; top: 20rpx; width: 100rpx; height: 100rpx;' }, // 播放時是否有旋轉效果 rotate: { type: Boolean, value: true }, // 播放時的icon路徑 iconOn: { type: String, value: '/resources/img/music-on.png' // 請填寫默認的圖片地址 }, // 暫停時的icon路徑 iconOff: { type: String, value: '/resources/img/music-off.png' // 請填寫默認的圖片地址 } }初始化音樂
首先，在properties中接收頁面傳來的音樂文件地址，
music: { type: String, value: '', observer: function (newVal) { this._initMusic(newVal) }}這里的處理是，一旦接收到頁面傳來的 music 地址，就初始化音樂：
_initMusic: function (newVal) { // 當頁面傳來新的music時，先銷毀之前的audioCtx，否則頁面會很嗨 if (this.data.audioCtx) { this.data.audioCtx.destroy() } if (newVal) { var audioCtx = wx.createInnerAudioContext() this.setData({ audioCtx: audioCtx }) if (this.data.audioStatus == '1') { audioCtx.autoplay = true } audioCtx.loop = true audioCtx.src = newVal }}audioStatus 用來記錄音樂播放狀態，在data中默認設置為1：
data: { icon: '', audioStatus: 1, audioCtx: '', musicClass: 'music-on'}wxml文件里，只用一個 <image> 標簽：
<image class='music {{ rotate && musicClass }}' style="{{ musicStyle }}" src="{{ icon }}" bindtap='_switch' wx:if="{{ music }}"></image>其中， icon 在組件ready()時賦值成播放狀態的icon：
ready() { this.setData({ icon: this.data.iconOn })}音樂旋轉效果
音樂播放時的旋轉效果，是用css動畫實現的，wxss文件如下：
.music { position: absolute; z-index: 99; -webkit-animation-iteration-count: infinite;}/* 旋轉class */.music-on { animation: music-rotate 4s linear infinite;}/* 旋轉動畫 */@keyframes music-rotate { 0% { transform: rotateZ(0deg); } 100% { transform: rotateZ(360deg); }}當 rotate 為true時，使 musicClass 的值為 music-on，就能實現旋轉了。
當然， musicClass 需要用 this.setData 的方式來切換值。
爆丑照：
音樂控制
手動切換
手動點擊時，用取反的邏輯控制音樂的播放和暫停：
_switch: function () { // 如果是播放就停止 if (this.data.audioStatus) { this.setData({ audioStatus: 0, icon: this.data.iconOff, musicClass: '' }) this.data.audioCtx.pause() // 如果是停止就播放 } else { this.setData({ audioStatus: 1, icon: this.data.iconOn, musicClass: 'music-on' }) this.data.audioCtx.play() }}其它情況
同時，還要對下列情況做處理：
解決的方法，是在組件的methods中又寫了兩個方法：
// 寫在組件的methods中： // 在引用組件頁面的onShow()中調用// 否則，如果當發生分享頁面行為并返回時，音樂不會自動播放onShow: function () { if (this.data.music && this.data.audioStatus) { this.data.audioCtx.play() }},// 在引用組件頁面的onHide()中調用// 否則，在跳轉到下一個頁面后，音樂還在繼續onHide: function () { if (this.data.music && this.data.audioStatus) { this.data.audioCtx.pause() } this.setData({ animationData: {} })}這兩個方法分別在頁面中的 onShow 和 onHide 中調用，調用方式就是父組件獲取到子組件實例對象：
例如，給<music>組件加id為"music-componet"，調用時就是：
// 寫在調用頁面中 onShow: function () { this.selectComponent('#music-component').onShow()},onHide: function () { this.selectComponent('#music-component').onHide()}最后，在組件的detached中也調用一下 onHide 方法：
// 頁面關閉時銷毀音樂detached() { this.onHide()}使用
你可以
通過閱讀本文，根據自身實際情況寫一個
或者，直接湊合用
總結
以上所述是小編給大家介紹的微信小程序有旋轉動畫效果的音樂組件，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
