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

川长思鸟来 2023-06-19 15:25 11阅读 0赞

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDAxNTY2OQ_size_16_color_FFFFFF_t_70][]        ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDAxNTY2OQ_size_16_color_FFFFFF_t_70 1][]        ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDAxNTY2OQ_size_16_color_FFFFFF_t_70 2][]

代码送上：

### 1、index.wxml ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDAxNTY2OQ_size_16_color_FFFFFF_t_70 3][]

> 
> 
> <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 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDAxNTY2OQ_size_16_color_FFFFFF_t_70 4][]

> <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 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDAxNTY2OQ_size_16_color_FFFFFF_t_70 5][]

> <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  ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDAxNTY2OQ_size_16_color_FFFFFF_t_70 6][]

> <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 ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDAxNTY2OQ_size_16_color_FFFFFF_t_70 7][]

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

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

可见下图操作：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDAxNTY2OQ_size_16_color_FFFFFF_t_70 8][]         ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDAxNTY2OQ_size_16_color_FFFFFF_t_70 9][]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDAxNTY2OQ_size_16_color_FFFFFF_t_70 10][]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDAxNTY2OQ_size_16_color_FFFFFF_t_70 11][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDAxNTY2OQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191207102019786.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDAxNTY2OQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDAxNTY2OQ_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191207102043631.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDAxNTY2OQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDAxNTY2OQ_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20191207102127512.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDAxNTY2OQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDAxNTY2OQ_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20191207102836878.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDAxNTY2OQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDAxNTY2OQ_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20191207103235926.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDAxNTY2OQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDAxNTY2OQ_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/2019120710330874.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDAxNTY2OQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDAxNTY2OQ_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/20191207103340422.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDAxNTY2OQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDAxNTY2OQ_size_16_color_FFFFFF_t_70 7]: https://img-blog.csdnimg.cn/20191207104106413.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDAxNTY2OQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDAxNTY2OQ_size_16_color_FFFFFF_t_70 8]: https://img-blog.csdnimg.cn/20191207104610436.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDAxNTY2OQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDAxNTY2OQ_size_16_color_FFFFFF_t_70 9]: https://img-blog.csdnimg.cn/20191207104930136.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDAxNTY2OQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDAxNTY2OQ_size_16_color_FFFFFF_t_70 10]: https://img-blog.csdnimg.cn/20191207105405208.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDAxNTY2OQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDAxNTY2OQ_size_16_color_FFFFFF_t_70 11]: https://img-blog.csdnimg.cn/20191207104824107.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDAxNTY2OQ==,size_16,color_FFFFFF,t_70