一. 原生App和WebApp的比较
-
原生(Native)App指：
iOS: Object-C swift
Android: java -
webApp指
使用HTML5编写的移动Web应用，一个webapp几乎可以不加修改的运行在PC/Android/iOS等。
优势：一套代码到处运行
劣势：某些底层功能缺失，运行速度不如原生的App
二. 使用eclipse创建安卓应用并安装到手机
1. 前提
1）保证“我的电脑”中可以看到我的手机
2）在安卓系统-》设置-》开发者选项-》启用USB调试
2. Android开发环境的搭建
1） 下载并安装java程序的运行环境-JDK
保证在命令行中输入java.exe可以运行
2）下载并解压缩Android应用的开发环境-ADT(AndroidDeveloperTools)
3) 启动ADT: eclipse/eclipse.exe
4) 创建Android应用程序(创建应用时选择API19)，选择自定义图标，定制窗口中的内容，安装到手机
3. Android应用何设置一个全屏显示的窗口
修改项目清单文件 AndroidManifest.xml
<application android:theme="@android:style/Theme.NoTitleBar.FullScreen">
三. 把HTML5应用打包到Android手机中，创建一个HyBridApp,
1. 混合app,像原生app一样有图标,点开后呈现一个原生app的窗口(成为activity)；
此窗口中只有一个组件-一个浏览器内核(没有地址栏),可以限定此浏览器内核只显示特定的网页
2. 创建webView组件-用于显示网页内容(即浏览器的核心)
//创建浏览器核心对象
WebView wv = new WebView(this);
//窗体中体检webview组件
this.setContentView(wv);
注意： 只留一个oncreate方法，其他都删掉
3. 使用webView加载APK文件中打包好的本地网页
//出于安全考虑，webview默认禁用了js,必须要启用
wv.getSettings().setJavaScriptEnabled(true);
//加载本地的html文件
wv.loadUrl("file:///android_asset/hybrid.html");
所有的HTML/css/js都必须保存Android项目的assets目录下
4. 使用webview加载web服务器上的网页
//获取到网络使用权限
<uses-permission android:name="android.permission.INTERNET"/>
wv.loadUrl("http:www.baidu.com");
在这说一下，使用eclipse会存在一个读取本地文件数据的跨域问题，在eclipse里面比较难解决，所以最好还是放在本地服务器上面，使用ip地址访问跨域解决，另外还推荐一种，使用hbuilder打包app，可以省一点事，会帮你解决跨域的问题。
四. 框架整理
1. jQuery是一个js函数库，简化了DOM操作，本质与DOM相同
2. jQueryUI是一个HTML组件库，丰富了HTML功能
3. BootStrap是一个HTML/CSS/JS框架，简化了响应式网页的编写，提供了CSSReset+HTML组件
4. Google AngularJS是一个JS框架，改变了网页的编写方式，适用于以数据操作为主的SPA应用
5. jQueryMobile是一个HTML组件库，适用于App的开发
五. jQueryMobile
1. jQuery Mobile is a HTML5-based user interface system designed to make responsive web sites and apps that are accessible on all smartphone, tablet and desktop devices.
2. JQM主要分为四部分：
页面&导航
CSS框架
组件
表单控件
3 使用JQM的步骤
1） 项目中引入jquery1.8+版本
2) 项目创建jqm目录，引入jqm必需资源文件
jquery-mobile.css
jquery-mobile.js
images/...
3) 创建html文件，引入必需的css和js,并设置viewport
<meta name="viewport" content="width=device-width,initial-scale=1>
4) body中data-role="page"元素
注意： jqm的html文件中，body中必须至少有一个page，若用户未提供，jqm自动添加
body中可以声明多个page,但默认只有第一个可以显示
jqm中的所有的网页内容不能直接至于body中，必须至于page中
jqm中的所有样式都是通过预定义class来设置的，开发者可以指定元素的class,也可以为元素指定data-*扩展属性来实现让jqm添加class的功能
一. JQueryMobile
1. jQuery Mobile is a HTML5-based user interface system designed to make responsive web sites and apps that are accessible on all smartphone, tablet and desktop devices.
2. JQM主要分为四部分：
页面&导航
CSS框架
组件
表单控件
3 使用JQM的步骤
1） 项目中引入jquery1.8+版本
2) 项目创建jqm目录，引入jqm必需资源文件
jquery-mobile.css
jquery-mobile.js
images/...
3) 创建html文件，引入必需的css和js,并设置viewport
<meta name="viewport" content="width=device-width,initial-scale=1>
4) body中data-role="page"元素
注意： jqm的html文件中，body中必须至少有一个page，若用户未提供，jqm自动添加
body中可以声明多个page,但默认只有第一个可以显示
jqm中的所有的网页内容不能直接至于body中，必须至于page中
jqm中的所有样式都是通过预定义class来设置的，开发者可以指定元素的class,也可以为元素指定data-*扩展属性来实现让jqm添加class的功能
二. jqueryMobile-page跳转及过场动画
页面跳转可以使用a/button/input等，推荐使用a-会自动添加过场动画
可以跳转到外部的完整HTML页面；也可以跳转到当前HTML中的另一个page,如
1)跳转到外部完整的HTML页面
<a href="xx.html">
2)跳转到当前HTML中的另一个page
<a href="#pageID">
3) 已模态框形式打开另一个page
<a href="#pageID" data-rel="dialog">
-
JQM为页面切换添加了非常丰富的过渡动画，使用方法
<a href="目标页面" data-transition="动画效果名称">
可用的动画效果有：
fade:默认动画
pop:弹出动画
slide:滑动动画
slideup:向上滑动动画
trun:翻转动画
flip:翻转动画
flow:流动动画
none:无动画
三. jqueryMobile-按钮
可以使用A.button.input元素实现按钮的样式
可以使用data-role="button"属性实现按钮样式，也可以指定class实现按钮的样式，如ui-btn ui-corner-all ui-shadow
按钮默认是块级显示，可以使用ui-btn-inline实现行内按钮
按钮上可以有文字和图标，若存在图标，必须指定与文字的位置关系,可选值
btn-icon-left
btn-icon-right
btn-icon-bottom
btn-icon-top
设置纯图标的话，不能在设置图片的位置
创建带图标的按钮，图标功能：后退，前进，刷新，配置，用户，定位，主页，对勾....
- 按钮可以放到page的header里
header中的第一个按钮默认处于左侧，第二个按钮处于右侧，一般只放两个
<div data-role="header">
<a href="#">按钮</a> 默认就是按钮效果
</div>
四. jqueryMobile-导航条
1. 基本结构
<div data-role="navbar">
<ul>
<li><a href="#"></a>
</ul>
</div>
2. 注意
导航条中一般最多只能有五个项目，超过5个会在一行中显示2个
导航条可以出现在page的Header/Main/Footer
处于Header和Footer中的navbar默认会占满整行，并和标题字错开
五. jqueryMobile-load加载器
显示加载器： $.mobile.loading("show");
取消加载器：$.mobile.loading("hidden");
六. jqueryMobile-panel(面板)
1) 面板在目前版本的jqp中只能放在page中，header之前和footer之后
<div data-role="page">
<div data-role="panel" id="p1"></div>
<div data-role="header"></div>
<div data-role="body">
<a href="#面板ID">打开面板</a>
</div>
<div data-role="footer"></div>
<div data-role="panel" id="p1"></div>
</div>
2) 面板组件可以指定出现位置和打开方式
data-position="left/right"
data-display = "reveal/overlay/push"
<div data-role="collapsible">
<h3>标题字</h3>
<div>折叠的内容</div>
</div>
