day1-实现简易的音乐列表 效果图 项目目录下新建public文件夹，用来存放图片等文件 新建mine文件夹，用来展示列表界面 修改app.json文件，添加pages，修改窗口属性，添加底部导
day1-实现简易的音乐列表
效果图
项目目录下新建public文件夹，用来存放图片等文件
新建mine文件夹，用来展示列表界面
修改app.json文件，添加pages，修改窗口属性，添加底部导航栏
{ "entryPagePath":"pages/mine/mine", "pages":[ "pages/index/index", "pages/logs/logs", "pages/mine/mine" ], "window":{ "backgroundTextStyle":"light", "navigationBarBackgroundColor": "#C62F2F", "navigationBarTitleText": "网抑云", "navigationBarTextStyle":"white" }, "tabBar":{ "color":"#000", "selectedColor":"#a82222", "backgroundColor": "#fff", "list":[ { "text":"首页", "pagePath":"pages/index/index", "iconPath":"./public/mine.png", "selectedIconPath":"./public/mine_active.png" }, { "text":"列表", "pagePath":"pages/mine/mine", "iconPath":"./public/music.png", "selectedIconPath":"./public/music_active.png" } ] }, "style": "v2", "sitemapLocation": "sitemap.json"}修改mine.js,添加页面的数据
data: { playBtn:"/public/play.png", "songList":[ { "songName":"70億のピース", "singer":"秦基博", "url":"http://p1.music.126.net/ssKtJQMehHO1_xTs3n0DZw==/109951163097041912.jpg?param=130y130" }, { "songName":"私へ", "singer":"supercell", "url":"http://p2.music.126.net/vBq3ttdbWrVIVnXaVcfDug==/803742999928373.jpg?param=130y130" }, { "songName":"何もかも有り余っている こんな時代も", "singer":"Goose house", "url":"http://p2.music.126.net/2i1igcfXAYRJN9qf_LnWbA==/109951163067866087.jpg?param=130y130" } ] }mine.wxml，添加基本界面
<view> <view class="songList" wx:for="{ {songList}}" wx:key="item"> <view class="no">{ {index+1}}</view> <image class="img" src="{ {item.url}}"></image> <view class="text"> <view class="name">{ {item.songName}}</view> <view class="singer">{ {item.singer}}</view> </view> <image class="playBtn" src="{ {playBtn}}"></image> </view></view>mine.wxss 添加样式
.songList{ margin-top: 30px; display: flex; position: relative;}.songList .playBtn{ position: absolute; height: 40px; width: 40px; right: 12px; top: 50%; margin-top: -20px;}.songList .img{ margin-left: 20px; width: 60px; height: 60px;}.songList .no{ margin-left: 15px; margin-top: 20px;}.songList .text{ margin-left: 15px;}.songList .text .name{ margin-top: 4px; font-size: 14px;}.songList .text .singer{ margin-top:16px; font-size: 12px; color: #8d8d8d;}day2-简单的播放界面
效果
新建playpage用来表示播放界面
playpage.wxml
<view> <image id="needle" src="../../public/needle.png"></image></view><view id="playPage"> <image id="turntable" src="https://s3.music.126.net/mobile-new/img/disc-ip6.png?6979612%E2%80%A6="></image> <image id="coverImg" src="http://p2.music.126.net/2i1igcfXAYRJN9qf_LnWbA==/109951163067866087.jpg?param=130y130"></image></view><view id="control"> <image id="left" src="../../public/last.png"></image> <image id="middle" src="../../public/playBtn.png"></image> <image id="right" src="../../public/next.png"></image></view>playpage.wxss
@keyframes coverRotate{ 0%{ transform: rotate(0deg); } 100%{ transform: rotate(360deg); }}page{ background-color: #161824;}#needle{ position: absolute; width: 96px; height: 137px; left: 50%; z-index: 10;}#playPage{ width: 290px; height: 290px; position: relative; left: 50%; transform: translate(-50%,10%);}#coverImg{ position: absolute; width:160px; height:160px; border-radius: 100%; left: 50%; top: 50%; margin-left: -80px; margin-top: -80px; animation: coverRotate 2s linear infinite;}#turntable{ position: absolute; width: 290px; height: 290px;}#control{ position: absolute; width: 100%; bottom: 10%; height: 60px;}#control image{ position: absolute; width: 60px; height: 60px;}#control #left{ left: 20%;}#control #right{ right: 20%;}#control #middle{ left: 50%; transform: translate(-50%,0);}在mine中写一个简单的跳转函数
playBtnClick:function(e){ var id=e.currentTarget.dataset.pid; wx.navigateTo({ url: '/pages/playpage/playpage', })}绑定到按钮上
这样点击列表的按钮时就会跳转到播放界面
day3 音乐加载与播放控制
效果
在playpage.js中加载音乐
onLoad: function (options) { var audio=wx.createInnerAudioContext(); audio.src="http://music.163.com/song/media/outer/url?id=430208792.mp3"; audio.autoplay=false; audio.loop=true; this.setData({ audioContext:audio })}data中定义音乐对象以及playStatus控制播放
data: { audioContext:null, playStatus:false, coverImg:'http://p2.music.126.net/2i1igcfXAYRJN9qf_LnWbA==/109951163067866087.jpg?param=130y130', middleImg:'../../public/play.png',}点击函数
play(){ var status=this.data.playStatus; if (status) { this.setData({ playStatus:false, middleImg:'../../public/play.png', },()=>{ this.data.audioContext.stop(); }) }else{ this.setData({ playStatus:true, middleImg:'../../public/stop.png', },()=>{ this.data.audioContext.play(); }) }}修改一下之前的playpage.wxss
.coverImg{ position: absolute; width:160px; height:160px; border-radius: 100%; left: 50%; top: 50%; margin-left: -80px; margin-top: -80px;}.coverImgPlay{ animation: coverRotate 2s linear infinite;}playpage.wxml
<view> <image id="needle" src="../../public/needle.png"></image></view><view id="playPage"> <image id="turntable" src="https://s3.music.126.net/mobile-new/img/disc-ip6.png?6979612%E2%80%A6="></image> <image class="coverImg { {playStatus?'coverImgPlay':''}}" src="{ {coverImg}}"></image> <image wx:if="{ {!playStatus}}" id="playStatus" src="../../public/playBtn.png"></image></view><view id="control"><image id="left" src="../../public/last.png"></image><image id="middle" src="{ {middleImg}}" bindtap="play"></image><image id="right" src="../../public/next.png"></image></view>day4
网络接口
使用https://www.fastmock.site来实现https请求
将mine.js中的playList数组数据以json格式存储
{ "data": { "songList": [{ "songName": "70億のピース", "singer": "秦基博", "url": "http://p1.music.126.net/ssKtJQMehHO1_xTs3n0DZw==/109951163097041912.jpg?param=130y130", "src": "http://music.163.com/song/media/outer/url?id=430208792.mp3" }, { "songName": "私へ", "singer": "supercell", "url": "http://p2.music.126.net/vBq3ttdbWrVIVnXaVcfDug==/803742999928373.jpg?param=130y130", "src": "http://m10.music.126.net/20200724172317/65ab25eaf9e5d395049f354542b1c18f/ymusic/52ea/d34d/5d9d/bfbee932fe397564d9493cb930f0b2cf.mp3" }, { "songName": "何もかも有り余っている こんな時代も", "singer": "Goose house", "url": "http://p2.music.126.net/2i1igcfXAYRJN9qf_LnWbA==/109951163067866087.jpg?param=130y130", "src": "http://m10.music.126.net/20200724172419/ff53054f3dbae9182aba049991afa722/ymusic/obj/w5zDlMODwrDDiGjCn8Ky/3036668087/dd8c/9050/4242/c36f4b9a93f759463a2ccfff54c9ab35.mp3" } ] }}
在onLoad函数中从网络加载playList
onLoad: function (options) { wx.request({ url: 'https://www.fastmock.site/mock/5b416e93c6759da32f907b7da9b15f14/music/songlist', method:"post", success:(res)=>{ this.setData({ songList:res.data.data.songList }) } })}url跳转
在点击事件中传入参数
playBtnClick:function(e){ var id=e.currentTarget.dataset.pid; wx.navigateTo({ url: '/pages/playpage/playpage?index='+id+'&list='+encodeURIComponent(JSON.stringify(this.data.songList)), }) }播放界面playpage.js中接受数据
onLoad: function (options) { var song=JSON.parse(decodeURIComponent(options.list)); var index=options.index; var audio=wx.createInnerAudioContext(); audio.src=song[index].src; audio.autoplay=false; audio.loop=true; this.setData({ audioContext:audio, coverImg:song[index].url, songList:song, playIndex:index })}data数据
data: { audioContext:null, playStatus:false, coverImg:null, middleImg:'../../public/play.png', songList:null, playIndex:null}前一首，播放/暂停，下一首
play(e){ var status=this.data.playStatus; if (status) { this.setData({ playStatus:false, middleImg:'../../public/play.png', },()=>{ this.data.audioContext.stop(); }) }else{ this.setData({ playStatus:true, middleImg:'../../public/stop.png', },()=>{ this.data.audioContext.play(); }) }},pre(){ var index=this.data.playIndex; var songList=this.data.songList; var audio=this.data.audioContext; index--; if (index<0) { index=songList.length-1; } audio.src=songList[index].src; this.setData({ audioContext:audio, coverImg:songList[index].url, playIndex:index, },()=>{ if(this.data.playStatus){ this.data.audioContext.play(); } })},next(){ var index=this.data.playIndex; var songList=this.data.songList; var audio=this.data.audioContext; index++; if (index>songList.length-1) { index=0; } audio.src=songList[index].src; this.setData({ audioContext:audio, coverImg:songList[index].url, playIndex:index, },()=>{ if(this.data.playStatus){ this.data.audioContext.play(); } })}首页
效果
index.wxml
<view> <swiper class="swiper" indicator-dots="true" autoplay="true"> <swiper-item> <image src="{ {swiper[0]}}"></image> </swiper-item> <swiper-item> <image src="{ {swiper[1]}}"></image> </swiper-item> </swiper> <view class="container" > <view class="center" wx:for="{ {icon1}}" wx:key="item"> <image src="{ {item.src}}"></image> <view class="text">{ {item.name}}</view> </view> </view> <view class="container" > <view class="center" wx:for="{ {icon2}}" wx:key="item"> <image src="{ {item.src}}"></image> <view class="text">{ {item.name}}</view> </view> </view></view>index.wxss
.swiper image{ width: 100%;height: 100%;}.container{ margin-top: 60px; padding: 0; display: flex; flex-flow: row wrap; justify-content: space-evenly;}.container image{ width: 60px; height: 60px;}.center{ width: 60px; height: 60px; text-align: center;}.text{ margin-top: 8px; font-size: 12px; color: #111111;}index.js
Page({ data: { "swiper": [ "http://p1.music.126.net/q2ag5aifgDZqAOm6GLkc_g==/109951165165020942.jpg?imageView&quality=89", "http://p1.music.126.net/XQziGhiSXy3CHgUqzJst8g==/109951165163926069.jpg?imageView&quality=89" ], "icon1": [ { "name": "每日推荐", "src": "../../public/topicon1.png" }, { "name": "歌单", "src": "../../public/topicon2.png" }, { "name": "排行榜", "src": "../../public/topicon3.png" }, { "name": "电台", "src": "../../public/topicon4.png" } ], "icon2": [ { "name": "直播", "src": "../../public/topicon5.png" }, { "name": "火前留名", "src": "../../public/topicon6.png" }, { "name": "数字专辑", "src": "../../public/topicon7.png" }, { "name": "唱聊", "src": "../../public/topicon8.png" } ] },})