300行代码写一个音乐播放器小程序
刚进公司不久,因为公司部门年后业务拓展的关系,可能在年后会被分配到公司的微信公众号组做小程序相关的开发工作,因此写了个微信小程序wx-audio踩坑。目前还有一些功能没有写完:如返回多首歌曲、控制播放时间等,可能在年后继续完成。
项目主要是微信小程序、也用到了node、express等。
时间来不及了,快上车!
先上一个运行效果吧!
搭建node中间层
最近对搭建node中间层也有一定的思考,可见我最近刚写的文章:NodeJS搭建中间层
之所以选择NodeJS搭建中间层服务,主要是为了格式化参数、合并请求、节省性能方面所考虑的,现今大公司基本都采用node作为微服务的方式进行项目搭建。具体原因分析可自行谷歌或百度。
首先在node层对后端发起http请求:
// http.js
var formatURL = require("./formatURL.js");
var http = require("http");
const POSThttp = function(request) {return new Promise((resolve, reject) => {let body = "";// http模块拿到真实后台api的数据http.get(formatURL(request.body.musicname), function(res) {res.on("data", (data) => {body += data;}).on("end", () => {// 格式化const {name,audio: musicUrl,page,album: {name: musicName,picUrl,},artists: [{name: singer,}],} = JSON.parse(body).result.songs[0];const reply = {name,picUrl,musicUrl,page,singer,};resolve(reply);});});});
};
module.exports = POSThttp;
然后与客户端的交互:
var express = require("express");
var POSThttp = require("./POSThttp.js");
var bodyParser = require("body-parser");
// 使用body-parser解析post请求的参数,如果没有,req.body为undefined。
var app = express();
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended: true
}));
app.post("/", (req, res) => {POSThttp(req).then((data) => {res.send(data);}).catch((err) => {res.send(err);});
});
app.listen(3000, () => {console.log("open wx-audio server successful!")
});
前端部分
主要是歌曲播放控制和交互部分的代码,更多关于小程序的内容可见微信小程序 - 开发文档:
小程序框架结构
微信小程序的入口是根目录下的app.js
、app.json
、app.wxss
它们分别描述的小程序的主题逻辑和公共配置部分。
在pages/
目录下,每个文件夹就是一个页面。分别包括js文件
、wxml文件
、wxss文件
。它们分别描述数据逻辑、静态页面模板和页面样式。
数据逻辑控制
微信小程序采用类似于React
的state控制页面数据逻辑,我们不能使用this.data
直接改变状态,而是类似于React
`,使用this.setData()
改变页面数据逻辑。
在本项目中定义的如下数据逻辑
data: {name: '', // 歌曲名称musicUrl: '', // 歌曲链接地址picUrl: '', // 专辑图片地址page: '', // 网易云音乐的歌曲链接singer: '', //歌手名称input: '', // 输入框的内容transform: '', // 旋转动画属性rotateFlag: false, // 控制专辑图片旋转}
生命周期函数
微信小程序组件有自己的生命周期函数,也是类似于React
,每次通过触发一个钩子函数改变状态。如:onLoad
、onReady
函数等。
详情可见:微信小程序-API
中间的转盘部分
微信小程序并不支持css3自定义的动画,因此我采用JS实现的:
// 专辑图片旋转函数myRotate: function() {rotate++;let transform = `transform:rotate(${rotate}deg);`;this.setData({transform,});const animation = setTimeout(() => {this.myRotate();}, 30);if (!this.data.rotateFlag) {clearTimeout(animation);};},// 控制专辑图片旋转toggleRotate: function() {if (this.data.rotateFlag) {this.pauseMusic();this.audioCtx.pause();} else {this.playMusic();this.audioCtx.play();}},// 播放音乐playMusic: function() {this.setData({rotateFlag: true,});this.myRotate();},// 暂停播放音乐pauseMusic: function() {this.setData({rotateFlag: false,});},
交互部分
微信小程序采用特有的wx.request
发送http请求,基本用法类似于$.ajax(),传入回调函数。
wx.request({method: 'POST',url: 'http://127.0.0.1:3000', //访问node端后台借口header: {'content-type': 'application/x-www-form-urlencoded'},data: {musicname: musicname,},success: (res) => {const {name,picUrl,musicUrl,page,singer,} = res.data;this.setData({name,picUrl,musicUrl,page,singer,});console.log(this.data);},error: () => {console.log('err');}});
最后上源码:wx-audio,欢迎star、欢迎fork、欢迎PR。
最后祝大家鸡年大吉吧!
300行代码写一个音乐播放器小程序相关推荐
- (附源码)springboot音乐播放器小程序 毕业设计 170900
Springboot音乐播放器小程序 摘 要 本文设计了一种音乐播放器小程序,系统为人们提供了方便快捷.即用即搜的音乐搜索播放服务,包括音乐资讯.音乐搜索.新歌榜单.注册登录.论坛发表等,用户不仅能够 ...
- (附源码)小程序 音乐播放器小程序 毕业设计 170900
Springboot音乐播放器小程序 摘 要 本文设计了一种音乐播放器小程序,系统为人们提供了方便快捷.即用即搜的音乐搜索播放服务,包括音乐资讯.音乐搜索.新歌榜单.注册登录.论坛发表等,用户不仅能够 ...
- 用vue简单写一个音乐播放器
简单地写一个功能比较全的音乐播放器 前言 因为音乐播放器是一个很可能在项目遇到的东西,早写总比晚写好.趁没事先写个. 思路 一个音乐播放器该有的东西: 封面,歌名,专辑,作者 控制器(上一首,下一首, ...
- 写一个音乐播放器的微信小程序
要创建一个音乐播放器的微信小程序,您需要熟悉微信小程序的开发环境和语言(如 JavaScript 和 WXML/WXSS). 具体来说,您需要做以下几件事: 设计音乐播放器的用户界面,并使用 WXML ...
- 用Kotlin写一个音乐播放器
添加依赖 implementation "org.jetbrains.anko:anko:0.10.8" class home_frame : Fragment() {overri ...
- springboot +uniapp 音乐播放器 小程序+app
加qq:1576634877 获取源码 音乐播放器主要包括: 后台管理系统+uniapp小程序或app,后台上传音乐,mv,app播放 主要技术: springboot+mybatis+mysql+s ...
- 计算机实战项目、毕业设计、课程设计之含论文+辩论PPT+源码等]微信小程序音乐播放器小程序+后台管理系统
音乐播放器平台+后台管理系统|前后分离VUE>该项目含有源码.论文等资料.配套开发软件.软件安装教程.项目发布教程等 本系统包含微信小程序前台和Java做的后台管理系统,该后台采用前后台前后分离 ...
- java写一个音乐播放器源码_求一个JAVA音乐播放器的源代码
展开全部 import javax.media.ControllerEvent; import javax.media.ControllerListener; import javax.media.E ...
- 基于java springboot音乐播放器小程序源码(毕设)
开发环境及工具: 大等于jdk1.8,大于mysql5.5,idea(eclipse),微信开发者工具 技术说明: springboot mybatis 小程序 代码注释齐全,没有多余代码,适合学习( ...
最新文章
- 「hadoop」hadoop启动需要相关的命令(仅供本人使用)
- Flink Forward Asia Hackathon 最新参赛指南请查收
- [转载]Qt之模型/视图(实时更新数据)_vortex_新浪博客
- 突破封锁的浏览器_零的突破!重庆第一台全国产电脑到底长什么样?
- (一)PyQt5系列教程:使用PyQt5创建一个简单的demo
- 生鲜水果小程序微信源码完整可用精品
- 【云计算】云的七大分类定义说明
- STM32F407移植FreeModbus中遇到接收最后一个字节是0xff或0xfe的解决方法
- 物联网安全有哪些关键技术?
- 使用Workrave帮助防止腕管问题
- Unity Android Unable to load resource的问题
- 订单系统设计 —— 订单管理
- 数据结构 | 算法中的卡特兰数的应用
- Acwing4269. 校庆
- 申宝策略-行业与概念板块跌多涨少
- 基于springboot新生报到系统毕业设计源码080901
- linux单机限速工具
- 手写数字识别实现课设cnsd博客_使用Tesseract轻松实现OCR字体识别
- 【Qt/C++异常笔记】C1083:无法打开包括文件:“stddef.h”
- 大数据︱中国城市谁在腾飞?谁又在衰落?