音樂播放微信小程序基于Nodejs后臺(tái)

由于本學(xué)期學(xué)習(xí)了微信小程序，因此我在私下，結(jié)合書中的小程序案例和自己的一些開發(fā)感想，寫了這個(gè)·音樂播放的微信小程序。當(dāng)然由于初學(xué)者，不足之處，希望多多包涵。這也是我寫的第一篇博客，不足之處，希望大神指正
上效果圖：

## 上代碼

首頁播放器實(shí)現(xiàn)代碼

// A code block
<view class="tab">
<view class="tab-item {{tab==0?'active':''}}" bindtap="changeItem" data-item="0">音樂推薦</view>
<view class="tab-item {{tab==1?'active':''}}"  bindtap="changeItem" data-item="1">音樂播放</view>
<view class="tab-item {{tab==2?'active':''}}"  bindtap="changeItem" data-item="2">播放列表</view>
</view>
<view class="content">
<swiper current="{{item}}" 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"></view>
<!--底部播放器-->
<view class="player">
  <image class="player-cover" src="{{play.coverImgUrl}}"></image>
  <view class="player-info">
    <view class="player-info-title">{{play.title}}</view>
    <view class="player-info-singer">{{play.singer}}</view>
  </view>
  <view class="player-controls">
    <!--切換到播放列表-->
    <image src="image/01.png" bindtap="changePage" data-page="2"/>
    <!--播放-->
    <image wx:if="{{state=='paused'}}" src="image/02.png" bindtap="play"/>
    <imag wx:else src="image/02stop.png" bindtap="pause"/>
    <!--下一曲-->
    <image src="image/03.png" bindtap="next"/>
  </view>
</view>
```javascript
// An highlighted block
var foo = 'bar';

下面展示一些 播放器頁面實(shí)現(xiàn)代碼。

// A code block
<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}}" />
  </view>
  <!-- 顯示播放進(jìn)度和時(shí)間 -->
  <view class="content-play-progress">
    <text>{{play.currentTime}}</text>
    <view>
      <slider bindchange="sliderChange" activeColor="#d33a31" block-size="12" backgroundColor="#dadada" value="{{play.percent}}" />
    </view>
    <text>{{play.duration}}</text>
  </view>
</view>

NOJS后臺(tái)運(yùn)營效果
由于時(shí)間關(guān)系就這么多了，需要源碼的加我qq吧2539029477.晚安呦！