目錄導航
?
前兩章分別對開發環境和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視頻來看,因為很多視頻的講師都很專業,他會給你很多建設性的意見,相反看書就比較枯燥,而且無法抓住重點!
更多文章、技術交流、商務合作、聯系博主
微信掃碼或搜索:z360901061

微信掃一掃加我為好友
QQ號聯系: 360901061
您的支持是博主寫作最大的動力,如果您喜歡我的文章,感覺我的文章對您有幫助,請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧,狠狠點擊下面給點支持吧,站長非常感激您!手機微信長按不能支付解決辦法:請將微信支付二維碼保存到相冊,切換到微信,然后點擊微信右上角掃一掃功能,選擇支付二維碼完成支付。
【本文對您有幫助就好】元
