Android与js交互

最新推荐文章于 2024-07-24 11:23:56 发布

欢乐斗佛

最新推荐文章于 2024-07-24 11:23:56 发布

阅读量1.2k

点赞数

分类专栏： android进阶文章标签： js javascript

本文链接：https://blog.youkuaiyun.com/qq379454816/article/details/71172632

版权

android进阶专栏收录该内容

15 篇文章

订阅专栏

随着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" οnclick="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我们都无需理会，不用添加任何代码，来看运行效果：