Android与js交互

来源：互联网发布：linux脚本怎么建立编辑：程序博客网时间：2024/05/19 12:12

随着Html5的流行，越来越多的app使用网页的方式来开发，网页与原生混合开发的速度非常快，对于经常需要变换内容的app来说，这种方式也是特别的方便，只需更改后台的页面就可以做到内容的变更。

android中可以通过webview这个中间控件实现原生代码与html页面的互动，而他们能够通信的基础就是JS(javaScript)。js是一个脚本语言，是用来动态处理网页的，由其延伸出来很多优秀的框架，比如jquery。现在网页的开发一般都是由html标签来放置内容，css来处理内容的布局，js则用来处理网页的交互逻辑以及动态的修改网页的显示内容。

今天来演示android与网页的双向互动，即app通过点击button来使网页改变颜色，而网页中有一个按钮，点击该按钮使app的actionbar的title改变。需要注意的是，android不能直接通过调用js的方法来获取到返回值，必须通过调用的方法反向调用app的带参数的方法来变通的实现参数回传。废话不多，直接开干！

首先是布局文件，一个按钮，一个webview，代码如下：

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:background="#000"    android:orientation="vertical">    <Button        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:layout_margin="8dp"        android:textSize="18dp"        android:onClick="changeWebColor"        android:text="改变网页颜色" />    <WebView        android:id="@+id/webView"        android:layout_width="match_parent"        android:layout_height="match_parent"></WebView></LinearLayout>

代码非常的简单，来看web页面的代码，网页放置在assets目录下面，取名local.html：

<html><head>    <!--       setHostTitle函数由页面调用来设置app的标题       setBgColor函数用来给app调用    -->    <script type="text/javascript">        function setHostTitle(title){           AppObject.setActionBarTitle(title);        }        function setBgColor(arg){           document.body.style.backgroundColor=arg;        }    </script>    <!--这个是设置网页的初始显示效果，不用理会-->    <style type="text/css">    body{      background-color:#a74d4d;    }    #btn{        width:100%;        padding:10px;        position:relative;        top:50%;        font-size:20px;        background-color:#6ba74d;    }    </style></head><body>    <button id="btn" onclick="setHostTitle('我是改变后的标题')">设置ActionBar标题</button></body></html>

最后来看看java代码：

public class MainActivity extends AppCompatActivity {    WebView webView;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        webView = (WebView) findViewById(R.id.webView);        webView.getSettings().setJavaScriptEnabled(true);//启用js        webView.setWebViewClient(new WebViewClient());//webview内置客户端，这样就不用打开网页的时候调用系统的浏览器了        webView.addJavascriptInterface(this, "AppObject");//绑定接口对象        webView.loadUrl("file:///android_asset/local.html");//加载网页    }      public void changeWebColor(View view) {        webView.loadUrl("javascript:setBgColor('#ccc')");//加载JS函数//        webView.evaluateJavascript("setBgColor('#ccc')", new ValueCallback<String>() {//4.4后也可以使用这个方式调用//            @Override//            public void onReceiveValue(String value) {//                Toast.makeText(MainActivity.this,"调用成功！",Toast.LENGTH_LONG).show();//            }//        });    }@JavascriptInterface public void setActionBarTitle(final String title) {//这里必须在主线程执行,4.2后需要加注解 runOnUiThread(new Runnable() { @Override public void run() { getSupportActionBar().setTitle(title); } }); }}

代码很少，这里就三个函数，oncreate()中我们首先找到webview控件，设置其能调用JS，然后使用this绑定MainActivity到JS，最后加载本地网页（在实际的工作中，我们往往给网页放到服务器上面，那么这里就可以直接写自己的网页地址，比如"http://www.baidu.com"）；第二个函数changeWebColor()是app原生按钮的点击事件响应函数，在这里我们使用loadUrl()来调用js函数，这里我们有传参数过去，注意要使用单引号；最后一个setActionBarTitle()是用来给网页调用的，用它来改变ActionBar的标题，注意这里必须在主线程中执行，要不然会报错，不过不会导致程序奔溃。代码很简单，Manifest我们都无需理会，不用添加任何代码，来看运行效果：

我们来点击app的改变网页颜色按钮，点击之后的运行效果:

点击网页上面的设置ActionBar标题按钮之后的运行效果：

ok，我们看到代码已经非常完美的运行了。

总结

其实网页和原生app的互动是非常简单的，一般在工作中网页那部分代码由前台去写，我们负责java的代码，商量好函数的名字就ok了。归纳为以下步骤：

1、定义webView开启js
2、调用webView.addJavascriptInterface绑定接口
3、互相调用。原生掉网页使用loadUrl或者4.4后的evaluateJavascript，网页调用原生的直接通过上一步的绑定的接口名字调用使用注解标出的方法就可以了

ok，会了这三步走，以后这块知识就不是问题啦。

欢迎关注我的微信公众号“android教科书”，最新最好的文章第一时间送到手！可以扫描下面的二维码来关注：

0 0