音乐播放微信小程序基于node.js后台 - 新闻资讯 - 云南小程序开发|云南软件开发|云南网站建设-昆明葵宇信息科技有限公司

159-8711-8523

云南网建设/小程序开发/软件开发

知识

不管是网站,软件还是小程序,都要直接或间接能为您产生价值,我们在追求其视觉表现的同时,更侧重于功能的便捷,营销的便利,运营的高效,让网站成为营销工具,让软件能切实提升企业内部管理水平和效率。优秀的程序为后期升级提供便捷的支持!

您当前位置>首页 » 新闻资讯 » 小程序相关 >

音乐播放微信小程序基于node.js后台

发表时间:2020-10-9

发布人:葵宇科技

浏览次数:84

音乐播放微信小程序基于Nodejs后台

由于本学期学习了微信小程序,因此我在私下,结合书中的小程序案例和自己的一些开发感想,写了这个·音乐播放的微信小程序。当然由于初学者,不足之处,希望多多包涵。这也是我写的第一篇博客,不足之处,希望大神指正
上效果图:

首页
播放页面

播放列表## 上代码

首页播放器实现代码

// 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';

下面展示一些 播放器页面实现代码

// 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>
  <!-- 显示播放进度和时间 -->
  <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后台运营效果
由于时间关系就这么多了,需要源码的加我qq吧2539029477.晚安呦!

相关案例查看更多