WebView 和 JS 交互，如何将 Java 对象和 List 传值给 JS ？
bapi822
7年前
<p>随着混合开发模式比较流行，很多时候，我们需要在原生的基础上，使用 WebView 加载网页，这样控制更加方便。今天我们来看看，如何将 Java 对象 和 List 集合传值给 JS 调用。</p> <h3>如何将 Java 对象实例传值给 JS</h3> <p>其实将我们在 Android 原生中将 Java 对象实例传值给 JS 承认并且可以使用的对象，方法非常简单。我们来举个例子。</p> <p>html 文件</p> <p>我们在本地写了一个 html 文件，放在 assets 目录中。</p> <pre> <code class="language-java"><!DOCTYPE html> <html> <head> <metacharset="utf-8"> <title>测试</title> <h1id="name"></h1> <h1id="age"></h1> <h1id="sex"></h1> <script> // Android需要调用的方法 function callJS(){ document.getElementById("age").innerHTML=person.getAge(); document.getElementById("name").innerHTML=person.getName(); document.getElementById("sex").innerHTML=person.getSex(); } </script> </head> </html> </code></pre> <p>看到 callJS() 函数中的 person 了吗？它就是我们传值进行的 Java 对象实例。直接就可以使用，获取了年龄，名字，和性别属性。那我们该如何声明该对象，才会被 JS 所承认呢？</p> <p>Java 对象</p> <p>来，看看，我们是如何创建 Person 这个实体类的。代码如下：</p> <pre> <code class="language-java">package com.loonggg.wedswebview; import android.webkit.JavascriptInterface; /** * Created by loonggg on 2017/5/11. */ public class Person{ private String name; private String age; private String sex; @JavascriptInterface publicStringgetAge(){ return age; } public void setAge(String age){ this.age = age; } public void setSex(String sex){ this.sex = sex; } @JavascriptInterface publicStringgetSex(){ return sex; } @JavascriptInterface publicStringgetName(){ return name; } public void setName(String name){ this.name = name; } } </code></pre> <p>看到我们实体类 Person 中每个get方法的上面有一个 @JavascriptInterface 的注解了吗？它的意思就是告诉 JS ，这个可以用，所以我们在 Html 文件中，使用 person.get()对应的方法，可以获取到内容。</p> <p>在 WebView 上是这样传值的：</p> <pre> <code class="language-java">webView.loadUrl("file:///android_asset/test_object.html"); final Person p = new Person(); p.setName("loonggg"); p.setAge("28"); p.setSex("男"); wv.addJavascriptInterface(p, "person"); wv.loadUrl("javascript:callJS()"); </code></pre> <p>wv.addJavascriptInterface(p, “person”); 的意思就是注入 Java 对象 p 给 webview 为 person，在 JS 调用的时候，对应的就是 person 。</p> <p>wv.loadUrl(“javascript:callJS()”);这句话的意思就是：调用JS中的方法 callJS()函数方法。</p> <h3>Java List如何传给 JS 呢？</h3> <p>其实按道理来说，是不可以将List集合直接传值给 JS 使用，但是既然对象可以传值，JS 可以调用 java 对象，也可以调用 Android 中的方法，那我们就一拆分的形式传过去。</p> <p>Html 文件</p> <pre> <code class="language-java"><!DOCTYPE html> <html> <head> <metacharset="utf-8"> <title>测试</title> <h1id="name"></h1> <h1id="age"></h1> <h1id="sex"></h1> <h1>List传值测试</h1> <h1id="name1"></h1> <h1id="age1"></h1> <h1id="sex1"></h1> <script> // Android需要调用的方法 function callJS(){ document.getElementById("age").innerHTML=person.getAge(); document.getElementById("name").innerHTML=person.getName(); document.getElementById("sex").innerHTML=person.getSex(); } function callListJS(){ document.getElementById("age1").innerHTML=window.javatojs.getPersonObject(0).getAge(); document.getElementById("name1").innerHTML=window.javatojs.getPersonObject(0).getName(); document.getElementById("sex1").innerHTML=window.javatojs.getPersonObject(0).getSex() } </script> </head> </html> </code></pre> <p>拆分传值</p> <p>如何拆分呢？就是在JS中调用 Android中的方法，里面可以按照索引返回集合中的对象，然后再获取对象中的属性。代码如下：</p> <pre> <code class="language-java">/** * 该方法将在js脚本中，通过window.javatojs.....()进行调用 * * @return */ @JavascriptInterface publicPersongetPersonObject(intindex){ return list.get(index); } @JavascriptInterface public int getSize(){ return list.size(); } list.add(p); wv.addJavascriptInterface(this, "javatojs"); wv.loadUrl("javascript:callListJS()"); </code></pre> <h3>整个Acitvity中所有的代码</h3> <pre> <code class="language-java">public class MainActivityextends AppCompatActivity{ private WebView wv; private List<Person> list = new ArrayList<Person>(); @SuppressLint("JavascriptInterface") @Override protected void onCreate(Bundle savedInstanceState){ super.onCreate(savedInstanceState); wv = new WebView(this); setContentView(wv); WebSettings ws = wv.getSettings(); ws.setJavaScriptEnabled(true); ws.setUseWideViewPort(true);//适应分辨率 ws.setLoadWithOverviewMode(true); wv.loadUrl("file:///android_asset/test_object.html"); final Person p = new Person(); p.setName("loonggg"); p.setAge("28"); p.setSex("男"); wv.addJavascriptInterface(p, "person"); list.add(p); wv.addJavascriptInterface(this, "javatojs"); wv.setWebViewClient(new WebViewClient() { @Override public void onPageFinished(WebView view, String url){ super.onPageFinished(view, url); wv.loadUrl("javascript:callJS()"); wv.loadUrl("javascript:callListJS()"); } }); } /** * 该方法将在js脚本中，通过window.javatojs.....()进行调用 * * @return */ @JavascriptInterface publicPersongetPersonObject(intindex){ return list.get(index); } @JavascriptInterface public int getSize(){ return list.size(); } } </code></pre> <h3>效果图</h3> <p><img src="https://simg.open-open.com/show/e19bd4c0fe6c7310f5f7e981c2ff3fea.png"> 到这里我想大家就大致明白了什么意思了吧？赶紧去试试吧。</p> <p> </p> <p>来自：http://godcoder.me/2017/06/02/WebView 和 JS 交互，如何将 Java 对象和 List 传值给 JS/</p> <p> </p>