本人刚加入公司不久，因为年后公司部门业务拓展，可能会分配到公司微信公众号群做小程序-相关的开发工作，所以写了一个微信小程序wx-audio来踩坑。还有一些功能还没有完成：比如返回多首歌曲、控制播放时间等，明年可能会继续完成。项目主要是一个微信小程序，也会用到node、express等。时间不多了，上车吧！先说运行效果吧！搭建节点中间层最近也在考虑搭建节点中间层。可以看我最近刚写的文章：NodeJS搭建中间层的原因是选择NodeJS搭建中间层服务，主要是格式化参数，在合并请求和保存性能上，现在的大公司基本都是用node作为用于构建项目的微服务。具体原因可以谷歌或百度分析。首先在node层向后端发起http请求：//http.jsvarformatURL=require("./formatURL.js");varhttp=require("http");constPOSThttp=function(request){returnnewPromise((resolve,reject)=>{letbody="";//http模块获取真实后台api的数据http.get(formatURL(request.body.musicname),function(res){res.on("data",(data)=>{body+=data;}).on("end",()=>{//格式化常量{name,audio:musicUrl,page,album:{name:musicName,picUrl,},artists:[{name:singer,}],}=JSON.parse(body).result.songs[0];constreply={name,picUrl,musicUrl,page,singer,};解析(回复);});});});};module.exports=POSThttp;然后与客户端交互：varexpress=require("express");varPOSThttp=require("./POSThttp.js");varbodyParser=require("body-parser");//使用body-parser解析post请求的参数，如果没有，则req.body未定义varapp=express();app.use(bodyParser.json());app.use(bodyParser.urlencoded({extended:true}));应用程序。post("/",(req,res)=>{POSThttp(req).then((data)=>{res.send(data);}).catch((err)=>{res.send(err);});});app.listen(3000,()=>{console.log("打开wx-audio服务器成功！")});前端部分主要是歌曲播放控制和交互部分的代码，更多关于小程序的内容可以参考微信小程序-开发文档：小程序框架结构微信小程序的入口是app。根目录下的js、app.json、app.wxss，分别描述了主题逻辑和常用配置部分。在pages/目录下，每个文件夹都是一个页面。分别包括js文件、wxml文件、wxss文件。它们分别描述了数据逻辑、静态页面模板和页面样式。数据逻辑控制微信小程序使用类似React的state来控制页面数据逻辑。我们不能使用this.data直接改变状态，而是使用this.setData()改变页面数据逻辑，类似React`。本项目数据定义如下数据逻辑：{name:'',//歌曲名称musicUrl:'',//歌曲链接地址picUrl:'',//专辑图片地址page:'',//网易云音乐songlinksinger:'',//歌手名input:'',//输入框内容transform:'',//旋转动画属性rotateFlag:false,//控制专辑图片旋转}生命周期函数微信小程序组件有自己的生命周期函数，类似于React，每次通过触发一个钩子函数来改变状态。如：onLoad、onReady函数等。详见：微信小程序-API中间的转盘部分微信小程序不支持css3自定义动画，所以我用JS实现了：//相册图片旋转函数myRotate:function(){rotate++;lettransform=`transform:rotate(${rotate}deg);`;this.setData({转换,});constanimation=setTimeout(()=>{this.myRotate();},30);如果（！this.data.rotateFlag）{clearTimeout（动画）;};},//控制专辑图片旋转toggleRotate:function(){if(this.data.rotateFlag){this.pauseMusic();this.audioCtx.pause();}else{this.playMusic();this.audioCtx.play();}},//播放音乐playMusic:function(){this.setData({rotateFlag:true,});这个.myRotate();},//暂停播放音乐pauseMusic:function(){this.setData({rotateFlag:false,});}，微信小程序交互部分使用了一个特有的wx.request发送http请求，基本用法与$.ajax()类似，在函数中传入回调。wx.request({method:'POST',url:'http://127.0.0.1:3000',//访问节点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。最后祝大家鸡年快乐！
