webapp2

十一.使用apiCloud的模块实现音乐播放器

第1步:选择模块的导航栏

 

 

第2步:添加netAudio到app项目当中

 

 

 

netAudio不支持高清音乐的播放，不支持本地的音乐的播放，只是支持在线网络播放

其技术文档是免费

 

第3步:netAudio的常用方法

 

play（）方法:netAudio播放功能，播放时会返回json格式的数据

duration: 音乐的总长度

current: 当前音乐播放进度

pause()方法:暂停音乐的播放

stop()方法:停止音乐的播放，让音乐重头开始

setProgress()方法:设置音乐播放进度

十二.让音乐响起来（html/win_music.html）

1.实现fnStart方法：实现音乐响起起来（光盘转动，进度条随音乐滑动）

 

 

2.修改代码实现光盘转动

 

 

 

3.让滑块随着音乐滑动

关键技术有一个难度，滑块的最小值为1，最大为100，而音乐往往超过100秒，所以直接用音乐的总长度对滑块进行赋值那么就会导致滑块最大超过100会产生js错误，所以我们就需要把音乐控制秒在100的范围之内，使用以下音乐的播放通用公式:

音乐的当前进度/音乐的总长度*100

套用公式编写代码如下：

 

 

真机同步测试结果，发现光盘可以转动，滑块也随音乐滑动，但是不能设置滑块拖拉进度

4.实现滑块拖拉，让音乐可以任意播放

如果要实现拖拉，那么首先我们就要直到滑块拖拉监听事件是什么？由于滑块来自auicss所以我们可以参考auicss中拖拉监听代码：

$aui.range()方法可以实时监听滑块的拖拉，拖拉时候会回调方法在ret当中，ret表示当前被拖拉range对象中的value

由于我们需要设置滑块的进度和音乐同步，那么我们就需要使用netAudio的setProgress方法，其方法如下:

 

 

 

编写代码如下:

 

 

 

5.实现音乐暂停和开始播放功能

编写代码让音乐暂停（滑块和光盘暂停）

 

 

在停止播放按钮中进入onclick事件触发fnPause()

 

 

在开始播放按钮中进入onclick事件触发fnStart()

 

 

真机同步进行测试,以上的代码看似把音乐播放的功能实现了,但是不够完善,因为我们还有一个返回的功能,返回时应该清除音乐的播放和停止光盘的转动(这样做可以有效节约用户手机中电源和内存开销),编写和完善goback方法如下:

 

 

问题在于我们现在,我们现在播放的音乐是固定的音乐,正常来说我们应该从数据库中把音乐读取出来然后让用户选择播放.

 

十三.列表渲染技术(VeuJs来实现)

1.什么是列表渲染

在前端开发当中,我们经常需要读取数据到静态页面当中,这时避免不了要循环html中某些元素,例如li表情和tr标签,因此Js框架就为我们提供列表渲染的技术手段.

2.使用Jquery实现列表渲染(有缺点)

 

 

测试如下:

 

 

如果当前需要渲染是table标签,那么我们就需要修改以上代码:

 

 

jQuery的列表渲染技术不能实现html元素和数据分离,因此VueJs就应运而生

 

 

 

3.VeuJs的简介

这个框架是一种数据绑定的技术,被称为渐进式框架,这个框架提供多种列表渲染的手段,并且实现数据和html分离,其中文支持网站地址如下:

https://cn.vuejs.org/

 

4.VeuJs的列表渲染手段

v-for渲染是使用<template>标签实现技术,其主要方法在于声明VueJs的渲染对象

构造方法有两个参数:

el : 表示要渲染的html元素对象

data: 表示要渲染数据列表,data也是Json的对象,属性只有items一个

 

编写示例代码1如下:

 

 

 

 

编写示例代码2绑定事件渲染如下:

 

 

 

 

5.在app项目中使用vueJs实现音乐列表渲染(html/sq.html)

第1步:把vue.min.js文件复制到script目录当中

 

 

 

第2步:上传一些素材图片到服务器当中,然后再html/sq.html中编写代码如下:

 

 

 

 

十四.使用thinkphp开发app的api接口

1.设计数据库fjgcw和数据库表music

 

 

 

 

2.在thinkphp的App/Common/Conf/config.php当中配置数据库信息如下:

 

 

 

3.建立uploads目录和编写添加音乐的html模板

 

 

 

 

 

4.建立Music控制器并且定义add和addMusic的action

定义add方法显示模板

 

 

 

定义addMusic方法,上传并添加数据到数据库表中(music)

 

 

 

 

 

 

5.建立音乐的后台管理列表

 

 

 

 

6.编写api接口使用apiController进行编写

apiCloud的ajax不同于网页中ajax,网页中的ajax请求是http请求,在apiCloud的ajax请求其实是socket的请求.socket是由apicloud官方编写内置网络请求,使用方式跟普通网页请求一致,所以我们编写的接口一般就要返回json数据.

 

 

测试结果如下所示:

 

 

7.在html/sq.html页面使用ApiAjaxLoad方法加载数据到VeuJs中

ApiAjaxLoad方法是auicss框架提供的方法,其依赖于VeuJs框架,所以VeuJs必须在该方法之前就要引入

 

 

编写加载代码如下:

 

 

真机同步后,我们发觉数据可以正常加载,但无法下拉刷新,因为在下拉刷新时候需要更新app的头部信息:

 

 

发觉加入相关的方法可以实现下拉刷新,然而排序有问题,所以我们需要更新我们的api接口

 

 

在app代码修改代码如下

 

 

 

 

8.app中页面数据传递

在html/sq.html中编写js代码如下:

 

 

在sq.html的布局当中使用列表渲染绑定这2个参数

 

 

 

9.在win_music.html中接收传递数据

在win_music.html当中的头部,修改代码接收歌曲名称:

 

 

在js代码中编写代码如下:

 

 

在js代码当中netAudio的play中接收path参数

 

 

 

10.分析ApiAjaxLoad方法和setRefreshHeaderInfo方法

ApiAjaxLoad方法

 

 

 

 

setRefreshHeaderInfo方法

 

 

 

11.在thinkphp当中实现删除曲目功能

 

 

删除数据库中数据,通过下拉刷新也能更新app中数据

 

12.在thinkphp当中实现信息的编辑功能

建立修改的表单模板如下:

 

 

 

编写updateMusic方法如下:

 

 

13.在thinkphp当中实现数据的信息编辑

编写editMusic方法如下:

 

 

发觉下拉刷新可以更新编辑后的信息

14.在thinkphp当中实现图片的更新

建立更新图片的表单

 

 

 

 

编写updatePic方法如下:

 

 

编写editPic方法如下:

 

 

 

十五.使用apiCloud的自定义loader实现启动页面

第1步:把svn代码提交到云端(apiCloud的云端)

 

 

第2步:进入控制台界面选择端设置上传logo和启动页

 

 

 

 

第3步:在模块当中选择自定义loader

 

 

第4步:编译andorid版本的自定义loader

 

 

完成编译后,必须记住当前的版本信息

 

 

第5步:下载编译loader命名为load.apk文件

 

 

第6步:在sublime Text3当中打开config.xml文件,记住当前的id

 

 

第7步:在指定的路径当中,建立目录

 

 

 

第8步:在建立的id目录中,拖入load.apk和建立load.conf

 

 

第9步:打开load.conf文件编写以下信息:

参看文档如下:http://docs.apicloud.com/Dev-Tools/sublime-apicloud-plugin#a8

 

 

真机同步后发觉以下兼容问题,无需理会

 

 

 

如果 我们是免费的用户,启动页只能使用7天,7天后,那么启动就会报警