热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

300行代码写一个音乐播放器小程序

刚进公司不久,因为公司部门年后业务拓展的关系,可能在年后会被分配到公司的微信公众号组做小程序相关的开发工作,因此写了个微信小程序wx-audio踩坑。目前还有一些功能没有写完:如返

刚进公司不久,因为公司部门年后业务拓展的关系,可能在年后会被分配到公司的微信公众号组做小程序相关的开发工作,因此写了个微信小程序wx-audio踩坑。目前还有一些功能没有写完:如返回多首歌曲、控制播放时间等,可能在年后继续完成。

项目主要是微信小程序、也用到了node、express等。

时间来不及了,快上车!

先上一个运行效果吧!

《300行代码写一个音乐播放器小程序》

搭建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.jsapp.jsonapp.wxss它们分别描述的小程序的主题逻辑和公共配置部分。

pages/目录下,每个文件夹就是一个页面。分别包括js文件wxml文件wxss文件。它们分别描述数据逻辑、静态页面模板和页面样式。

  • 数据逻辑控制

微信小程序采用类似于React的state控制页面数据逻辑,我们不能使用this.data直接改变状态,而是类似于React`,使用this.setData()改变页面数据逻辑。

在本项目中定义的如下数据逻辑

data: {
name: '', // 歌曲名称
musicUrl: '', // 歌曲链接地址
picUrl: '', // 专辑图片地址
page: '', // 网易云音乐的歌曲链接
singer: '', //歌手名称
input: '', // 输入框的内容
transform: '', // 旋转动画属性
rotateFlag: false, // 控制专辑图片旋转
}

  • 生命周期函数

微信小程序组件有自己的生命周期函数,也是类似于React,每次通过触发一个钩子函数改变状态。如:onLoadonReady函数等。

详情可见:微信小程序-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。
最后祝大家鸡年大吉吧!


推荐阅读
  • 在本文中,我们将探讨如何使用 UniApp 封装小程序 API 请求接口的最佳实践。通过创建 `request.js` 文件,定义基础 URL 并传入后端提供的 URL 作为请求参数。同时,配置请求方法(如 GET、POST)和请求头(例如包含 token 的认证信息),以实现高效、安全的 API 调用。此外,我们还将介绍如何处理请求和响应的错误,以及如何优化请求性能,确保应用在不同平台上的兼容性和稳定性。 ... [详细]
  • 微信支付授权目录配置详解及操作步骤
    在使用微信支付时,若通过WeixinJSBridge.invoke方法调用支付功能,可能会遇到“当前页面URL未注册”的错误提示,导致get_brand_wcpay_request:fail调用微信JSAPI支付失败。为解决这一问题,需要正确配置微信支付授权目录,确保支付页面的URL已成功注册。本文将详细介绍微信支付授权目录的配置步骤和注意事项,帮助开发者顺利完成支付功能的集成与调试。 ... [详细]
  • 2019年后蚂蚁集团与拼多多面试经验详述与深度剖析
    2019年后蚂蚁集团与拼多多面试经验详述与深度剖析 ... [详细]
  • 修复一个 Bug 竟耗时两天?真的有那么复杂吗?
    修复一个 Bug 竟然耗费了两天时间?这背后究竟隐藏着怎样的复杂性?本文将深入探讨这个看似简单的 Bug 为何会如此棘手,从代码层面剖析问题根源,并分享解决过程中遇到的技术挑战和心得。 ... [详细]
  • HTML5大文件传输技术深度解析与实践分享
    本文深入探讨了HTML5在Web前端开发中实现大文件上传的技术细节与实践方法。通过实例分析,详细讲解了如何利用HTML5的相关特性高效、稳定地处理大文件传输问题,并提供了可供参考的代码示例和解决方案。此外,文章还讨论了常见的技术挑战及优化策略,旨在帮助开发者更好地理解和应用HTML5大文件上传技术。 ... [详细]
  • 如何构建并优化微信小程序页面的设计与功能
    本文将深入探讨微信小程序页面的设计与优化方法,旨在帮助开发者高效构建功能完备且用户体验良好的小程序。通过实例分析与技术详解,读者能够掌握从页面布局到功能实现的全过程,提升开发技能与应用质量。 ... [详细]
  • 微信小程序的核心功能与优势在于其独特的运行环境,区别于传统网页应用,它不依赖于浏览器的BOM和DOM对象,因此无法通过常规的`console.log(window)`或`console.log(document)`获取相关信息。此外,小程序还具备一系列专有特性,如高效的数据绑定、丰富的API接口以及良好的用户交互体验,这些都为开发者提供了更为灵活和强大的开发工具,使得小程序能够更好地适应移动互联网时代的需求。 ... [详细]
  • 本文详细探讨了Java集合框架的使用方法及其性能特点。首先,通过关系图展示了集合接口之间的层次结构,如`Collection`接口作为对象集合的基础,其下分为`List`、`Set`和`Queue`等子接口。其中,`List`接口支持按插入顺序保存元素且允许重复,而`Set`接口则确保元素唯一性。此外,文章还深入分析了不同集合类在实际应用中的性能表现,为开发者选择合适的集合类型提供了参考依据。 ... [详细]
  • 本文详细解析了如何使用 jQuery 实现一个在浏览器地址栏运行的射击游戏。通过源代码分析,展示了关键的 JavaScript 技术和实现方法,并提供了在线演示链接供读者参考。此外,还介绍了如何在 Visual Studio Code 中进行开发和调试,为开发者提供了实用的技巧和建议。 ... [详细]
  • 深入解析Tomcat:开发者的实用指南
    深入解析Tomcat:开发者的实用指南 ... [详细]
  • 本课程详细介绍了如何使用Python Flask框架从零开始构建鱼书应用,涵盖高级编程技巧和实战项目。通过视频教学,学员将学习到Flask的高效用法,包括数据库事务处理和书籍交易模型的实现。特别感谢AI资源网提供的课程下载支持。 ... [详细]
  • 题目描述:小K不幸被LL邪教洗脑,洗脑程度之深使他决定彻底脱离这个邪教。在最终离开前,他计划再进行一次亚瑟王游戏。作为最后一战,他希望这次游戏能够尽善尽美。众所周知,亚瑟王游戏的结果很大程度上取决于运气,但通过合理的策略和算法优化,可以提高获胜的概率。本文将详细解析洛谷P3239 [HNOI2015] 亚瑟王问题,并提供具体的算法实现方法,帮助读者更好地理解和应用相关技术。 ... [详细]
  • 探讨 `org.openide.windows.TopComponent.componentOpened()` 方法的应用及其代码实例分析 ... [详细]
  • 在处理分享功能时,以往通常会首先考虑使用第三方SDK,如友盟等。然而,通过实际项目经验发现,利用iOS原生的UIActivityViewController不仅可以实现高效、稳定的分享功能,还能更好地控制用户体验。本文将详细介绍如何利用iOS原生技术缓存HTML内容,并结合URL分享的最佳实践,帮助开发者在实际开发中提升应用性能和用户满意度。 ... [详细]
  • 目录RPC是什么RPC的优点RPC的缺点RPC是什么RPC(RemoteProcedureCall)isaprotocolthatoneprogramcanusetorequest ... [详细]
author-avatar
普林
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有