一. 原生App和WebApp的比較

1. 原生(Native)App指：

   iOS: Object-C swift
   Android: java

2. webApp指

   使用HTML5編寫的移動(dòng)Web應(yīng)用，一個(gè)webapp幾乎可以不加修改的運(yùn)行在PC/Android/iOS等。

   優(yōu)勢(shì)：一套代碼到處運(yùn)行
   劣勢(shì)：某些底層功能缺失，運(yùn)行速度不如原生的App

二. 使用eclipse創(chuàng)建安卓應(yīng)用并安裝到手機(jī)

1. 前提

    1）保證“我的電腦”中可以看到我的手機(jī)
    2）在安卓系統(tǒng)-》設(shè)置-》開(kāi)發(fā)者選項(xiàng)-》啟用USB調(diào)試
   

2. Android開(kāi)發(fā)環(huán)境的搭建

    1） 下載并安裝java程序的運(yùn)行環(huán)境-JDK
   
           保證在命令行中輸入java.exe可以運(yùn)行
   
    2）下載并解壓縮Android應(yīng)用的開(kāi)發(fā)環(huán)境-ADT(AndroidDeveloperTools)
   
    3) 啟動(dòng)ADT: eclipse/eclipse.exe
   
    4) 創(chuàng)建Android應(yīng)用程序(創(chuàng)建應(yīng)用時(shí)選擇API19)，選擇自定義圖標(biāo)，定制窗口中的內(nèi)容，安裝到手機(jī)
   

3. Android應(yīng)用何設(shè)置一個(gè)全屏顯示的窗口

    修改項(xiàng)目清單文件 AndroidManifest.xml
   
      <application android:theme="@android:style/Theme.NoTitleBar.FullScreen">
   

三. 把HTML5應(yīng)用打包到Android手機(jī)中，創(chuàng)建一個(gè)HyBridApp,

1. 混合app,像原生app一樣有圖標(biāo),點(diǎn)開(kāi)后呈現(xiàn)一個(gè)原生app的窗口(成為activity)；此窗口中只有一個(gè)組件-一個(gè)瀏覽器內(nèi)核(沒(méi)有地址欄),可以限定此瀏覽器內(nèi)核只顯示特定的網(wǎng)頁(yè)

2. 創(chuàng)建webView組件-用于顯示網(wǎng)頁(yè)內(nèi)容(即瀏覽器的核心)

     //創(chuàng)建瀏覽器核心對(duì)象
     WebView wv = new WebView(this);
     //窗體中體檢webview組件
     this.setContentView(wv);
   

注意： 只留一個(gè)oncreate方法，其他都刪掉

3. 使用webView加載APK文件中打包好的本地網(wǎng)頁(yè)

      //出于安全考慮，webview默認(rèn)禁用了js,必須要啟用
      wv.getSettings().setJavaScriptEnabled(true);
      
      //加載本地的html文件
      wv.loadUrl("file:///android_asset/hybrid.html");
   
      所有的HTML/css/js都必須保存Android項(xiàng)目的assets目錄下
   

4. 使用webview加載web服務(wù)器上的網(wǎng)頁(yè)

       //獲取到網(wǎng)絡(luò)使用權(quán)限
       <uses-permission android:name="android.permission.INTERNET"/>
       wv.loadUrl("http:www.baidu.com");
   

四. 框架整理

1. jQuery是一個(gè)js函數(shù)庫(kù)，簡(jiǎn)化了DOM操作，本質(zhì)與DOM相同

2. jQueryUI是一個(gè)HTML組件庫(kù)，豐富了HTML功能

3. BootStrap是一個(gè)HTML/CSS/JS框架，簡(jiǎn)化了響應(yīng)式網(wǎng)頁(yè)的編寫，提供了CSSReset+HTML組件

4. Google AngularJS是一個(gè)JS框架，改變了網(wǎng)頁(yè)的編寫方式，適用于以數(shù)據(jù)操作為主的SPA應(yīng)用

5. jQueryMobile是一個(gè)HTML組件庫(kù)，適用于App的開(kāi)發(fā)

五. 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主要分為四部分：

     頁(yè)面&導(dǎo)航
     CSS框架
     組件
     表單控件
   

3 使用JQM的步驟

  1） 項(xiàng)目中引入jquery1.8+版本

  2)  項(xiàng)目創(chuàng)建jqm目錄，引入jqm必需資源文件

        jquery-mobile.css
        jquery-mobile.js
        images/...

  3)  創(chuàng)建html文件，引入必需的css和js,并設(shè)置viewport

         <meta name="viewport" content="width=device-width,initial-scale=1>

  4) body中data-role="page"元素

注意：

• jqm的html文件中，body中必須至少有一個(gè)page，若用戶未提供，jqm自動(dòng)添加
• body中可以聲明多個(gè)page,但默認(rèn)只有第一個(gè)可以顯示
• jqm中的所有的網(wǎng)頁(yè)內(nèi)容不能直接至于body中，必須至于page中
• jqm中的所有樣式都是通過(guò)預(yù)定義class來(lái)設(shè)置的，開(kāi)發(fā)者可以指定元素的class,也可以為元素指定data-*擴(kuò)展屬性來(lái)實(shí)現(xiàn)讓jqm添加class的功能