移动端开发(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>