Android五分鐘輕松教會(huì)你掌握WebView與JS交互
背景:Android API中提供了WebView組件來實(shí)現(xiàn)對(duì)html的渲染?,F(xiàn)在HTML5、CSS3、jS的相關(guān)開發(fā)技術(shù),以及數(shù)據(jù)交換格式j(luò)son/XML。Web開發(fā)工程師的技能。為了減少對(duì)android的過度依賴,通常會(huì)在原生的Android 嵌入部分的html了。
這樣一來就避免不了為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類,沒錯(cuò),就是這個(gè)開啟了入口,前端js 才可以調(diào)用我們Android這邊寫的方法。其中的“aikaifa” 可以理解成一個(gè)標(biāo)示,可以隨便改成你喜歡的。
我們來看一下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方法。
我們可以這樣寫。
- 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)系原作者】















 
 
 










 
 
 
 