微信小程序2：网易云音乐（完整版）

作为一个需要听歌“续命”的程序员小白， 周末睡个懒觉也备忘录敲代码呀，记录下前阵子写的“小雅米音乐”----网易云音乐小程序，希望大家会喜欢，也请各位大佬多多指教。

                

代码送上：

1、index.wxml

 

<!--标签页标题-->

<view class="tab">

<view class="tab-item {{tab==0?'active':''}}" data-item='0' bindtap="changeNum">音乐推荐</view>

<view class="tab-item {{tab==1?'active':''}}" data-item='1' bindtap="changeNum">播放器</view>

<view class="tab-item {{tab==2?'active':''}}" data-item='2' bindtap="changeNum">列表播放</view>

</view>

<!--内容区域-->

<view class="content">

<swiper current="{{num}}" bindchange='changeTab'>

<swiper-item><include src ='./info.wxml'/></swiper-item>

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

<swiper-item><include src ='./playlist.wxml'/></swiper-item>

</swiper>

</view>

<!--底部播放器-->

<view class="player">

<image src="{{play.coverImgUrl}}" class="player-image"></image>

<view class="player-info">

<view class="gequ">{{play.title}}</view>

<view class="singer">{{play.singer}}</view>

</view>

<view class="controls">

<image src="/images/01.png" bindtap='changePage' data-page="2"></image>

<!--切换播放按钮-->

<image wx:if="{{state=='paused'}}" src="/images/02.png" bindtap='play'></image>

<image wx:else src='/images/02stop.png' bindtap='pause' ></image>

<image src="/images/03.png" bindtap='next'></image>

</view>

</view>

 2、info.wxml

<scroll-view class='scroll' scroll-y>

<!-- 广告切换 -->

<swiper class='info-swiper' indicator-dots autoplay>

<swiper-item><image src='../../images/y1.jpg' /></swiper-item>

<swiper-item><image src='../../images/y2.jpg' /></swiper-item>

<swiper-item><image src='../../images/y3.jpg' /></swiper-item>

</swiper>

<!-- 三个功能图标 -->

<view class='info-content'>

<view>

<image src='../../images/04.png'></image>

<text>私人FM</text>

</view>

<view>

<image src='../../images/05.png'></image>

<text>每日推荐</text>

</view>

<view>

<image src='../../images/06.png'></image>

<text>云音乐新歌榜</text>

</view>

</view>

<view class="info-list">

<view class="title">推荐歌曲</view>

<view class="list">

<view wx:for="{{playlist}}" wx:key="id" wx:if="{{index>=4}}">

<image src='{{item.coverImgUrl}}'></image>

<text>{{item.title}}</text>

</view>

</view>

</view>

 

 

 3、play.wxml

<view class="<content-play">

<view class="content-play-info">

<text>{{play.title}}</text>

<view>----{{play.singer}}----</view>

</view>

<view class="content-play-cover">

<image src="{{play.coverImgUrl}}" style="animation-play-state:{{state}}"></image>

</view>

<view class="content-play-progress">

<text>{{play.currentTime}}</text>

<view>

<slider activeColor="#d33a31" block-size="12" backgroundColor="#dadada" value="{{play.percent}}" bindchange="sliderChange"/>

</view>

<text>{{play.duration}}</text>

</view>

</view>

 

4、playlist.wxml 

<scroll-view class="content-playlist" scroll-y>

<view class="playlist-item" wx:for="{{playlist}}" wx:key="id" bindtap="change" data-index="{{index}}">

<image class="playlist-cover" src="{{item.coverImgUrl}}"></image>

<view class="playlist-info">

<view class="playlist-info-title">{{item.title}}</view>

<view class="playlist-info-singer">{{item.singer}}</view>

</view>

<view class="playlist-controls">

<text wx:if="{{index==playIndex}}">正在播放</text>

</view>

</view>

</scroll-view>

 5、index.wxss

在成功运行该音乐小程序时，需用到phpStudy，才可以成功获取听到音乐，其中还需要对Phpstudy端口设置！！

点击其他设置右键phpstudy设置再右键，点击端口常规设置，在httpd端口中将80改为8080，然后点击应用。

可见下图操作：

        

或者打开站点域管理对网站端口进行修改，再点击新增即可。

最后点击启动，当Apache与MySQL运行状态显示为绿色，说明可正常运行，这时候就可听到小程序的歌曲了。