目錄導航

?

前兩章分別對開發環境和Jquery Mobile基礎知識進行了介紹，本章介紹創建一個Android項目，并使用WebView控件顯示HTML數據。

?

首先創建一個Android Application項目，這個在 第一節 已經講過，不再贅述。

?

然后以圖的形式介紹下Android項目幾個關鍵文件的功能。

?

首先是AndroidManifest.xml文件，這個文件算是最重要的XML配置文件了， 比如該項目的名稱，該項目要開通哪些權限，該項目用到了哪些核心Activity類型，哪個是默認啟動項。

?

我的AndroidManifest.xml內容如下：

      <?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" >
	
    <!-- 開啟網絡訪問權限 -->
    <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" />
                <!-- 設置當前Activity為啟動項 -->
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

    

設置中有開發網絡訪問權限，這樣你就可以通過WebView訪問外網地址信息了

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

com.bless.blesscrm.MainActivity是默認啟動的Activity，也就是說Android應用啟動后會執行這個Activity的方法來生成對應的頁面信息;

很多手機支持屏幕翻轉，但是基于WebVeiw的Activity通常不要支持翻轉，因為你一翻轉就會重新調用Activity的onCreate方法，又回到首頁了，所以在<activity>中增加一個屬性android:screenOrientation="portrait"只允許豎屏顯示（高度大于寬度的屏幕）

?

?

然后在src源代碼目錄下找到com.bless.blesscrm.MainActivity，應用啟動后會執行MainActivity的onCreate方法，所以頁面布局、顯示等初始化內容都要在這個方法中編寫。

?

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

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

?

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

      <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對象，這個控件定義在activity_main.xml中。

?

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

?

webView.loadUrl("file:///android_asset/www/index.html");表示WebView控件初次加載哪個HTML文件，這個有個格式標準，如果以[file:///android_asset]為前綴，則可以訪問Android項目下asset文件夾中的HTML文件。

?

?

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

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

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

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

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

	webView.setWebChromeClient(new WebChromeClient() {
		@Override
		public void onProgressChanged(WebView view, int newProgress) {
			// 動態顯示進度
			proDlg.setMessage("已經加載:" + newProgress + " %");
		}
	});
}
    

?

?

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

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

?

需要注意的是，在html的<head>標簽內一定要添加下面這兩句，第一句無疑問是設置編碼的，第二個是表示讓html占滿整個移動設備屏幕，這個在網上搜搜，也有很多詳細說明的！

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

?

然后啟動Android應用程序，調試看看是否能夠顯示正確的效果。

?

作為新手，很可能會遇到很多問題，千萬不要氣餒，我也是這么過來的，當初為了出這個html報了各種奇怪的錯誤，通過一點點排除問題，最終終于能在移動設備中顯示了。

?

如果你感覺你的HTML寫得不正確，你可以在PC上直接訪問這個HTML，然后通過瀏覽器調試---在移動設備上調試確實太麻煩！

?

你可以引用第三方的Jar包到項目的lib目錄下，最好一個個引用（因為有些Jar包Android不支持），然后跑一下Android看控制臺是否報錯。

?

對于Android開發，這里說得非常膚淺，個人建議新手下載一些Android視頻來看，因為很多視頻的講師都很專業，他會給你很多建設性的意見，相反看書就比較枯燥，而且無法抓住重點！