新建工程
爲了讓大家更容易的理解，所以我這裏就儘量的將代碼縮短，這是我的工程的配置
創建好工程之後，然後將界面調整爲下面這樣
添加代碼
首先將兩個button和webview添加進來，並給web添加兩個JavaScript調用接口，testFunc1和testFunc2
private Button m_testButtom1;
private Button m_testButtom2;
private WebView m_WebView;
@SuppressLint("SetJavaScriptEnabled")
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
m_testButtom1 = (Button)findViewById(R.id.button1);
m_testButtom2 = (Button)findViewById(R.id.button2);
m_WebView = (WebView)findViewById(R.id.webView1);
m_WebView.getSettings().setJavaScriptEnabled(true);
m_WebView.addJavascriptInterface(new Object(){
@SuppressWarnings("unused") // 這兩個函數可以在JavaScript中調用
public void testFunc1(String string) {messageHandler.obtainMessage(MessageHandler.WM_SET_FUNC1, string).sendToTarget(); }
@SuppressWarnings("unused")
public void testFunc2(String string) { messageHandler.obtainMessage(MessageHandler.WM_SET_FUNC2, string).sendToTarget();}
}, "demo");
m_WebView.loadUrl("file: ///android_asset/demo.html");
}可以看到裏面用到了一個
messageHandler，我們看一下他具體的定義，這個類主要就是用來JavaScript交互的，JavaScript會使用這個消息來和我們的UI進行交互，同樣上一篇也有說過Looper looper = Looper.myLooper(); //得到當前線程的Looper實例，由於當前線程是UI線程也可以通過Looper.getMainLooper()得到
private Handler messageHandler = new MessageHandler(looper);//此處甚至可以不需要設置Looper，因爲 Handler默認就使用當前線程的Looper
public class MessageHandler extends Handler {
public static final int WM_SET_FUNC1 = 0;
public static final int WM_SET_FUNC2 = 1;
public MessageHandler(Looper looper) { super(looper); }
@Override
public void handleMessage(Message msg) {
switch (msg.what) {
case WM_SET_FUNC1:
Toast.makeText(getApplicationContext(), msg.obj.toString(), Toast.LENGTH_LONG).show();
break;
case WM_SET_FUNC2:
Toast.makeText(getApplicationContext(), msg.obj.toString(), Toast.LENGTH_LONG).show();
break;
default:
break;
}
}
}添加完成之後，在來添加按鈕點擊事件
m_testButtom1.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View arg0) {
String string = "http://www.sollyu.com";
m_WebView.loadUrl("javascript:testFunc1('"+string+"');"); // 調用html中的JavaScript函數testFunc1,這裏只有一個參數
}
});
m_testButtom2.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View arg0) {
String string = "這裏有兩個參數:";
int nInt = 191067617;
m_WebView.loadUrl("javascript:testFunc2('"+string+"',"+String.valueOf(nInt)+")"); // 通用這裏有2個參數
}
});這樣在Android的代碼就算寫完了，下面在來看一下
demo.html
Html文件
demo.html源代碼爲：
<html>
<script language="javascript">
function testFunc1(var1)
{
return_var = "原創文章：" + var1;
window.demo.testFunc1(return_var); // 調用Android代碼中的 testFunc1 的函數
return return_var;
}
function testFunc2(var1,var2)
{
return_var = var1 + var2;
window.demo.testFunc2(return_var); // 這裏的參數就爲返回到android的值
return return_var;
}
</script>
</html>運行截圖
