《微信公众平台入门到精通》Vol.21

内核开发者
• 阅读 11303

《微信公众平台入门到精通》Vol.21

今天进入音乐播放器教程的第二部分,主要是有关服务器端音乐内容管理和前端通讯接口的代码。

源码请点击这里下载,或者在公众号里输入“微信代码”查看下载连接,然后将下载链接自己想办法搞到PC上然后再下载,下载后上传到自己sae里,和上一个教程的播放器前端页面在同个地方就可以,后台管理是在浏览器运行的。

建议先下载安装了再看文章,以下是注意事项:

1、music.sql是数据库表文件,不了解SAE数据库的可以输入数字13查看《微信公众平台入门到精通》Vol.13。

2、图片上传使用的是SAE的Storage,不了解的可以输入数字10查看《微信公众平台入门到精通》Vol.10。

3、其他文件说明:

base-class.php  自定义函数,无需改动
wxmusicadd.php 音乐添加,需要改动的是Storage空间名称
wxmusic.php 音乐管理,无需改动
wxgetmusic.php  前端数据通讯接口,无需改动



第十六章 微信音乐播放器开发

三、音乐添加与管理

音乐内容添加与管理是通过服务器程序来实现的,如果有学习之前教程的朋友应该很熟悉结构了,并且我在源码里有详细注解,我这里就简单的过一遍,音乐内容新增文件是wxmusicadd.php,界面如下:
《微信公众平台入门到精通》Vol.21

这里要注意的是歌曲链接,网上不少链接都是有访问保护的,能在线听,但是没法通过第三方路径访问,最好的解决方法当然是放到自己的地盘里,比如可以使用又拍云存储这些。

千万不要把歌曲放到SAE的Storage空间里,流量消耗大得要命,你那点豆子根本不够用的,另外不要用qq音乐的音乐链接,在微信里无法收听。

代码需要修改的地方就是第100行,这里有个weixincourse,这个是我的Storage空间名字,你必须修改成你自己的。
《微信公众平台入门到精通》Vol.21

还有就是我在页尾加了个JS的验证表单,可以在表单提交前进行验证是否全部填完,如下图:
《微信公众平台入门到精通》Vol.21

音乐管理界面如下:
《微信公众平台入门到精通》Vol.21


四、前端数据通讯接口

音乐后台管理这块其实不难,跟之前我分享的代码结构基本一样,重点是在如何让播放器和数据库进行通讯,这里使用的技术是Ajax,它是一种异步的JavaScript与XML技术,说白了就是可以让前端在无刷新的情况下进行歌曲的切换、列表的获取等。

也就是播放器利用JS发送一个指令到后台,后台响应这个指令将符合指令的格式化数据反馈到前台,wxgetmusic.php就是后台进行数据处理输出的接口文件,前端这块下篇再讲。

接口文件我是用了三层函数结构写的,分别是指令获取验证、数据处理、数据输出三块,定义了三个局部变量数组来提高数据安全性。

指令获取验证函数比较简单,就是从url获取前端传递过来的参数,进行过滤和赋值,如下图:
《微信公众平台入门到精通》Vol.21

callback是Ajax在数据传输时的标识参数
t是输出数据的格式标识参数
do是前端发送过来的操作指令,分别有list(全部歌曲列表)、like_list(喜欢的歌曲列表)、like(喜欢操作)
open_id是微信用户的ID号
song_id是歌曲的ID号
page是当前页码,如果为空则默认是1。

数据处理函数比较复杂,首先是获取歌曲列表,如下图:
《微信公众平台入门到精通》Vol.21

第47行到59行是根据页码来从数据库里获取歌曲列表

第60行到74行是计算上一页和下一页的页码,根据这个来控制前端是否显示上下翻页的按钮

第77行到81行是将所有处理完的数据复制给输出数组。

第86行throw new Exception是中断程序抛出错误,也就是返回错误提示。

喜欢歌曲列表和全部歌曲列表差不多,区别就是喜欢歌曲列表要加个检测是否获取到微信用户的OPENID,然后通过OPENID来获取歌曲列表,同时操作表是music_user而不是music,如下图。
《微信公众平台入门到精通》Vol.21

用户对歌曲表态的操作牵扯的逻辑较多,如下图:
《微信公众平台入门到精通》Vol.21

第150行判断是否获取到用户的openid和要表态歌曲的ID

第153行查看music_user里该用户是否已经有过这首歌的记录

第157行到160行,如果用户对这首歌已经表过态,则判断这条记录的status值是1还是0,用这个来控制是喜欢还是不喜欢,然后更新表态的状态。

第165行到173行,如果用户第一次对这首歌表态,则从music表中获取该歌曲的信息,然后在music_user里插入一条新记录,并将stauts赋值为1,即用户喜欢此歌曲,同时将like_flag赋值为1。

第176行返回$like_flag值,即告诉前端用户的表态结果,1为喜欢,0为不喜欢。

最后是没有任何DO的操作,默认为向播放器返回一首单曲的处理,如下图:
《微信公众平台入门到精通》Vol.21

第193行到196行,前端有歌曲ID传输过来则返回该歌曲的数据

第197行到292行,前端传输过来的ID为-1,表示歌曲播放到最后一首了,循环播放返回第一首歌曲的数据。

第203行到207行,前端没有任何ID传输过来,则播放最新的一首歌曲。

第209行到215行,已经获得了要播放的歌曲数据,再查找这首歌曲上一首和下一首歌曲的ID号,返回给前端。

第222行到226行,已经获得了要播放的歌曲数据,同时前端还传输过来微信用户ID,则检查music_user里是否有该用户表态喜欢的记录,返回歌曲的表态数据。

函数执行的处理器我是用了try{}catch{},本身作用是用来处理异常的,不过这里可以方便的用来做接口返回处理器。指令获取处理和数据处理函数在try里运行,如果一切正常则输出数组的error为0,如果有错误,即通过throw new Exception抛出了错误提示,则程序终止,error为1,同时errmsg返回这个错误提示。

《微信公众平台入门到精通》Vol.21

最后是输出格式化的数据,如下图:
《微信公众平台入门到精通》Vol.21

这里有三个格式输出:

  • serialize是将数组以字符串方式返回,这个方便在浏览器直接查看运行结果。

  • json是将数组以json格式返回,可以用js反解成数组。

  • jsonp也是将数组以json格式返回,但是不同的是他可以跨域传输数据,这个应用的地方主要是在一些分布式服务器上。

最后运行的效果如下:
《微信公众平台入门到精通》Vol.21
获取全部歌曲列表

《微信公众平台入门到精通》Vol.21
用户表态操作成功

《微信公众平台入门到精通》Vol.21
获取单曲

动态程序这块基本就这些,下一期讲如何将前后端通过Ajax连接通讯。

点赞
收藏
评论区
推荐文章
blmius blmius
4年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
美凌格栋栋酱 美凌格栋栋酱
10个月前
Oracle 分组与拼接字符串同时使用
SELECTT.,ROWNUMIDFROM(SELECTT.EMPLID,T.NAME,T.BU,T.REALDEPART,T.FORMATDATE,SUM(T.S0)S0,MAX(UPDATETIME)CREATETIME,LISTAGG(TOCHAR(
微标题信公众号文章,阅读数,点赞数历史文章抓取
微标题信公众号文章,阅读数,点赞数历史文章抓取需求最近在做舆情与微信文章相关的数据抓取,发现微信公众号有些难点很难克服。市面上流行的数据抓取思路要么被腾讯封杀,要么操作难度大。解决方案搜狗微信无法采集历史,而且搜索也不按时间排序。获取的数据的价值不高,仅仅可以通过他获取公众号的biz。微信公众平台微信公
梦
4年前
微信小程序new Date()转换时间异常问题
微信小程序苹果手机页面上显示时间异常,安卓机正常问题image(https://imghelloworld.osscnbeijing.aliyuncs.com/imgs/b691e1230e2f15efbd81fe11ef734d4f.png)错误代码vardate'2021030617:00:00'vardateT
Wesley13 Wesley13
4年前
PHP微信小程序支付——签名错误
!(https://static.oschina.net/uploads/space/2018/0509/141657_Tqix_3477605.png)先分清几个概念:微信公众平台、微信开放平台、微信商户平台1.微信公众平台、微信开放平台、微信商户平台是三个不同的平台2.微信公众平台:用于公众号、小程序等等的设置平台,包括APPID、APP
Wesley13 Wesley13
4年前
Java微信公众平台开发(八)
我们上一篇写了关注出发图片的回复。想着在发送一次音乐,最后基于回复消息分类情况下,实现一个简单的只能话回复。先附一张大致效果图。!(https://oscimg.oschina.net/oscnet/847b9c6272bbacc10e79af12589a96da54e.jpg)下面我们进入代码阶段。(一)修改消息转发器MsgDispatch
Stella981 Stella981
4年前
Node.js 和 Apache 共用 80 端口
在CentOS上使用Apache的Proxymode使Node.js和Apache共用80端口最近用Node.js开发一个微信公共平台接口,由于微信公众平台接口配置目前仅支持默认的80端口,而我的C
Wesley13 Wesley13
4年前
ASP.NET微信开发视频教程
ASP.NETMVC5&微信公众平台整合开发实战(响应式布局、JQueryMobile,WindowsAzure、微信核心开发)课程分类:ASP.NETMVC适合人群:中级课时数量:29课时用到技术:深入MVC开发模式、C核心语言特性、C核心语言特性(二)、视图引擎Razor涉及项目:体育商店、微信公众平台开发
Wesley13 Wesley13
4年前
Java微信公众平台开发(十)
转自:http://www.cuiyongzhi.com/post/48.html自定义菜单这个功能在我们普通的编辑模式下是可以直接在后台编辑的,但是一旦我们进入开发模式之后我们的自定义菜单就需要自己用代码实现,所以对于刚开始接触的人来说可能存在一定的疑惑,这里我说下平时我们在开发模式下常用的两种自定义菜单的实现方式:①不用写实现代码,直接用网页测试工具
Wesley13 Wesley13
4年前
Java微信公众平台开发
转自:http://www.cuiyongzhi.com/post/63.html之前发过一个【微信开发】系列性的文章,也引来了不少朋友观看和点评交流,可能我在写文章时有所疏忽,对部分文件给出的不是很完全所以导致部分同学在有些地方做开发的时候遇到了一些阻力,收到这些朋友同学们的咨询反馈之后我也做了一些反思和总结,其中一部分同学说少了GlobalConst
壹立科技 壹立科技
2年前
外卖小程序为何愈发火热?创业者有必要去尝试入局吗?
微信外卖平台系统:即基于微信公众平台的外卖配送系统,用户在外卖小程序中完成自助订餐。并由平台的配送团队进行外卖配送。此外,对于骑手、商家、团队还具有相应的后台系统,相互连接,是一个完整的系统。使用微信小程序作为外卖平台入口的优势:1.开发成本低,连通H5