音乐播放微信小程序基于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="data:image/01.png" bindtap="changePage" data-page="2"/><!--播放--><image wx:if="{{state=='paused'}}" src="data:image/02.png" bindtap="play"/><imag wx:else src="data:image/02stop.png" bindtap="pause"/><!--下一曲--><image src="data: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.晚安呦！

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

微信小程序基于node.js的websocket服务器搭建和SSL证书申请、配置全家桶
〇.前言最近在研究微信小程序的开发,中间遇到了不少问题,趟了不少坑,这里和大家分享一下我的一些经验,希望能给大家提供一些帮助. 一.微信小程序的websocket服务器搭建微信小程序的网络通信使用 ...
计算机毕业设计Python+uniapp音乐播放微信小程序LW(小程序+源码+LW)
计算机毕业设计Python+uniapp音乐播放微信小程序LW(小程序+源码+LW) 该项目含有源码.文档.程序.数据库.配套开发软件.软件安装教程项目运行环境配置: Pychram社区版+ py ...
视频教程-项目实战视频课程：美团小程序（Node.js+Express+支付）-微信开发
项目实战视频课程:美团小程序(Node.js+Express+支付) 东北大学计算机专业硕士研究生,欧瑞科技创始人&CEO,曾任国内著名软件公司项目经理,畅销书作者,企业IT内训讲师,CSDN ...
独家首发DJ舞曲音乐在线播放微信小程序源码下载支持多分类歌曲
这是一款音乐播放小程序源码音乐内容是属于DJ,电音,舞曲等等这类型的该小程序的歌曲有七大分类,分别是: 第一分类热门推荐第二分类中文舞曲第三分类英文舞曲第四分类慢摇舞曲第五分类舞曲串烧第 ...
（附源码）springboot音乐播放器小程序毕业设计 170900
Springboot音乐播放器小程序摘要本文设计了一种音乐播放器小程序,系统为人们提供了方便快捷.即用即搜的音乐搜索播放服务,包括音乐资讯.音乐搜索.新歌榜单.注册登录.论坛发表等,用户不仅能够 ...
（附源码）小程序音乐播放器小程序毕业设计 170900
Springboot音乐播放器小程序摘要本文设计了一种音乐播放器小程序,系统为人们提供了方便快捷.即用即搜的音乐搜索播放服务,包括音乐资讯.音乐搜索.新歌榜单.注册登录.论坛发表等,用户不仅能够 ...
微信小程序-基于canvas画画涂鸦
代码地址如下: http://www.demodashi.com/demo/14461.html 一.前期准备工作软件环境:微信开发者工具官方下载地址:https://mp.weixin.qq.c ...
微信小程序基于swiper组件的tab切换
代码地址如下: http://www.demodashi.com/demo/14010.html 一.前期准备工作软件环境:微信开发者工具官方下载地址:https://mp.weixin.qq.c ...
微信小程序基于scroll-view实现锚点定位
代码地址如下: http://www.demodashi.com/demo/14009.html 一.前期准备工作软件环境:微信开发者工具官方下载地址:https://mp.weixin.qq.c ...
微信小程序基于云数据库简单实现帖子点赞功能。
思路: 1·用云函数或者app.js获取用户openid,在每个帖子里面like_people数组里添加点赞过该帖子的用户openid.获取帖子云数据存放到suju:[]里. 2·点击点赞按钮图标变换 ...

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

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

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

最新文章

热门文章