JS和Android本地方法之间的调用

      最近在学习JS和Android本地方法之间的调用，上网查了好多资料，这里总结一下，便于像我一样的新手借鉴，学习。

     首先，打开编辑工具，新建一个Android项目，我这就叫JS和Android本地方法之间的调用了。

    fragment_main.xml  布局代码：

<span style="font-family: Arial; font-size: 14px; line-height: 26px;"><span style="font-size: 18px; color: rgb(255, 0, 0);"><textarea readonly="readonly" name="code" class="xml"> </span></span>

<span style="font-family: Arial; font-size: 14px; line-height: 26px;"><span style="font-size: 18px; color: rgb(255, 0, 0);"><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical"    android:gravity="center"    tools:context="com.example.js2android.MainActivity$PlaceholderFragment" >    <Button        android:id="@+id/changeWorld"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:background="#00ff00"        android:text="Native调用JS方法" />    <WebView         android:id="@+id/web_test"        android:layout_width="match_parent"        android:layout_height="match_parent"        /></LinearLayout></span></span>

<span style="font-family: Arial; font-size: 14px; line-height: 26px;"><span style="font-size: 18px; color: rgb(255, 0, 0);"><span style="font-family: Arial; font-size: 18px; line-height: 26px;"><span style="color: rgb(255, 0, 0);"></textarea></span></span></span></span>

<span style="font-family: Arial; font-size: 14px; line-height: 26px;"><span style="font-size: 18px; color: rgb(255, 0, 0);"></span></span>

           初始化控件：

<span style="font-family: Arial; font-size: 14px; line-height: 26px;"><span style="font-size: 18px; color: rgb(255, 0, 0);"><textarea readonly="readonly" name="code" class="java"> </span></span>

<span style="font-family: Arial; font-size: 14px; line-height: 26px;"><span style="font-size: 18px; color: rgb(255, 0, 0);"></span></span><pre name="code" class="html">//初始化控件            View rootView = inflater.inflate(R.layout.fragment_main, container, false);            changeWorld = (Button) rootView.findViewById(R.id.changeWorld);            changeWorld.setOnClickListener(this);            mWebView = (WebView) rootView.findViewById(R.id.web_test);

<span style="font-family: Arial; font-size: 14px; line-height: 26px;"><span style="font-size: 18px; color: rgb(255, 0, 0);"></textarea></span></span>

</pre><p></p><p>给webview添加本地操作接口及设置参数：</p><p></p><pre name="code" class="html"><span style="font-family: Arial; font-size: 14px; line-height: 26px;"><span style="font-size: 18px; color: rgb(255, 0, 0);"><textarea readonly="readonly" name="code" class="java"> </span></span>

<span style="font-family: Arial; font-size: 14px; line-height: 26px;"><span style="font-size: 18px; color: rgb(255, 0, 0);"> //给webview添加本地操作接口           //实例化NativeInterface接口对象            nif = new NativeInterface(getActivity());           //设置参数            mWebView.getSettings().setBuiltInZoomControls(true);            mWebView.getSettings().setJavaScriptEnabled(true);          //内容的渲染需要webviewChromClient去实现，设置webviewChromClient基类    <span style="white-space:pre"></span>mWebView.setWebChromeClient(new WebChromeClient());    <span style="white-space:pre"></span>//给webview添加本地操作接口    <span style="white-space:pre"></span>//把实例化的NativeInterface接口对象nif绑定到全局的nif上，nif的作用域是全局的，初始化后可随处使用    <span style="white-space:pre"></span>mWebView.addJavascriptInterface(nif, "nif");</span></span>

<span style="font-family: Arial; font-size: 14px; line-height: 26px;"><span style="font-size: 18px; color: rgb(255, 0, 0);"><span style="font-size: 18px; line-height: 26px;"></textarea></span></span></span>

加载本地html：

<span style="font-family: Arial; font-size: 14px; line-height: 26px;"><span style="font-size: 18px; color: rgb(255, 0, 0);"><textarea readonly="readonly" name="code" class="java"> </span></span>

<span style="font-family: Arial; font-size: 14px; line-height: 26px;"><span style="font-size: 18px; color: rgb(255, 0, 0);"> //加载本地html    <span style="white-space:pre"></span>mWebView.loadUrl("file:///android_asset/index.html");</span></span>

<span style="font-family: Arial; font-size: 14px; line-height: 26px;"><span style="font-size: 18px; color: rgb(255, 0, 0);"></textarea></span></span>

NativeInterface.java代码：

<span style="font-family: Arial; font-size: 14px; line-height: 26px;"><span style="font-size: 18px; color: rgb(255, 0, 0);"><textarea readonly="readonly" name="code" class="java"> </span></span>

<span style="font-family: Arial; font-size: 14px; line-height: 26px;"><span style="font-size: 18px; color: rgb(255, 0, 0);"> public class NativeInterface {<span style="white-space:pre"></span><span style="white-space:pre"></span>private Context context;<span style="white-space:pre"></span>public NativeInterface(Context context) {<span style="white-space:pre"></span>this.context = context;<span style="white-space:pre"></span>}<span style="white-space:pre"></span>@JavascriptInterface<span style="white-space:pre"></span>public void changeWorld(){<span style="white-space:pre"></span>MainActivity activity=(MainActivity) context;<span style="white-space:pre"></span>activity.count=0;<span style="white-space:pre"></span>activity.handler.removeMessages(0);<span style="white-space:pre"></span>activity.showToast("JS调用Native方法");<span style="white-space:pre"></span>}}</span></span>

<span style="font-family: Arial; font-size: 14px; line-height: 26px;"><span style="font-size: 18px; color: rgb(255, 0, 0);"></textarea></span></span>

index.html代码：

<span style="font-family: Arial; font-size: 14px; line-height: 26px;"><span style="font-size: 18px; color: rgb(255, 0, 0);"><textarea readonly="readonly" name="code" class="html"> </span></span>

<span style="font-family: Arial; font-size: 14px; line-height: 26px;"><span style="font-size: 18px; color: rgb(255, 0, 0);"> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html40/strict.dtd"><HTML><HEAD><meta name="viewport" content="width=device-width, target-densitydpi=device-dpi" /><META http-equiv="Content-Type" content="text/html; charset=UTF-8"><script>   function showMsg(){      alert("Native调用JS方法!");   }   function showMsgInAndroid(){    nif.changeWorld();   }</script></HEAD><BODY><span>JS调用Native方法的演示</span><button id='btntest' onclick='showMsgInAndroid()'>JS调用Native方法</button></BODY></HTML></span></span>

<span style="font-family: Arial; font-size: 14px; line-height: 26px;"><span style="font-size: 18px; color: rgb(255, 0, 0);"></textarea></span></span>

js调用的本地方法：

<span style="font-family: Arial; font-size: 14px; line-height: 26px;"><span style="font-size: 18px; color: rgb(255, 0, 0);"><textarea readonly="readonly" name="code" class="java"> </span></span>

<span style="font-family: Arial; font-size: 14px; line-height: 26px;"><span style="font-size: 18px; color: rgb(255, 0, 0);"> public Handler handler=new Handler(){<span style="white-space:pre"></span>public void handleMessage(android.os.Message msg) {<span style="white-space:pre"></span>switch (msg.what) {<span style="white-space:pre"></span>case 0:<span style="white-space:pre"></span>if(count<20){<span style="white-space:pre"></span>showToast(stringmsg+"..."+count);<span style="white-space:pre"></span>}<span style="white-space:pre"></span>break;<span style="white-space:pre"></span>default:<span style="white-space:pre"></span>break;<span style="white-space:pre"></span>}<span style="white-space:pre"></span><span style="white-space:pre"></span><span style="white-space:pre"></span>};};     public String stringmsg;     public int count;<span style="white-space:pre"></span>public void showToast(String string) {<span style="white-space:pre"></span>stringmsg = string;<span style="white-space:pre"></span>Toast.makeText(this, string, 0).show();<span style="white-space:pre"></span>count++;<span style="white-space:pre"></span>handler.sendEmptyMessageDelayed(0, 2000);<span style="white-space:pre"></span>}</span></span>

<span style="font-family: Arial; font-size: 14px; line-height: 26px;"><span style="font-size: 18px; color: rgb(255, 0, 0);"></textarea></span></span>

本地按钮点击事件调用js代码：

<span style="font-family: Arial; font-size: 14px; line-height: 26px;"><span style="font-size: 18px; color: rgb(255, 0, 0);"><textarea readonly="readonly" name="code" class="java"> </span></span>

<span style="font-family: Arial; font-size: 14px; line-height: 26px;"><span style="font-size: 18px; color: rgb(255, 0, 0);"> @Override<span style="white-space:pre"></span>public void onClick(View v) {<span style="white-space:pre"></span>mWebView.loadUrl("javascript:showMsg()");<span style="white-space:pre"></span>}</span></span>

<span style="font-family: Arial; font-size: 14px; line-height: 26px;"><span style="font-size: 18px; color: rgb(255, 0, 0);"></textarea></span></span>

好了，就分享到这里了。新手手写，大神勿喷。

最后附上源码免费下载地址：http://download.csdn.net/detail/u011586609/9610946