標籤：
本篇文章由：http://www.sollyu.com/android-software-development-webview-addjavascriptinterface-cycle-of-gradual-one/
說明文章列表android軟體開發之webView.addJavascriptInterface迴圈漸進【一】： http://www.sollyu.com/?p=302
android軟體開發之webView.addJavascriptInterface迴圈漸進【二】： http://www.sollyu.com/?p=586
首先必要的囉嗦幾句，這幾天寫VC寫的累的要死，突然間不想再寫想VC了，手裡面有一個andriod的手機天天玩到半夜，卻從來沒有寫過這方面的程式，真的是悲哀啊。所以我就想寫這方面的程式，用管了VC的習程式的習慣，第一個程式當然是hello world。剛開始還沒有什麼大的問題，當到後面想寫一刷Q*會員的程式的時候卻發現，android的介面布局是真的難啊，怎麼擺都不好看。弄得和....什麼似的。氣得頭都大了，想想自己寫了這麼長時間的VC還真的沒有碰到這樣的介面問題，真可謂..
在verycd上看人家大牛的視頻的時候聽到人家說可以用html來做android的UI介面，這不僅讓我眼前一亮。 :-) 因為我學過html開發，雖然學的不咋的，但卻要比這XML好的太多了，真的是對XML頭大...於是乎就入手andriod的HTML介面可是後來發現在這方面的文章那叫一個少的可惜啊，老外那邊要不就是看不懂，要不就基本和我看的內容無關。因為自己是菜鳥所以就想到找個群，蹭進去找個大牛問問，誰知道進去之後，我XXX他的，居然收費,我XX它的OO，人家android都開源了問你個破問題還收費，什麼道德啊。當時個氣氛,,,發誓要學會，在網上寫文章，讓你收費,XX你個OO的。
發泄了一通舒服多了， :-) OK，囉嗦的話我就不多說了。下面就開始我們的android的webView 的HTML介面教程吧。這裡我給大家一個國內大牛的HTML做介面的視頻教程，不過他老人家講的我沒有聽懂。
21.android的ui設計技巧.rar或者看3G手機Android應用開發第八天課程1.採用HTML設計軟體介面.avi他老人家的的視頻還要 [Android開發視頻教程]02_12_JSON資料解析.mp4這個視頻做基礎。如果你也是大牛的話你也肯定看的懂的。下面就進入我們小菜階級的開發教程了。
代碼21.android的ui設計技巧.rar
3G手機Android應用開發第八天課程1.採用HTML設計軟體介面.avi
Android開發視頻教程02_12_JSON資料解
由於這裡是第一階段的webView所我就寫個最簡單的文章，這樣大家可以迴圈漸進的來瞭解addJavascriptInterface這句話是怎麼用的。
在這裡我們引用Google的一個案例下面是我Google給提供的一個dome的地址：點擊開啟連結
我們先看它的HTML檔案，HTML的檔案路徑是在：點擊開啟連結
他的代碼為：
<html> <script language="javascript"> /* This function is invoked by the activity */ /* 這個函數被Activity調用的活動 這裡的圖片我們可以在它的串連裡面下載 android_waving.png */ function wave() { /* 這裡是一個javascript 自訂函數，這是由我們在android的程式裡調用的，不在在HTML中調用*/ document.getElementById("droid").src="android_waving.png"; } </script> <body> <!-- Calls into the javascript interface for the activity --> <!-- 從HTML檔案中調用activity中的函數 --> <!-- 也就是從HTML到android程式 留意window.demo.clickOnAndroid()這句話 --> <a onClick="window.demo.clickOnAndroid()"><div style="width:80px; margin:0px auto; padding:10px; text-align:center; border:2px solid #202020;" > <!-- 圖片預設的為 android_normal.png --> <img id="droid" src="android_normal.png"/><br> Click me! </div></a> </body></html>
這裡我做了注釋,可能你會看不懂，沒有關係，下面我們就再看的activity的代碼吧。點擊開啟連結
由於他的源碼比較長，我就不多全部都貼進來了，我只貼一下重要的部分就好了.......貌似都重要，還是全貼吧
package com.google.android.webviewdemo;import android.app.Activity;import android.os.Bundle;import android.os.Handler;import android.util.Log;import android.webkit.JsResult;import android.webkit.WebChromeClient;import android.webkit.WebSettings;import android.webkit.WebViewpublic class WebViewDemo extends Activity { private static final String LOG_TAG = "WebViewDemo"; private WebView mWebView; private Handler mHandler = new Handler(); @Override public void onCreate(Bundle icicle) { super.onCreate(icicle); setContentView(R.layout.main); mWebView = (WebView) findViewById(R.id.webview); WebSettings webSettings = mWebView.getSettings(); webSettings.setSavePassword(false); webSettings.setSaveFormData(false); // 下面的一句話是必須的，必須要開啟javaScript不然所做一切都是徒勞的 webSettings.setJavaScriptEnabled(true); webSettings.setSupportZoom(false); mWebView.setWebChromeClient(new MyWebChromeClient()); // 看這裡用到了 addJavascriptInterface 這就是我們的重點中的重點 // 我們再看他的DemoJavaScriptInterface這個類。還要這個類一定要在主線程中 mWebView.addJavascriptInterface(new DemoJavaScriptInterface(), "demo"); mWebView.loadUrl("file:///android_asset/demo.html"); } // 這是他定義由 addJavascriptInterface 提供的一個Object final class DemoJavaScriptInterface { DemoJavaScriptInterface() { } /** * This is not called on the UI thread. Post a runnable to invoke * 這不是呼籲介面線程。發表一個運行調用 * loadUrl on the UI thread. * loadUrl在UI線程。 */ public void clickOnAndroid() { // 注意這裡的名稱。它為clickOnAndroid(),注意，注意，嚴重注意 mHandler.post(new Runnable() { public void run() { // 此處調用 HTML 中的javaScript 函數 mWebView.loadUrl("javascript:wave()"); } }); } }// 線下的代碼可以不看，調試用的/////////////////////////////////////////////////////////////////////////////////////////////////// /** * Provides a hook for calling "alert" from javascript. Useful for * 從javascript中提供了一個叫“提示框” 。這是很有用的 * debugging your javascript. * 調試你的javascript。 */ final class MyWebChromeClient extends WebChromeClient { @Override public boolean onJsAlert(WebView view, String url, String message, JsResult result) { Log.d(LOG_TAG, message); result.confirm(); return true; } }}
這裡我也做了注釋，在這裡他在他的類中定義了一個 clickOnAndroid() 的函數，我記不記得我們在HTML中看到的 window.demo.clickOnAndroid()這句話。如果忘記了就翻上去再看一下，特別是我說注意的地方。是的，這裡的 clickOnAndroid() 是我們android程式中的一個函數。可能你會問那.為什麼是windows.demo.這裡demo我們可以看到在
mWebView.addJavascriptInterface(new DemoJavaScriptInterface(), "demo");
這句話 中後面它加了一個demo這個字元.我可以理解成 addJavascriptInterface 的前一個參數為HTML中的一個方法，當然我更喜歡說他為函數。demo就是個對象...呵呵，我對這也不是怎麼的熟悉。至於這個window我也不知道是為什麼我只知道這樣寫程式就可以正確的運行，如果你知道這是什麼那麼請你在下面的留言版裡告訴我一下好嗎？
現在知道怎麼在HTML中怎麼調用Android程式的一個方法了吧。其實就是這這麼的簡單，不過demo這個字元我沒有試他是不是區分大小寫。如果你有興趣那麼你可以去試一下它有沒有區分大小寫。知道了怎麼樣從HTML中怎麼樣調用Android中的方法，下面我就再研究一下，它是怎麼樣從Android到HTML的吧。其實這個很簡單，只要使用
mWebView.loadUrl("javascript:wave()");
這句話就可以了。 這樣我主解讀完Google給我提供的一個demo了。下面就是讓我來試一下吧，試試他的這個demo吧，因為人家給提供了源碼，所以我就不貼的啦，大家把他的源碼貼上去就可以實現這個啦
在下一集裡我將會帶領大家來怎麼使用 addJavascriptInterface 怎麼樣從一個JavaScript 的函數中獲得一個傳回值。文章內容不多，還請見諒
android軟體開發之webView.addJavascriptInterface迴圈漸進【一】
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
