閱讀943 返回首頁    go 阿裏雲 go 技術社區[雲棲]

android軟件開發之webView.addJavascriptInterface循環漸進【一】

首先必要的囉嗦幾句，這幾天寫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這個視頻做基礎。如果你也是大牛的話你也肯定看的懂的。下麵就進入我們小菜階級的開發教程了。

  1. 21.android的ui設計技巧.rar  
  2. ed2k://|file|21.android%E7%9A%84ui%E8%AE%BE%E8%AE%A1%E6%8A%80%E5%B7%A7.rar|31469120|eb9c2aa5c6b9148f83f400e3af97829b|h=dxrchv3adrzynucrnnf4desotxnbzeal|/  
  3.   
  4. 3G手機Android應用開發第八天課程1.采用HTML設計軟件界麵.avi  
  5. ed2k://|file|3G%E6%89%8B%E6%9C%BAAndroid%E5%BA%94%E7%94%A8%E5%BC%80%E5%8F%91%E7%AC%AC%E5%85%AB%E5%A4%A9%E8%AF%BE%E7%A8%8B1.%E9%87%87%E7%94%A8HTML%E8%AE%BE%E8%AE%A1%E8%BD%AF%E4%BB%B6%E7%95%8C%E9%9D%A2.avi|45930496|fff4499772c89db13d1ea8492ba52086|/  
  6.   
  7. Android開發視頻教程]02_12_JSON數據解  
  8. ed2k://|file|%5BAndroid%E5%BC%80%E5%8F%91%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B%5D02_12_JSON%E6%95%B0%E6%8D%AE%E8%A7%A3%E6%9E%90.mp4|61184962|e183bbb0e241dd21ed534afdab84b5e4|h=c7n7qzrmvutyt34z2xlt73irudlkqrhg|/  


由於這裏是第一階段的webView所我就寫個最簡單的文章，這樣大家可以循環漸進的來了解addJavascriptInterface這句話是怎麼用的。

在這裏我們引用Google的一個事例下麵是我Google給提供的一個dome的地址：點擊打開鏈接

我們先看它的HTML文件，HTML的文件路徑是在：點擊打開鏈接

他的代碼為：

  1. <html>  
  2.         <script language="javascript">  
  3.             /* This function is invoked by the activity */  
  4.             /* 這個函數被Activity調用的活動 這裏的圖片我們可以在它的連接裏麵下載 android_waving.png */  
  5.                 function wave() {  
  6.                         /* 這裏是一個javascript 自定義函數，這是由我們在android的程序裏調用的，不在在HTML中調用*/  
  7.                         document.getElementById("droid").src="android_waving.png";  
  8.                 }  
  9.         </script>  
  10.         <body>  
  11.             <!-- Calls into the javascript interface for the activity -->  
  12.             <!-- 從HTML文件中調用activity中的函數 -->  
  13.             <!-- 也就是從HTML到android程序 留意window.demo.clickOnAndroid()這句話 -->  
  14.             <a onClick="window.demo.clickOnAndroid()"><div style="width:80px;  
  15.                         margin:0px auto;  
  16.                         padding:10px;  
  17.                         text-align:center;  
  18.                         border:2px solid #202020;" >  
  19.                                 <!-- 圖片默認的為 android_normal.png -->  
  20.                                 <img id="droid" src="android_normal.png"/><br>  
  21.                                 Click me!  
  22.                 </div></a>  
  23.         </body>  
  24. </html>  

這裏我做了注釋,可能你會看不懂，沒有關係，下麵我們就再看的activity的代碼吧。點擊打開鏈接

由於他的源碼比較長，我就不多全部都貼進來了，我隻貼一下重要的部分就好了.......貌似都重要，還是全貼吧

[javascript] view plaincopyprint?
  1. package com.google.android.webviewdemo;  
  2.   
  3.   
  4. import android.app.Activity;  
  5. import android.os.Bundle;  
  6. import android.os.Handler;  
  7. import android.util.Log;  
  8. import android.webkit.JsResult;  
  9. import android.webkit.WebChromeClient;  
  10. import android.webkit.WebSettings;  
  11. import android.webkit.WebView  
  12.   
  13. public class WebViewDemo extends Activity {  
  14.     private static final String LOG_TAG = "WebViewDemo";  
  15.     private WebView mWebView;  
  16.     private Handler mHandler = new Handler();  
  17.     @Override  
  18.     public void onCreate(Bundle icicle) {  
  19.         super.onCreate(icicle);  
  20.         setContentView(R.layout.main);  
  21.         mWebView = (WebView) findViewById(R.id.webview);  
  22.   
  23.   
  24.         WebSettings webSettings = mWebView.getSettings();  
  25.         webSettings.setSavePassword(false);  
  26.         webSettings.setSaveFormData(false);  
  27.         // 下麵的一句話是必須的，必須要打開javaScript不然所做一切都是徒勞的  
  28.         webSettings.setJavaScriptEnabled(true);  
  29.         webSettings.setSupportZoom(false);  
  30.   
  31.   
  32.         mWebView.setWebChromeClient(new MyWebChromeClient());  
  33.   
  34.         // 看這裏用到了 addJavascriptInterface 這就是我們的重點中的重點  
  35.         // 我們再看他的DemoJavaScriptInterface這個類。還要這個類一定要在主線程中  
  36.         mWebView.addJavascriptInterface(new DemoJavaScriptInterface(), "demo");  
  37.   
  38.   
  39.         mWebView.loadUrl("file:///android_asset/demo.html");  
  40.     }  
  41.   
  42.     // 這是他定義由 addJavascriptInterface 提供的一個Object  
  43.     final class DemoJavaScriptInterface {  
  44.         DemoJavaScriptInterface() {  
  45.         }  
  46.   
  47.         /** 
  48.          * This is not called on the UI thread. Post a runnable to invoke 
  49.          * 這不是唿籲界麵線程。發表一個運行調用 
  50.          * loadUrl on the UI thread. 
  51.          * loadUrl在UI線程。 
  52.          */  
  53.         public void clickOnAndroid() {        // 注意這裏的名稱。它為clickOnAndroid(),注意，注意，嚴重注意  
  54.             mHandler.post(new Runnable() {  
  55.                 public void run() {  
  56.                     // 此處調用 HTML 中的javaScript 函數  
  57.                     mWebView.loadUrl("javascript:wave()");  
  58.                 }  
  59.             });  
  60.         }  
  61.     }  
  62. // 線下的代碼可以不看，調試用的  
  63. ///////////////////////////////////////////////////////////////////////////////////////////////////  
  64.     /** 
  65.      * Provides a hook for calling "alert" from javascript. Useful for 
  66.      * 從javascript中提供了一個叫“提示框” 。這是很有用的 
  67.      * debugging your javascript. 
  68.      *  調試你的javascript。 
  69.      */  
  70.     final class MyWebChromeClient extends WebChromeClient {  
  71.         @Override  
  72.         public boolean onJsAlert(WebView view, String url, String message, JsResult result) {  
  73.             Log.d(LOG_TAG, message);  
  74.             result.confirm();  
  75.             return true;  
  76.         }  
  77.     }  
  78. }  

這裏我也做了注釋，在這裏他在他的類中定義了一個  clickOnAndroid() 的函數，我記不記得我們在HTML中看到的   window.demo.clickOnAndroid() 這句話。如果忘記了就翻上去再看一下，特別是我說注意的地方。是的，這裏的  clickOnAndroid() 是我們android程序中的一個函數。可能你會問那.為什麼是windows.demo.這裏demo我們可以看到在   

[javascript] view plaincopyprint?
  1. mWebView.addJavascriptInterface(new DemoJavaScriptInterface(), "demo");  
這句話 中後麵它加了一個demo這個字符.我可以理解成 addJavascriptInterface 的前一個參數為HTML中的一個方法，當然我更喜歡說他為函數。demo就是個對象...嗬嗬，我對這也不是怎麼的熟悉。至於這個window我也不知道是為什麼我隻知道這樣寫程序就可以正確的運行，如果你知道這是什麼那麼請你在下麵的留言版裏告訴我一下好嗎？

現在知道怎麼在HTML中怎麼調用Android程序的一個方法了吧。其實就是這這麼的簡單，不過demo這個字符我沒有試他是不是區分大小寫。如果你有興趣那麼你可以去試一下它有沒有區分大小寫。知道了怎麼樣從HTML中怎麼樣調用Android中的方法，下麵我就再研究一下，它是怎麼樣從Android到HTML的吧。其實這個很簡單，隻要使用  

[javascript] view plaincopyprint?
  1. mWebView.loadUrl("javascript:wave()");  
這句話就可以了。

這樣我主解讀完Google給我提供的一個demo了。下麵就是讓我來試一下吧，試試他的這個demo吧，因為人家給提供了源碼，所以我就不貼的啦，大家把他的源碼貼上去就可以實現這個啦

在下一集裏我將會帶領大家來怎麼使用 addJavascriptInterface  怎麼樣從一個JavaScript 的函數中獲得一個返回值。文章內容不多，還請見諒

最後更新：2017-04-03 12:54:03

  上一篇：go python模塊之email: 電子郵件編碼解碼 (一、解碼郵件)
  下一篇：go 百度數據挖掘工程師實習生筆試麵試題