目錄導(dǎo)航

?

前兩章分別對(duì)開發(fā)環(huán)境和Jquery Mobile基礎(chǔ)知識(shí)進(jìn)行了介紹，本章介紹創(chuàng)建一個(gè)Android項(xiàng)目，并使用WebView控件顯示HTML數(shù)據(jù)。

?

首先創(chuàng)建一個(gè)Android Application項(xiàng)目，這個(gè)在 第一節(jié) 已經(jīng)講過，不再贅述。

?

然后以圖的形式介紹下Android項(xiàng)目幾個(gè)關(guān)鍵文件的功能。

?

首先是AndroidManifest.xml文件，這個(gè)文件算是最重要的XML配置文件了， 比如該項(xiàng)目的名稱，該項(xiàng)目要開通哪些權(quán)限，該項(xiàng)目用到了哪些核心Activity類型，哪個(gè)是默認(rèn)啟動(dòng)項(xiàng)。

?

我的AndroidManifest.xml內(nèi)容如下：

      <?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.bless.blesscrm"
    android:versionCode="1"
    android:versionName="1.0" >
	
    <!-- 開啟網(wǎng)絡(luò)訪問權(quán)限 -->
    <uses-permission android:name="android.permission.INTERNET" >
    </uses-permission>

    <uses-sdk
        android:minSdkVersion="8"
        android:targetSdkVersion="8" />

    <application
        android:name="com.bless.blesscrm.AppContext"
        android:allowBackup="true"
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/AppTheme" >
        <activity
            android:name="com.bless.blesscrm.MainActivity"
            android:label="@string/app_name" 
            android:screenOrientation="portrait">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <!-- 設(shè)置當(dāng)前Activity為啟動(dòng)項(xiàng) -->
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

    

設(shè)置中有開發(fā)網(wǎng)絡(luò)訪問權(quán)限，這樣你就可以通過WebView訪問外網(wǎng)地址信息了

com.bless.blesscrm.AppContext是一個(gè)全局類，類中的變量在任何地方都能訪問

com.bless.blesscrm.MainActivity是默認(rèn)啟動(dòng)的Activity，也就是說Android應(yīng)用啟動(dòng)后會(huì)執(zhí)行這個(gè)Activity的方法來生成對(duì)應(yīng)的頁(yè)面信息;

很多手機(jī)支持屏幕翻轉(zhuǎn)，但是基于WebVeiw的Activity通常不要支持翻轉(zhuǎn)，因?yàn)槟阋环D(zhuǎn)就會(huì)重新調(diào)用Activity的onCreate方法，又回到首頁(yè)了，所以在<activity>中增加一個(gè)屬性android:screenOrientation="portrait"只允許豎屏顯示（高度大于寬度的屏幕）

?

?

然后在src源代碼目錄下找到com.bless.blesscrm.MainActivity，應(yīng)用啟動(dòng)后會(huì)執(zhí)行MainActivity的onCreate方法，所以頁(yè)面布局、顯示等初始化內(nèi)容都要在這個(gè)方法中編寫。

?

      protected void onCreate(Bundle savedInstanceState) {
	userManager = (UserManager) BeanFactory.getDBManager(UserManager.class, this);

	super.onCreate(savedInstanceState);
	app = (AppContext) super.getApplication();
	// 初始化當(dāng)前用戶
	app.setUser(userManager.getCurrentUser());
		
	setContentView(R.layout.activity_main);
	webView = (WebView) findViewById(R.id.webview);
	init();
	/** javascript與Java對(duì)象映射，頁(yè)面可使用javascript:ajax.xx()來調(diào)用AjaxManager的方法 */
	webView.addJavascriptInterface(new JavascriptUser(MainActivity.this), "javascriptUser");
	webView.loadUrl("file:///android_asset/www/index.html");
}
    

?

setContentView(R.layout.activity_main)用于設(shè)置Android屏幕顯示什么內(nèi)容，而R.layout.activity_main就是內(nèi)容文件，這個(gè)是一個(gè)XML，在上圖中的layout文件夾下，名稱為activity_main.xml，這個(gè)文件只有很簡(jiǎn)單一個(gè)WebView標(biāo)簽：

      <WebView  xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/webview"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
/>
    

?

webView = (WebView) findViewById(R.id.webview)表示獲取WebView對(duì)象，這個(gè)控件定義在activity_main.xml中。

?

webView.addJavascriptInterface(new JavascriptUser(MainActivity.this), "javascriptUser")用于給HTML頁(yè)面的javascript提供一個(gè)接口支持，頁(yè)面js可以通過javascriptUser.xxx()執(zhí)行這個(gè)Java中的方法，這個(gè)就是頁(yè)面與Android后臺(tái)交互最重要的接口了!（具體怎么個(gè)調(diào)用法，在后面文章中說明）

?

webView.loadUrl("file:///android_asset/www/index.html");表示W(wǎng)ebView控件初次加載哪個(gè)HTML文件，這個(gè)有個(gè)格式標(biāo)準(zhǔn)，如果以[file:///android_asset]為前綴，則可以訪問Android項(xiàng)目下asset文件夾中的HTML文件。

?

?

init()方法定義了一些WebView的自定義配置，如下代碼有詳細(xì)注釋，就不做解釋了。

      private void init() {
	setting = webView.getSettings();
	setting.setSupportZoom(true);// 支持縮放
	setting.setDefaultZoom(WebSettings.ZoomDensity.FAR);// 設(shè)置初始化縮放大小
	setting.setJavaScriptEnabled(true); // 支持頁(yè)面的javascript

	proDlg = new ProgressDialog(this);
	proDlg.setMessage("加載中，請(qǐng)稍后...");

	webView.setWebViewClient(new WebViewClient() {
		@Override
		public void onPageFinished(WebView view, String url) {
			// 加載頁(yè)面完成
			proDlg.dismiss();
		}

		@Override
		public void onPageStarted(WebView view, String url, Bitmap favicon) {
			// 加載頁(yè)面
			proDlg.show();
		}
	});

	webView.setWebChromeClient(new WebChromeClient() {
		@Override
		public void onProgressChanged(WebView view, int newProgress) {
			// 動(dòng)態(tài)顯示進(jìn)度
			proDlg.setMessage("已經(jīng)加載:" + newProgress + " %");
		}
	});
}
    

?

?

最后是在assets文件夾中創(chuàng)建頁(yè)面元素，所有的javascript、css、icon和html都放在這個(gè)下面，最好分文件存放，方便查找，別忘了放Jquery Mobile，我是將整個(gè)文件都拷貝到項(xiàng)目下的。

?index.html文件就不多說了，這個(gè)跟平常的html一樣的，在 第二章 中有示例。

?

需要注意的是，在html的<head>標(biāo)簽內(nèi)一定要添加下面這兩句，第一句無(wú)疑問是設(shè)置編碼的，第二個(gè)是表示讓html占滿整個(gè)移動(dòng)設(shè)備屏幕，這個(gè)在網(wǎng)上搜搜，也有很多詳細(xì)說明的！

      <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
    

?

然后啟動(dòng)Android應(yīng)用程序，調(diào)試看看是否能夠顯示正確的效果。

?

作為新手，很可能會(huì)遇到很多問題，千萬(wàn)不要?dú)怵H，我也是這么過來的，當(dāng)初為了出這個(gè)html報(bào)了各種奇怪的錯(cuò)誤，通過一點(diǎn)點(diǎn)排除問題，最終終于能在移動(dòng)設(shè)備中顯示了。

?

如果你感覺你的HTML寫得不正確，你可以在PC上直接訪問這個(gè)HTML，然后通過瀏覽器調(diào)試---在移動(dòng)設(shè)備上調(diào)試確實(shí)太麻煩！

?

你可以引用第三方的Jar包到項(xiàng)目的lib目錄下，最好一個(gè)個(gè)引用（因?yàn)橛行㎎ar包Android不支持），然后跑一下Android看控制臺(tái)是否報(bào)錯(cuò)。

?

對(duì)于Android開發(fā)，這里說得非常膚淺，個(gè)人建議新手下載一些Android視頻來看，因?yàn)楹芏嘁曨l的講師都很專業(yè)，他會(huì)給你很多建設(shè)性的意見，相反看書就比較枯燥，而且無(wú)法抓住重點(diǎn)！