[[189497]]

背景：Android API中提供了WebView組件來(lái)實(shí)現(xiàn)對(duì)html的渲染?，F(xiàn)在HTML5、CSS3、jS的相關(guān)開(kāi)發(fā)技術(shù)，以及數(shù)據(jù)交換格式j(luò)son/XML。Web開(kāi)發(fā)工程師的技能。為了減少對(duì)android的過(guò)度依賴，通常會(huì)在原生的Android 嵌入部分的html了。

這樣一來(lái)就避免不了為js數(shù)據(jù)交互。

我們新建一個(gè)簡(jiǎn)單的布局，只有一個(gè)webview控件

<android:id="@+id/webView" 
android:layout_width="fill_parent" 
android:layout_height="wrap_content" 
/> 

我們找到這個(gè)webView，并加上載本地的main.html，其中main.html存儲(chǔ)在工程文件的assets根目錄下。

WebView webView = (WebView) findViewById(R.id.webView); 
webView.addJavascriptInterface(newJSObject(context), "aikaifa"); 
WebSettings webSettings = webView.getSettings(); 
webSettings.setJavaScriptEnabled(true);// 支持js 
Handler handler = new Handler(); 
handler.postDelayed(new Runnable() { 
public void run() { 
webView.loadUrl("file:///android_asset/main.html"); 
} 
}, 500); 

1.js調(diào)用Android方法

細(xì)心的你應(yīng)該會(huì)注意到上面有個(gè)JSObject類，沒(méi)錯(cuò)，就是這個(gè)開(kāi)啟了入口，前端js 才可以調(diào)用我們Android這邊寫(xiě)的方法。其中的“aikaifa” 可以理解成一個(gè)標(biāo)示，可以隨便改成你喜歡的。

我們來(lái)看一下JSObject這個(gè)類：

public class JSObject { 
 private Context context; 
 public JSObject(Context context){ 
 this.context=context; 
} 
@JavascriptInterface 
 public void goBack({ 
 Activity activity = (Activity) context; 
 activity.finish(); 
 } 
} 

該類定義了goBack方法，注入JS可以調(diào)用。

js如果想要調(diào)用goBack這個(gè)方法?？梢赃@個(gè)aikaifa.goBack() 這樣調(diào)用即可。

這樣前端就可以很方便調(diào)用我們Android這邊的方法了。

2.Android調(diào)用JS方法

既然js可以調(diào)用我們的方法，那我們同樣也調(diào)用js方法

例如我們想調(diào)用js 中g(shù)etName方法。

我們可以這樣寫(xiě)。

public void getTestJS() 
{ 
   Timertimer = new Timer(); 
   final Handler handler = new Handler(){ 
   public void handleMessage(Message msg) { 
       switch (msg.what) { 
          case 1: 
         webView.loadUrl("javascript:getName()"); 
         break; 
    } 
   super.handleMessage(msg); 
  } 
}; 
   timer.schedule(new TimerTask() { 
   public void run() { 
            Message msg = new Message(); 
            msg.what = 1; 
             handler.sendMessage(msg); 
       } 
    }, 500, 500); 
} 

其中g(shù)etName方法是js中的一個(gè)方法，我們可以在需要的地方調(diào)用getTestJS方法就可以了。

這樣WebView與js交互就大致完成了。

【本文為51CTO專欄作者“洪生鵬”的原創(chuàng)稿件，轉(zhuǎn)載請(qǐng)聯(lián)系原作者】

戳這里，看該作者更多好文