zoukankan      html  css  js  c++  java
  • 微信公众号教程(19)微信音乐播放器开发 中

    微信音乐播放器开发

     原文:http://www.cnblogs.com/imaker/p/6252651.html

    三、音乐添加与管理

     

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

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

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

     

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

     

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

    音乐管理界面如下:

    四、前端数据通讯接口

     

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

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

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

    指令获取验证函数比较简单,就是从url获取前端传递过来的参数,进行过滤和赋值,如下图:

    callback是Ajax在数据传输时的标识参数

    t是输出数据的格式标识参数

    do是前端发送过来的操作指令,分别有list(全部歌曲列表)、like_list(喜欢的歌曲列表)、like(喜欢操作)

    open_id是微信用户的ID号

    song_id是歌曲的ID号

    page是当前页码,如果为空则默认是1。

    数据处理函数比较复杂,首先是获取歌曲列表,如下图:

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

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

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

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

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

    用户对歌曲表态的操作牵扯的逻辑较多,如下图:

    第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的操作,默认为向播放器返回一首单曲的处理,如下图:

    第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返回这个错误提示。

    最后是输出格式化的数据,如下图:

    这里有三个格式输出:

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

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

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

    最后运行的效果如下:

    获取全部歌曲列表

    用户表态操作错误,无歌曲ID和用户ID

    用户表态操作成功

    获取单曲

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

  • 相关阅读:
    计算两个latitude-longitude点之间的距离? (Haversine公式)
    Spring Boot工程支持HTTP和HTTPS,HTTP重定向HTTPS
    Invalid character found in method name. HTTP method names must be tokens
    Http压测工具wrk使用指南
    Android自定义带下划线EditText解决文字压线的问题
    Android-PullToRefresh 使用心得
    GridView 和ListView中自适应高度
    【Android多屏适配】动态改变Listview item高度
    Android listview的item设定高度
    Android ListView高度自适应和ScrollView冲突解决
  • 原文地址:https://www.cnblogs.com/imaker/p/6252651.html
Copyright © 2011-2022 走看看