一、App开发概述

1、什么是APP

就是苹果、安卓手机上装的软件/应用，如：微信、QQ、陌陌、王者荣耀等

2、手机软件开发的3种模式

1）Web App

说明：内嵌浏览器，打开指定网页

优点：快

缺点：用户体验度低，功能少

2）Native App（原生开发）

说明：就是安卓攻城狮开发安装应用，ios攻城狮开发苹果应用

优点：用户体验度高，可以使用n多功能

缺点：成本大，耗时间

3）Hybrid App（混合模式移动应用）

说明：就是直接写html + css + js就可以同时开发安卓和苹果APP

优点：成本低 + 功能强大

︴效果（广场舞）

二、使用APICloud框架开发HyBrid App前期准备

1、APICloud介绍

• 说明：APICloud就是开发移动app平台
• 特点：

1. 写一套代码，可以同时在 苹果 和 安卓手机上使用
2. 使用js代码就可以轻松调用手机功能，如：摄像头、手机灯等功能。

2、注册APICloud平台

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

创建应用（app）

5、使用svn获取代码

• 步骤1：在桌面创建一个【广场舞】文件夹
• 步骤2：进入【广场舞】文件夹右击检出

三、【预览】安装海马玩/天天模拟器软件，用于模拟安卓手机，随时看到开发效果

1、下载

• 下载地址：http://droid4x.haimawan.com/，
• 下载地址：http://www.ttmnq.com/

安装（双击下一步安装）

开发完毕生成app软件

海马模拟器安装app软件并预览

更新app后重新编译安装

• 需求：将标题更新为【php@itcast】
• 操作：

步骤1：打开【C:\Users\赵小康\Desktop\广场舞\html\main.html】文件进行开发

步骤2：提交apicloud平台

步骤3：云编译（打包）

步骤4：下载到本地安装

四、【预览】配置开发工具与模拟器

1、安装Sublime text3（傻瓜式下一步安装）

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

————————-

创建桌面快捷方式

2、汉化Sublime text3

3、Sublime集成预览功能

1）获取APICloud插件

2）配置Sublime Text3

———————————-

如何检测是否配置成功，看下图打开项目鼠标右击查看是否有（真机运行选项）

3）打开app项目（注：svn检出目录）

4）使用Sublime+模拟器+真机同步显示App

︴验证：真机同步（更新app同步预览）

步骤1：打开index.php修改内容

步骤2：右击真机同步即可查看效果（注：不需要提交代码）

五、手机App前端界面设计

Logo与引导页的设计（云端）

使用自定义loader实现真机同步

http://docs.apicloud.com/

1）上传本地的代码的到云端

2）编译Android自定义loader

3）下载并重命名

步骤1：下载

步骤2：更名

4）移动到指定目录中

步骤1：创建文件夹

步骤2：移动

5）创建配置文件

步骤1：创建文件

步骤2：写入固定格式数据

6）真机同步测试

六、APP框架分析

1、目录结构分析

2、App代码分析（从index.html入手）

<meta name=”viewport” content=”maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,initial-scale=1.0,width=device-width”/>

width – viewport的宽度 height – viewport的高度

initial-scale – 初始的缩放比例

minimum-scale – 允许用户缩放到的最小比例

maximum-scale – 允许用户缩放到的最大比例

user-scalable – 用户是否可以手动缩放

<meta name=”format-detection” content=”telephone=no,email=no,date=no,address=no”>

让手机设备不直接识别手机号码、邮箱、日期以及address地址，也就是说不会直接有下划线

3、核心代码分析（针对Javascript）

4、App整体框架原理图

5、分析html/main.html核心代码

七、移动前段框架（AUICSS）

1、什么是AUICSS

就是前段框架，专门为apicloud而生，同bootstrap框架只要复制其规定的带css或者js的div就可以快速搭建一个网站。

下载AUICSS

网址：http://www.auicss.com/

3、使用AUICSS框架（前端框架）

步骤1：打开auicss框架拖拽【css】【js】【html】【image】文件夹到本地的广场舞文件中

步骤2：替换入口文件

步骤3：打开sublime右击真机同步

4、卡片列表

1）效果

2）index.html

<!doctype html>

<html>

<head>

<meta charset=”utf-8″>

<meta name=”viewport” content=”maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0″/>

<meta name=”format-detection” content=”telephone=no,email=no,date=no,address=no”>

<link rel=”stylesheet” type=”text/css” href=”./css/aui.css” />

</head>

<body>

哈啊哈哈哈哈

</body>

<script type=”text/javascript” src=”./script/api.js”></script>

<script type=”text/javascript”>

apiready = function(){

api.openWin({

name: ‘随意你开心就好’,

url: ‘./html/1.html’,

pageParam: {

name: ‘test’

}

});

}

</script>

</html>

3）1.html

<!DOCTYPE HTML>

<html>

<head>

<meta charset=”utf-8″>

<meta name=”viewport” content=”maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0″/>

<meta name=”format-detection” content=”telephone=no,email=no,date=no,address=no”>

<title></title>

<link rel=”stylesheet” type=”text/css” href=”../css/aui.css” />

</head>

<body>

<section class=”aui-content”>

<div class=”aui-card-list”>

<div class=”aui-card-list-header aui-card-list-user aui-border-b”>

<div class=”aui-card-list-user-avatar”>

<img src=”../image/demo4.png” class=”aui-img-round” />

</div>

<div class=”aui-card-list-user-name”>

<div>AUI</div>

<small>1天前</small>

</div>

<div class=”aui-card-list-user-info”>北京朝阳</div>

</div>

<div class=”aui-card-list-content-padded”>

<img src=”../image/l2.png” />

</div>

<div class=”aui-card-list-footer aui-border-t”>

<div><i class=”aui-iconfont aui-icon-note”></i> 666</div>

<div><i class=”aui-iconfont aui-icon-laud”></i> 888</div>

<div><i class=”aui-iconfont aui-icon-star”></i> 888</div>

</div>

<div class=”aui-card-list-header aui-card-list-user aui-border-b”>

<div class=”aui-card-list-user-avatar”>

<img src=”../image/demo4.png” class=”aui-img-round” />

</div>

<div class=”aui-card-list-user-name”>

<div>AUI</div>

<small>1天前</small>

</div>

<div class=”aui-card-list-user-info”>北京朝阳</div>

</div>

<div class=”aui-card-list-content-padded”>

<img src=”../image/l2.png” />

</div>

<div class=”aui-card-list-footer aui-border-t”>

<div><i class=”aui-iconfont aui-icon-note”></i> 666</div>

<div><i class=”aui-iconfont aui-icon-laud”></i> 888</div>

<div><i class=”aui-iconfont aui-icon-star”></i> 888</div>

</div>

<div class=”aui-card-list-header aui-card-list-user aui-border-b”>

<div class=”aui-card-list-user-avatar”>

<img src=”../image/demo4.png” class=”aui-img-round” />

</div>

<div class=”aui-card-list-user-name”>

<div>AUI</div>

<small>1天前</small>

</div>

<div class=”aui-card-list-user-info”>北京朝阳</div>

</div>

<div class=”aui-card-list-content-padded”>

<img src=”../image/l2.png” />

</div>

<div class=”aui-card-list-footer aui-border-t”>

<div><i class=”aui-iconfont aui-icon-note”></i> 666</div>

<div><i class=”aui-iconfont aui-icon-laud”></i> 888</div>

<div><i class=”aui-iconfont aui-icon-star”></i> 888</div>

</div>

</div>

</section>

</body>

</html>

八、实战案例之广场舞App静态页面