一. 原生App和WebApp的比較
-
原生(Native)App指：
iOS: Object-C swift
Android: java -
webApp指
使用HTML5編寫的移動Web應用，一個webapp幾乎可以不加修改的運行在PC/Android/iOS等。
優(yōu)勢：一套代碼到處運行
劣勢：某些底層功能缺失，運行速度不如原生的App
二. 使用eclipse創(chuàng)建安卓應用并安裝到手機
1. 前提
1）保證“我的電腦”中可以看到我的手機
2）在安卓系統(tǒng)-》設置-》開發(fā)者選項-》啟用USB調(diào)試
2. Android開發(fā)環(huán)境的搭建
1） 下載并安裝java程序的運行環(huán)境-JDK
保證在命令行中輸入java.exe可以運行
2）下載并解壓縮Android應用的開發(fā)環(huán)境-ADT(AndroidDeveloperTools)
3) 啟動ADT: eclipse/eclipse.exe
4) 創(chuàng)建Android應用程序(創(chuàng)建應用時選擇API19)，選擇自定義圖標，定制窗口中的內(nèi)容，安裝到手機
3. Android應用何設置一個全屏顯示的窗口
修改項目清單文件 AndroidManifest.xml
<application android:theme="@android:style/Theme.NoTitleBar.FullScreen">
三. 把HTML5應用打包到Android手機中，創(chuàng)建一個HyBridApp,
1. 混合app,像原生app一樣有圖標,點開后呈現(xiàn)一個原生app的窗口(成為activity)；
此窗口中只有一個組件-一個瀏覽器內(nèi)核(沒有地址欄),可以限定此瀏覽器內(nèi)核只顯示特定的網(wǎng)頁
2. 創(chuàng)建webView組件-用于顯示網(wǎng)頁內(nèi)容(即瀏覽器的核心)
//創(chuàng)建瀏覽器核心對象
WebView wv = new WebView(this);
//窗體中體檢webview組件
this.setContentView(wv);
注意： 只留一個oncreate方法，其他都刪掉
3. 使用webView加載APK文件中打包好的本地網(wǎng)頁
//出于安全考慮，webview默認禁用了js,必須要啟用
wv.getSettings().setJavaScriptEnabled(true);
//加載本地的html文件
wv.loadUrl("file:///android_asset/hybrid.html");
所有的HTML/css/js都必須保存Android項目的assets目錄下
4. 使用webview加載web服務器上的網(wǎng)頁
//獲取到網(wǎng)絡使用權(quán)限
<uses-permission android:name="android.permission.INTERNET"/>
wv.loadUrl("http:www.baidu.com");
在這說一下，使用eclipse會存在一個讀取本地文件數(shù)據(jù)的跨域問題，在eclipse里面比較難解決，所以最好還是放在本地服務器上面，使用ip地址訪問跨域解決，另外還推薦一種，使用hbuilder打包app，可以省一點事，會幫你解決跨域的問題。
四. 框架整理
1. jQuery是一個js函數(shù)庫，簡化了DOM操作，本質(zhì)與DOM相同
2. jQueryUI是一個HTML組件庫，豐富了HTML功能
3. BootStrap是一個HTML/CSS/JS框架，簡化了響應式網(wǎng)頁的編寫，提供了CSSReset+HTML組件
4. Google AngularJS是一個JS框架，改變了網(wǎng)頁的編寫方式，適用于以數(shù)據(jù)操作為主的SPA應用
5. jQueryMobile是一個HTML組件庫，適用于App的開發(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主要分為四部分：
頁面&導航
CSS框架
組件
表單控件
3 使用JQM的步驟
1） 項目中引入jquery1.8+版本
2) 項目創(chuàng)建jqm目錄，引入jqm必需資源文件
jquery-mobile.css
jquery-mobile.js
images/...
3) 創(chuàng)建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中的所有的網(wǎng)頁內(nèi)容不能直接至于body中，必須至于page中
jqm中的所有樣式都是通過預定義class來設置的，開發(fā)者可以指定元素的class,也可以為元素指定data-*擴展屬性來實現(xiàn)讓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) 項目創(chuàng)建jqm目錄，引入jqm必需資源文件
jquery-mobile.css
jquery-mobile.js
images/...
3) 創(chuàng)建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中的所有的網(wǎng)頁內(nèi)容不能直接至于body中，必須至于page中
jqm中的所有樣式都是通過預定義class來設置的，開發(fā)者可以指定元素的class,也可以為元素指定data-*擴展屬性來實現(xiàn)讓jqm添加class的功能
二. jqueryMobile-page跳轉(zhuǎn)及過場動畫
頁面跳轉(zhuǎn)可以使用a/button/input等，推薦使用a-會自動添加過場動畫
可以跳轉(zhuǎn)到外部的完整HTML頁面；也可以跳轉(zhuǎn)到當前HTML中的另一個page,如
1)跳轉(zhuǎn)到外部完整的HTML頁面
<a href="xx.html">
2)跳轉(zhuǎn)到當前HTML中的另一個page
<a href="#pageID">
3) 已模態(tài)框形式打開另一個page
<a href="#pageID" data-rel="dialog">
-
JQM為頁面切換添加了非常豐富的過渡動畫，使用方法
<a href="目標頁面" data-transition="動畫效果名稱">
可用的動畫效果有：
fade:默認動畫
pop:彈出動畫
slide:滑動動畫
slideup:向上滑動動畫
trun:翻轉(zhuǎn)動畫
flip:翻轉(zhuǎn)動畫
flow:流動動畫
none:無動畫
三. jqueryMobile-按鈕
可以使用A.button.input元素實現(xiàn)按鈕的樣式
可以使用data-role="button"屬性實現(xiàn)按鈕樣式，也可以指定class實現(xiàn)按鈕的樣式，如ui-btn ui-corner-all ui-shadow
按鈕默認是塊級顯示，可以使用ui-btn-inline實現(xiàn)行內(nèi)按鈕
按鈕上可以有文字和圖標，若存在圖標，必須指定與文字的位置關(guān)系,可選值
btn-icon-left
btn-icon-right
btn-icon-bottom
btn-icon-top
設置純圖標的話，不能在設置圖片的位置
創(chuàng)建帶圖標的按鈕，圖標功能：后退，前進，刷新，配置，用戶，定位，主頁，對勾....
- 按鈕可以放到page的header里
header中的第一個按鈕默認處于左側(cè)，第二個按鈕處于右側(cè)，一般只放兩個
<div data-role="header">
<a href="#">按鈕</a> 默認就是按鈕效果
</div>
四. jqueryMobile-導航條
1. 基本結(jié)構(gòu)
<div data-role="navbar">
<ul>
<li><a href="#"></a>
</ul>
</div>
2. 注意
導航條中一般最多只能有五個項目，超過5個會在一行中顯示2個
導航條可以出現(xiàn)在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) 面板組件可以指定出現(xiàn)位置和打開方式
data-position="left/right"
data-display = "reveal/overlay/push"
<div data-role="collapsible">
<h3>標題字</h3>
<div>折疊的內(nèi)容</div>
</div>
