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"
}
]
},
})