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

微信邦 · 发表于 2013-10-11 09:00:36

前两天上线的ZTalk音乐盒子颇受好评，很多朋友都在后台求教程求源码，

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

源码请点击 lesson10（微信公众平台Ztalk源码）21.rar (11.14 KB, 下载次数: 0, 售价: 30 金钱)

2013-10-11 09:01 上传

点击文件名下载附件
《微信公众平台入门到精通》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，界面如下：

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

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

代码需要修改的地方就是第100行，这里有个weixincourse，这个是我的Storage空间名字，你必须修改成你自己的。

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

还有就是我在页尾加了个JS的验证表单，可以在表单提交前进行验证是否全部填完，如下图：

音乐管理界面如下：

《微信公众平台入门到精通》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