移动端开发（HyBrid App）
一、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平台
- 特点：
- 写一套代码，可以同时在 苹果 和 安卓手机上使用
- 使用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实现真机同步
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
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>
