一. 原生App和WebApp的比较
-
原生(Native)App指:
iOS: Object-C swift
Android: java -
webApp指
使用HTML5编写的移动Web应用,一个webapp几乎可以不加修改的运行在PC/Android/iOS等。
优势:一套代码到处运行
劣势:某些底层功能缺失,运行速度不如原生的App
二. 使用eclipse创建安卓应用并安装到手机
-
前提
1)保证“我的电脑”中可以看到我的手机 2)在安卓系统-》设置-》开发者选项-》启用USB调试
-
Android开发环境的搭建
1) 下载并安装java程序的运行环境-JDK 保证在命令行中输入java.exe可以运行 2)下载并解压缩Android应用的开发环境-ADT(AndroidDeveloperTools) 3) 启动ADT: eclipse/eclipse.exe 4) 创建Android应用程序(创建应用时选择API19),选择自定义图标,定制窗口中的内容,安装到手机
-
Android应用何设置一个全屏显示的窗口
修改项目清单文件 AndroidManifest.xml <application android:theme="@android:style/Theme.NoTitleBar.FullScreen">
三. 把HTML5应用打包到Android手机中,创建一个HyBridApp,
混合app,像原生app一样有图标,点开后呈现一个原生app的窗口(成为activity);此窗口中只有一个组件-一个浏览器内核(没有地址栏),可以限定此浏览器内核只显示特定的网页
-
创建webView组件-用于显示网页内容(即浏览器的核心)
//创建浏览器核心对象 WebView wv = new WebView(this); //窗体中体检webview组件 this.setContentView(wv);
注意: 只留一个oncreate方法,其他都删掉
-
使用webView加载APK文件中打包好的本地网页
//出于安全考虑,webview默认禁用了js,必须要启用 wv.getSettings().setJavaScriptEnabled(true); //加载本地的html文件 wv.loadUrl("file:///android_asset/hybrid.html"); 所有的HTML/css/js都必须保存Android项目的assets目录下
-
使用webview加载web服务器上的网页
//获取到网络使用权限 <uses-permission android:name="android.permission.INTERNET"/> wv.loadUrl("http:www.baidu.com");
四. 框架整理
jQuery是一个js函数库,简化了DOM操作,本质与DOM相同
jQueryUI是一个HTML组件库,丰富了HTML功能
BootStrap是一个HTML/CSS/JS框架,简化了响应式网页的编写,提供了CSSReset+HTML组件
Google AngularJS是一个JS框架,改变了网页的编写方式,适用于以数据操作为主的SPA应用
jQueryMobile是一个HTML组件库,适用于App的开发
五. jQueryMobile
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.
-
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的功能