webapp1

一、HyBrid App概述

HyBrid App与Web App以及Native App的区别

① Web App开发

WebApp开发，严格来说并不是一个APP软件，只是一个Web型的微网站。

优点：开发时间短、兼容性强、方便系统移植。

缺点：必须有网络的支持，用户体验度相对较差,不能调用手机中例如摄像头,二维码扫描仪的模块。

在国内主要应用在:微信的公众号开发层面

② Native App开发

Native App开发，就是一个原生的APP软件，其主要是通过Java或Object-C来实现原生的手机APP软件。

优点：原生APP、用户体验度非常好、可以调用手机的底层组件。

缺点：开发时间长、兼容性差、必须要掌握Java或Object-C等编程语言。

③ Hybrid App开发

介于WebApp、Native这两者之间的APP，开发时间短、成本低，用户体验度好，可以调用手机的底层组件，方便移植，是目前以及未来APP开发的流程趋势,为app应用而生,不为app的底层而生。

这种开发的缺点:无法调用系统的底层,例如:控制系统的内存.所以如果你开发一款游戏

那么这种开发模式是无法帮你实现的.

 

二、HyBrid App开发前期准备

1、注册APICloud平台

官方网站：http://www.apicloud.com/

 

 

2、注册完毕后登录，进入开发控制台

 

 

3.创建应用(粉椒广场)

 

 

 

创建完后,其实apiCloud官方会默认给我们一些学习的示例代码,我们需要用svn把代码进行获取

4.使用svn获取粉椒广场舞的app示例代码

第1步:点击代码导航条进入代码获取模块

 

 

 

 

第2步:分别svn的地址,账号和密码

 

 

第3步:找1个app的开发目录,然后检出示例代码

 

 

 

 

 

如果第一次检出需要输入用户名和密码,输入过后,以后都可以省略这个步骤

 

5.使用apiCloud的官方云编译编译粉椒广场舞的app示例代码生成apk安装软件

第1步:选择编译的平台为android

 

 

 

 

第2步:编译完成后,就会出现二维码下载扫描和点击浏览下载链接

 

 

 

6.海马玩模拟器的地址

http://bbs.haimawan.com/forum.php?mod=viewthread&tid=49337&extra=page%3D1

 

 

安装海马玩只需下一步下一步就可以完成安装,打开海马玩模拟器,点击

 

 

 

 

点击apk安装选择我们要安装的示例app,选择打开就可以完成app的安装

 

 

 

如果希望知道以上的效果是如何实现的,我们就需要分析和学习示例代码,然后才能实现我们自己的自定义开发

 

 

 

三、配置开发工具与模拟器

1、Sublime text3

下载Sublime Text3，下载地址：http://www.sublimetext.com/3

2、绑定APICloud插件

下载地址：http://www.apicloud.com/

 

 

 

 

 

 

选择下载Windows版本，下载后，如下图所示：

 

 

 

解压插件包，如下图所示：

 

 

3、配置Sublime Text3

第1步:选择sublime的插件安装目录，如下所示:

 

 

 

 

第2步：把apicloud的插件复制的sublime text3的插件目录当中

 

 

 

第3步：选择app的实例代码目录作为app项目

 

 

第4步：检查插件是否可以被apiCloud的插件进行使用

 

 

 

 

四．分析广场舞核心(从index.html入手)

1.meta的分析

 

 

这是开发app必须设置的meta标签，该标签用于定义html的响应式布局模式，如果这个meta标签没有编写这app的ui界面无法实现响应式布局

 

 

关闭手机的自动识别功能，关闭自动识别电话号码(telephone),email,日期(date),地址识别(address),把他们全部设置为on,原因是有一些android手机（例如:三星和oppo）会认为如果你没有关闭自动识别的功能属于侵犯用户的手机隐私，因此无法在这些手机通过安装流程，但是如果只针对小米手机进行开发那么可以直接把这些识别设置yes

2.必须引导css文件和js文件

因为apiCloud的开发者是通过js来控制编译，在编译的过程中apiCloud官方会加载元素进去所以必须引导api.css的文件和api.js的文件,必须引入，否则无法通过编译

 

 

 

 

 

 

3.index.html的html结构

 

 

 

4.index.html的js代码详解

①apiready代码如下:

 

 

由于app的开发跟网页的开发是不一样的，因为app是在手机中运行，而网页是在浏览器中运行，因此手机的初始化不能使用window.load(),apicloud为了方便开发者做手机的初始化，所以他们建议做手机的初始化把初始化代码放在apiread的事件当中完成，所以apiread就相当于网页中windown.load

②$api对象

apiCloud官方要求引入api.js默认的情况下会有一个全局的对象叫$api对象，这个对象控制着app开发html所有的元素，如果要获取某一个元素作为对象可以使用以下的方法:

 

 

byId方法就相当于document.getElementById，但是由于我们开发app用apicloud所以不建议使用document.getElementById而建议使用$api.byId

③让app实现沉浸效果

 

 

沉浸效果必须在ios7的版本或者android4.4以上的版本才能实现

这段代码会自动判断是否可以让app的头部实现沉浸，如果开启这代码就会自动兼容实现，如果没有开启，那么所有app都不会实现沉浸效果

④app的通用开发架构模型

app的模型架构原理图:

 

 

使用$api.offset()获取头部对象的位置，其中h表示当前位置高度，w表示 当前位置的宽度

 

 

获取了frame（头部）的高度，然后定义式尾部的高度为30px

 

 

于是通过api的窗体高度（winHeight）减去头部的高度和尾部的高度得到主体的高度

 

 

获取完成主体的高度后，使用openFrame打开主体的页面放在<div id=main>的元素当中

 

 

openFrame中的参数name是代表打开的frame的名称，url是frame页面的位置，bounces表示是否可以启动弹动功能（如果设为true代表可以弹动，如果设为flase代表不可以弹动）

rect用于控制main的位置，一般不做修改

 

 

动态获取年份然后通过innerHTML把年分放到<span id=year>元素当中

 

5.html/main.html文件的详解

 

 

 

假设现在我们在html/main.html中修改Hello App的文字为粉椒广场舞app那么，app的页面（frame main）是否会发生改变呢?

 

 

app开发 的特点在于，网页是实时更新，而app必须更新一次就编译一次，那么如果我们希望在开发的时候，开到修改的效果，那么我们就需要使用apiCloud官方appLoader软件实现真机同步的测试功能。

6.使用真机同步功能查看示例代码的修改

 

 

真机同步后的结果如下,发觉在apploader当中修改的结果改变了

 

 

通过以上分析,可知入口文件index.html,app的头部和脚部是不变的,每一次进行修改都需要编译测试

 

五.使用auicss开发粉椒广场的前端

 

 

1.auicss的简介

auicss是一个专门用来开发apiCloud的前端css框架,它开发者叫做流浪男,它是一个爱好者开发的css前端框架,但是这个框架被apiCloud官方所承认,因此使用auicss开发apicloud是一个潮流.auicss的官方如下:

http://www.auicss.com/

 

建议使用auicss1.2.1版本

 

2.把auicss整合到app项目当中

第1步:下载auicss1.2.1版本,解压后如下所示:

 

 

第2步:把auicss的css目录和script目录下的所有文件,拷贝app项目中对应目录中

 

 

 

第3步:修改index.html的内容如下:

引入aui.css文件如下:

 

 

引导aui.js文件如下:

 

 

 

 

 

第4步:遵循找效果->查样式->复代码的原则来进行auicss的开发,首先我们可以测试一下auicss是否正常安装,我们可以测试auicss当中按钮是否可以套用样式

 

 

 

 

 

 

第5步:使用真机同步查看auicss的整合效果:

 

 

如果出现以上界面就代表auicss整合到app项目中成功了

 

 

六.开发app的流程

1.使用auicss设计index.html入口文件的头部

 

 

修改css如下:

 

 

 

2.使用auicss设计index.html入口文件的尾部切换栏

复制尾部切换栏的布局代码html如下:

 

 

添加并修改切换栏js代码如下

 

 

添加热门,神曲,活动和关于的html路径

 

 

 

3.设计热门的页面(html/remen.html)

引入aui.css文件和aui.js文件:

 

 

设计布局如下:

 

 

设计css代码如下:

 

 

 

 

真机同步测试结果:

 

 

 

3.使用aui的瀑布流效果完成音乐列表(html/sql.html)

 

设计布局如下:

 

 

 

设计js代码如下:

 

 

真机同步的测试效果:

 

 

 

 

 

 

4.使用auicss的图片缩略图列表设计活动页面(html/hd.html)

设计Html布局如下:

 

 

真机同步测试效果:

 

 

 

 

5.在html的当中画一个圆圈

 

 

测试结果如下所示:

 

 

 

6.设计关于页面(html/about.html)

设计html布局如下所示:

 

 

设计css代码如下:

 

 

真机同步测试效果如下:

 

 

七.设计音乐播放器页面

(html/win_music.html)

 

设计html布局如下:

 

 

定义css代码如下:

 

 

 

八．让光盘旋转起来（jQueryRotate）

 

第1步：把JQuery.js和JQueryRotate.js文件放到app的script目录中

 

 

第2步：在win_music.html页面中引导入文件

 

 

第3步:编写js代码让光盘旋转起来

 

 

 

九.使用apiCloud的openWin方法和closeWin方法

 

 

第1步：在html/sq.html当中实现openWin方法打开播放器

定义打开播放器页面事件

 

 

在瀑布流的li标签中绑定onclick方法如下:

 

 

真机同步测试效果，发觉可以打开win_music.html页面但无法关闭

 

第2步:在win_music.html实现closeWin方法

 

 

在头部的返回连接中触发goback事件

 

 

真机同步进行测试.至此app的前端页面就全部完成了，完成后应该如何形成apk文件呢？

 

十．使用svn上传app代码到云端进行apk编译

 

第1步：使用svn上传所有的代码

 

 

第2步:选择云编译，编译成功后，出现以下代码：

 

 

如果出现以下界面，并非技术问题，而是海马玩不兼容auicss的编译apk文件所造成的

 

 

真机测试就不会出现了，无需做任何的修改