Android中js与本地方法进行相互调用

最近项目中用到HTML5，app和Html5的交互，就是webview和js的交互，当然如果是纯网页的话，直接就用webview加载下就好了。

在这里说到的是app和HTML的混合开发：

webview 首先要支持js 

[html] view plain copy

 

 print?

1. webView.getSettings().setJavaScriptEnabled(true);//添加对JavaScript支持  

加载网页

[html] view plain copy

 

 print?

1. webView.loadUrl("http://192.168.1.90:8080/WT/position-app/position-list.html");   

1.native如何调用js？

（1）这得仰仗webView.addJavascriptInterface();这个方法，JavascriptInterface是建立和js连接的桥梁

[html] view plain copy

 

 print?

1. webView.addJavascriptInterface(new AndroidJavaScript(context), "Position");  

这个方法有2个参数

第一个参数告诉webview，我要用这个类来跟js进行交互 

第二个参数随便写，就相当于在js中我们交互类的标签。但是，一定要和网页上js代码中的调用保持一致

（2）下面我们来看看定义的native和js交互的类如何写：

[html] view plain copy

 

 print?

1. public class AndroidJavaScript {  
2.     private Context context;  
3.       public AndroidJavaScript(Context context){  
4.           this.context = context;  
5.       }  
6.   @JavascriptInterface    
7.   public void jumpNext() {    
8.       Intent intent = new Intent(context, PositionSelectActivity.class);  
9.         intent.putExtra("startTo", "searchOfpositionFragment");  
10.       context.startActivity(intent);  
11.       ((Activity) context).finish();  
12.   }    
13. }  

用于交互的方法 上一定要加注解 @JavascriptInterface  

（3）js 调用 native的代码

[html] view plain copy

 

 print?

1. <script type="text/javascript">  
2.         var basePath = "<%=basePath%>";  
3.         function search(){  
4.             window.Position.jumpNext();   
5.         }  
6.   </script>  

童鞋们注意啦：window.Position.jumpNext()这句代码中的Position要与webView.addJavascriptInterface(new AndroidJavaScript(context),"Position")中的"Position"保持一致。
这样才能调到哦。

2.natvie调用js代码

这个一句代码就能搞定

（1）js代码：

[html] view plain copy

 

 print?

1. function show(id){  
2.         alert("调用js的代码"+id);      
3.     }  

（1）本地的调用方法

[html] view plain copy

 

 print?

1. webView.loadUrl("javascript:QueryPositon('"+45+"')");    

但是只写着一行代码的话会出现网页还没加载完就去调用方法的情况所以要监听网页加载完毕

[html] view plain copy

 

 print?

1. webView.setWebViewClient(webviewClient);  

[html] view plain copy

 

 print?

1. WebViewClient webviewClient = new WebViewClient(){  
2.         public void onPageFinished(WebView view, String url){  
3.             webView.loadUrl("javascript:show('"+45+"')");    
4.         };  
5.     };  

这样简单完成js和webview的交互

深扒的话：（1）Android和js交互有一个好的框架 jsbridge 

                    （2）honegap开发：不用android的布局了，直接把html放到app里当界面  然后用js 交互

补充布局

[html] view plain copy

 

 print?

1. <WebView   
2. android:layout_width="match_parent"  
3. android:layout_height="match_parent"  
4. android:id="@+id/webView"  
5. />