WebApp的设计

一、原生App和WebApp的区别

1、Native App开发

Native App开发即我们所称的传统APP开发模式（原生APP开发模式），该开发针对IOS、Android等不同的手机操作系统要采用不同的语言和框架进行开发，该模式通常是由“云服务器数据+APP应用客户端”两部份构成，APP应用所有的UI元素、数据内容、逻辑框架均安装在手机终端上。

2、Web App开发

Web App开发即是一种框架型APP开发模式（HTML5 APP 框架开发模式），该开发具有跨平台的优势，该模式通常由“HTML5云网站+APP应用客户端”两部份构成，APP应用客户端只需安装应用的框架部份，而应用的数据则是每次打开APP的时候，去云端取数据呈现给手机用户。

二、使用eclipse创建安卓应用并安装到手机

1、Android开发环境的搭建

1） 下载并安装java程序的运行环境-JDK
   
     保证在命令行中输入java.exe可以运行

2）下载并解压缩Android应用的开发环境-ADT(AndroidDeveloperTools)

3) 启动ADT: eclipse/eclipse.exe

4) 创建Android应用程序(创建应用时选择API19)，选择自定义图标，定制窗口中的内容，安装到手机

2、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"/>

四. jQueryMobile

jQuery Mobile是一个基于HTML5的用户界面系统，旨在使所有智能手机，平板电脑和台式机设备上都能访问的响应式网站和应用。

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的功能