一. 原生App和WebApp的比較
-
原生(Native)App指：
iOS: Object-C 或者 swift Android: java -
webApp指
使用HTML5編寫的移動Web應(yīng)用，一個(gè)webapp幾乎可以不加修改的運(yùn)行在PC/Android/iOS等。 優(yōu)勢：一套代碼到處運(yùn)行 劣勢：某些底層功能缺失，運(yùn)行速度不如原生的App
二. 使用eclipse創(chuàng)建安卓應(yīng)用并安裝到手機(jī)
1. 前提
1）保證“我的電腦”中可以看到我的手機(jī)
2）在安卓系統(tǒng)-》設(shè)置-》開發(fā)者選項(xiàng)-》啟用USB調(diào)試
2. Android開發(fā)環(huán)境的搭建
1） 下載并安裝java程序的運(yùn)行環(huán)境-JDK
保證在命令行中輸入java可以運(yùn)行
顯示java版本
2）下載并解壓縮Android應(yīng)用的開發(fā)環(huán)境-ADT(AndroidDeveloperTools)
3) 啟動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)開后呈現(xiàn)一個(gè)原生app的窗口(成為activity)；此窗口中只有一個(gè)組件-一個(gè)瀏覽器內(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);
注意： 只留一個(gè)oncreate方法，其他都刪掉
3. 使用webView加載APK文件中打包好的本地網(wǎng)頁
//出于安全考慮，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)頁
//獲取到網(wǎng)絡(luò)使用權(quán)限
<uses-permission android:name="android.permission.INTERNET"/>
wv.loadUrl("http:www.baidu.com");
5. 解決自動跳轉(zhuǎn)到手機(jī)瀏覽器問題
首先引入WebViewClient框架
wv.setWebViewClient(new WebViewClient(){
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
view.loadUrl(url);
return super.shouldOverrideUrlLoading(view, url);
}
});
四. 框架整理
1. jQuery是一個(gè)js函數(shù)庫，簡化了DOM操作，本質(zhì)與DOM相同
2. jQueryUI是一個(gè)HTML組件庫，豐富了HTML功能
3. BootStrap是一個(gè)HTML/CSS/JS框架，簡化了響應(yīng)式網(wǎng)頁的編寫，提供了CSSReset+HTML組件
4. Google AngularJS是一個(gè)JS框架，改變了網(wǎng)頁的編寫方式，適用于以數(shù)據(jù)操作為主的SPA應(yīng)用
5. jQueryMobile是一個(gè)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主要分為四部分：
頁面&導(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自動添加
body中可以聲明多個(gè)page,但默認(rèn)只有第一個(gè)可以顯示
jqm中的所有的網(wǎng)頁內(nèi)容不能直接至于body中，必須至于page中
jqm中的所有樣式都是通過預(yù)定義class來設(shè)置的，開發(fā)者可以指定元素的class,也可以為元素指定data-*擴(kuò)展屬性來實(shí)現(xiàn)讓jqm添加class的功能