微信小程序頁面結構和組件練習--音樂播放器

說明：

• 這個項目旨在練習組件以及頁面的設計。頁面和交互的實現(xiàn)可能有多種方式，這里只為了對組件和項目的結構進行熟悉了解。后續(xù)會有更加完善的項目。
• 由于涉及到mp3外鏈導入音樂，預覽二維碼在外鏈失效時會出錯，這里不放預覽二維碼了；另預覽二維碼存在有效時長，有興趣的可以自己試著運行程序，在運行程序之前更換mp3外鏈的地址，以防出錯。mp3外鏈獲?。ㄒ魳吠怄溤诰€獲取_音樂外鏈生成網站_音樂在線聽-mp3外鏈網 (xf1433.com)）。
• 喜歡的可以點個贊，如果有問題或者想要完整的項目代碼及素材，評論區(qū)有百度云鏈接。

效果圖：

?? ? ?? ? ?

• 三個頁面通過輪播圖的方式進行切換并實現(xiàn)一定的交互效果。其中，音樂推薦頁沒有設定交互；播放器頁的進度條具有滑動可改變進度；播放列表頁具有播放列表音樂的事件；底部的顯示區(qū)域具有控制音頻的交互。
• 遇到的問題：布局嵌套；初始數(shù)據的訪問；渲染的嵌套使用；

bug:

• 播放器頁面的播放時長和進度條的顯示：頁面首次加載獲取不到默認曲目的音頻時長。按下一首和播放列表進行播放也不顯示，按暫停后再按播放就能正常顯示。

代碼部分：

• 這里給出項目的代碼，沒給出代碼卻存在的文件內容為空。關于素材方面，icon和img分別是圖片和圖標文件夾；照片是平時拍的，圖標在阿里巴巴圖標庫找的（iconfont-阿里巴巴矢量圖標庫）。

app.json?

{

??"pages":?[

????"pages/index/index"

??],

??"window":?{

????"navigationBarBackgroundColor":?"#e0e0e0",

????"navigationBarTextStyle":?"black",

????"navigationBarTitleText":?"音樂"

??},

??"sitemapLocation":?"sitemap.json"

}

?index.wxml

<view?class="tap"><!--導航區(qū)域-->

??<view?class="tap1"?bindtap="onRecommend"?data-item="0">音樂推薦</view>

??<view?class="tap1"?bindtap="onPlay"?data-item="1">播放器</view>

??<view?class="tap1"?bindtap="onList"?data-item="2">播放列表</view>

</view>

<view?class="contain"><!--內容區(qū)域-->

??<swiper?current="{{item}}">

??????<swiper-item><include?src="recommend.wxml"?/></swiper-item>

??????<swiper-item><include?src="play.wxml"?/></swiper-item>

??????<swiper-item><include?src="list.wxml"?/></swiper-item>

??</swiper>

</view>

<view?class="footer"><!--底部區(qū)域-->

??<view>

????<view?class="footer1">

??????<image?src="{{playSing.musiccoverImg}}"?class="footerImage"></image>

????</view>

????<view?class="footer2">

??????<view>{{playSing.musicsong}}</view>

??????<view>{{playSing.musicsinger}}</view>

????</view>

????<view?class="footer3">

??????<view>

????????<image?src="../../icon/菜單.png"?bindtap="menuTap"?data-item="2"></image>

????????<view>

??????????<image?wx:if="{{!isPlayMusic}}"?src="../../icon/暫停.png"?bindtap="pauseTap"></image>

??????????<image?wx:else?src="../../icon/播放.png"?bindtap="playTap"></image>

????????</view>

????????<image?src="../../icon/下一曲.png"?bindtap="nextTap"></image>

??????</view>

????</view>

??</view>

</view>

?index.wxss

page{

??display:?flex;flex-direction:?column;background:?rgb(146,?128,?121);height:?100%;

}

.tap{display:?flex;

??background-color:?rgb(82,?240,?121);height:?70rpx;

}

.tap1{flex:?1;font-size:?20px;text-align:center;border-bottom:?solid?5rpx?rgb(50,?9,?235);}?

.contain{flex:1;}

.contain>swiper{height:100%;background-color:?rgb(42,?182,?147);}

.recom1{margin-bottom:?60rpx;height:?550rpx;}

.recom1?image{width:?100%;height:?100%;}

.recom2{display:?flex;flex-wrap:wrap;margin-bottom:?20rpx;}

.recom2>view{flex:?1;text-align:?center;}

.recom2?image{width:?120rpx;height:?100rpx;border:?solid?4rpx?rgb(120,?223,?197);border-radius:?10%;}

.recom3{display:?flex;flex-wrap:wrap;flex:?1;margin-bottom:?20rpx;}

.recom3>view{text-align:center;margin:?10rpx?20rpx;}

.recom3?image{width:?210rpx;height:?140rpx;border-radius:?10%;}

.list{display:?flex;flex:?1;flex-direction:?column;?}

.list>view{border-bottom:?solid?3rpx?rgb(24,?216,?223);display:?flex;}

.list?image{width:?100rpx;height:?100rpx;margin:?15rpx;}

.list2{flex:?1;}

.list2_1{diaplaly: flex;}

.list2_1>view:first-child{text-align:?left;margin-top:?20rpx;}

.list2_1>view:last-child{flex:1;text-align:?right;margin-top:?50rpx;margin-right:?20rpx;}

.play{height:100%;display:?flex;flex-direction:?column;justify-content:?center;}

.play1{text-align:?center;margin:20rpx;font-size:?40rpx;}

.play2{text-align:?center;flex:?1;}

.play2?image{width:?350rpx;height:350rpx;border-radius:?50%;margin-top:?130rpx;}

.playrotate{animation:?animateRotate?10s?linear?infinite;}

.play3{display:?flex;}

.play3?slider{flex:?1;}

.play3>view:first-child{margin:?20rpx?0rpx?20rpx?20rpx;padding:0rpx;}

.play3>view:last-child{margin:?20rpx?20rpx?20rpx?0rpx;padding:0rpx;}

.footer{background-color:rgb(12,?228,?243);font-size:?18px;}

.footer>view{display:?flex;}

.footerImage{width:?80rpx;height:?80rpx;margin:?15rpx;}

.footer2{display:?flex;flex-direction:?column;}

.footer2?view{text-align:?center;margin:?5rpx;font-size:?30rpx;}

.footer3{flex:?1;}

.footer3>view{display:?flex;justify-content:?flex-end;padding-top:?20rpx;}

.footer3?image{width:?70rpx;height:?70rpx;margin:?0rpx?15rpx;}

@keyframes?animateRotate{

??from{transform:?rotate(0deg);}

??to{transform:?rotate(360deg);}

}

?index.js

Page({

??data:?{

????item:0,

????isactive:0,

????isPlayMusic:false,

????isrotate:false,

????isplay:true,

????listSing:[

??????{id:"1",song:"八月夜桂花",singer:"還潮",coverImg:"../../img/sw1.jpg",audioSrc:"https://sharefs.ali.kugou.com/202107232134/30280d96986673559df9ab931c6bc75b/G174/M02/0D/01/7g0DAF3n4iOAcc9TAD3rmaDghjI270.mp3"},

??????{id:"2",song:"晚風",singer:"陳婧霏",coverImg:"../../img/sw2.jpg",audioSrc:"https://sharefs.ali.kugou.com/202107232131/e87b792dd4206b1c082ed389d423512d/G164/M03/04/00/5A0DAF1c-AKAeVXaACsys46W7mQ528.mp3"},

??????{id:"3",song:"親密愛人",singer:"梅艷芳",coverImg:"../../img/sw3.jpg",audioSrc:"http://mp.333ttt.com/mp3music/22851062.mp3"},

??????{id:"4",song:"在冬天和奶奶一起曬太陽",singer:"趙照",coverImg:"../../img/sw1.jpg",audioSrc:"https://sharefs.ali.kugou.com/202107232134/7a25da194582ddcf4cf6f856701b50e5/G189/M0A/15/18/nZQEAF5ZEk6AfipaAEPqyN-VYhI072.mp3"},

??????{id:"5",song:"晚安",singer:"林宥嘉",coverImg:"../../img/sw3.jpg",audioSrc:"https://sharefs.ali.kugou.com/202107222148/67074aa123d09ee52aa715578b487694/KGTX/CLTX001/c59c04254efa6f54d7bdd675947f68ac.mp3"},

??????{id:"6",song:"Sofia",singer:"Alvaro?Soler",coverImg:"../../img/sw2.jpg",audioSrc:"https://sharefs.ali.kugou.com/202107231545/a70098ef00c6fdbb3722f0c0a32a12e7/G201/M01/0A/04/aYcBAF5ABeiAL5WOADNmeboY3wg848.mp3"},

??????{id:"7",song:"Wild",singer:"Monogem",coverImg:"../../img/sw1.jpg",audioSrc:"https://sharefs.ali.kugou.com/202107231546/2a37951e34e374ad35749dcefa39f28e/G119/M04/04/17/tw0DAFpOGEOAKYizADS68iNCyy4692.mp3"},

??????{id:"8",song:"童話鎮(zhèn)",singer:"暗杠",coverImg:"../../img/sw3.jpg",audioSrc:"https://sharefs.ali.kugou.com/202107231550/275d29499eba4450e5751bba98ad2563/G062/M03/14/11/fg0DAFd1IvSAJlbkAD0PMS2Gwek596.mp3"}

????],

????playSing:{

??????musicsong:'',

??????musicsinger:'',

??????musiccoverImg:'',

??????currenttime:'00:00',

??????totaltime:'00:00',

??????percent:0

????}

????

??},

??//可直接訪問并賦值屬性

??audio:null,

??indexlist:0,

??musicnum:0,

??//頂部欄事件

??onRecommend:function(e){

????this.setData({item:e.target.dataset.item,isactive:0})

??},

??onPlay:function(e){this.setData({item:e.target.dataset.item,isactive:1})},

??onList:function(e){this.setData({item:e.target.dataset.item,isactive:2})},

??//recommend頁面事件

??

??//play頁面事件

??onMusic:function(index){

????var?music?=?this.data.listSing[index];

????this.audio.src=music.audioSrc;

????this.setData({

??????'playSing.musicsong':music.song,

??????'playSing.musicsinger':music.singer,

??????'playSing.musiccoverImg':music.coverImg,

??????'playSing.totaltime':'00:00',

??????'playSing.currenttime':'00:00'???????

????})

??},

??onSlider:function(e){

????this.audio.seek(e.detail.value/100*this.audio.duration)

????this.setData({

??????'playSing.currenttime':formatTime(e.detail.value/100*this.audio.duration),

??????'playSing.totaltime':formatTime(this.audio.duration),

??????'playSing.percent':this.audio.currentTime/this.audio.duration*100

????})

????function?formatTime(time){

??????var?minute=Math.floor(time/60)%60;

??????var?second=Math.floor(time)%60;

??????return?(minute<10??'0'+minute?:?minute)?+?':'?+?(second<10??'0'+second:second)

????}

??},

??//底部播放欄事件

??menuTap:function(e){

????this.setData({item:e.target.dataset.item})

??},

??pauseTap:function(){

????this.onAuxiliary()

????this.audio.play()

??},

??playTap:function(){

????this.audio.pause()

????this.setData({isPlayMusic:false,isrotate:false})

??},

??nextTap:function(){

????if(this.musicnum?<=?(this.indexlist+1)){

??????this.indexlist=0;

??????this.onMusic(this.indexlist)??//音樂信息

??????this.onAuxiliary()?????????????//音樂輔助事件

??????this.audio.play()?????????????//播放音樂

??????return

????}

????this.onMusic(++this.indexlist)

????this.onAuxiliary()

????this.audio.play()

??},

??//list頁面事件

??musicList:function(e){

????//這里對應底部的播放器的變化，同時右邊當前播放顯示，且音樂播放。

????this.onMusic((e.currentTarget.dataset.listorder)-1)

????this.indexlist=(e.currentTarget.dataset.listorder)-1;

????this.onAuxiliary()

????this.audio.play()

??},

??//輔助函數(shù)

??onAuxiliary:function(){???//此輔助函數(shù)為添加播放的事件監(jiān)聽

????this.setData({isPlayMusic:true,isrotate:true})

????this.audio.onError(()=>{wx.showToast({????/*在播放的界面里寫錯誤和結束事件?*/

??????title:?'播放地址錯誤'

????})})

????this.audio.onEnded(()=>{

??????this.nextTap()

????})

????/*使用播放事件來時刻顯示播放進度?*/

????//?this.audio.onPlay(()=>{?})

????this.audio.onTimeUpdate(()=>{

??????this.setData({

????????'playSing.totaltime':formatTime(this.audio.duration),

????????'playSing.currenttime':formatTime(this.audio.currentTime),

????????'playSing.percent':this.audio.currentTime/this.audio.duration*100

??????})

????})

????function?formatTime(time){

??????var?minute=Math.floor(time/60)%60;

??????var?second=Math.floor(time)%60;

??????return?(minute<10??'0'+minute?:?minute)?+?':'?+?(second<10??'0'+second:second)

????}

??},

})

?recommend.wxml

<scroll-view?class="recom"?scroll-y="true"?style="height:100%;">

??<swiper?class="recom1"?indicator-dots="true"?autoplay?circular>

????<swiper-item><image?src="../../img/sw1.jpg"?mode="aspectFill"></image></swiper-item>

????<swiper-item><image?src="../../img/sw2.jpg"?mode="aspectFill"></image></swiper-item>

????<swiper-item><image?src="../../img/sw3.jpg"?mode="aspectFill"></image></swiper-item>

??</swiper>

??<view?class="recom2">

????<view>?

??????<image?src="../../img/sw1.jpg"></image>

??????<view>私人FM</view>

????</view>

????<view>

??????<image?src="../../img/sw11.jpg"></image>

??????<view>每日歌曲推薦</view>

????</view>

????<view>

??????<image?src="../../img/sw3.jpg"></image>

??????<view>云音樂新歌榜</view>

????</view>

??</view>

??<view?style="margin-left:20rpx;margin-bottom:10rpx;">熱門音樂</view>

??<view?class="recom3">

????<view?class="recom3_1">

??????<image?src="../../img/sw11.jpg"></image>

??????<view>紫羅蘭</view>

????</view>

????<view?class="recom3_1">

??????<image?src="../../img/sw11.jpg"></image>

??????<view>五月之家</view>

????</view>

????<view?class="recom3_1">

??????<image?src="../../img/sw11.jpg"></image>

??????<view>菩提樹</view>

????</view>

????<view?class="recom3_1">

??????<image?src="../../img/sw11.jpg"></image>

??????<view>紫羅蘭</view>

????</view>

????<view?class="recom3_1">

??????<image?src="../../img/sw11.jpg"></image>

??????<view>五月之家</view>

????</view>

????<view?class="recom3_1">

??????<image?src="../../img/sw11.jpg"></image>

??????<view>菩提樹2</view>

????</view>

??</view>

</scroll-view>文章來源地址http://www.zghlxwxcb.cn/news/detail-489446.html

play.wxml

<view?class="play">

???<view?class="play1">

??????<view>{{playSing.musicsong}}</view>

??????<view>--{{playSing.musicsinger}}--</view>

???</view>

???<view?class="play2">

??????<image?src="{{playSing.musiccoverImg}}"?class="{{isrotate?'playrotate':'pauserotate'}}"></image>

???</view>

???<view?class="play3">

??????<view>{{playSing.currenttime}}</view>

??????<slider?block-size="12"?value="{{playSing.percent}}"?bindchange="onSlider"></slider>

??????<view>{{playSing.totaltime}}</view>

???</view>

</view>

list.wxml

<scroll-view?scroll-y="true"?style="height:100%">

??<view?class="list">

????<view?wx:for="{{listSing}}"?wx:key="id"?wx:for-item="item1">

??????<view?class="list1">

????????<image?src="{{item1.coverImg}}"?mode="aspectFill"></image>

??????</view>

??????<view?class="list2">

????????<view?bindtap="musicList"?class="list2_1"?data-listorder="{{item1.id}}">

????????<view?class="list3">

??????????<view>{{item1.song}}</view>

??????????<view>{{item1.singer}}</view>

????????</view>

????????<view?class="list3?list3-{{isplaycolor???'iscolor'?:?''}}"><view?wx:if="{{true}}">點擊播放</view></view>

??????</view>

??????</view>

????</view>

??</view>

??<view?style="text-align:center;font-size:40rpx;">待更新~</view>

</scroll-view>

到了這里，關于微信小程序--音樂播放器的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網！