一. 原生App和WebApp的比較

   1. 原生(Native)App指： 

       iOS: Object-C swift
       Android: java

   2. 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");

四. 框架整理

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