Android开发中webView的使用以及与js交互传值问题

最新推荐文章于 2022-03-02 17:21:49 发布

再次相逢遇见你

最新推荐文章于 2022-03-02 17:21:49 发布

阅读量496

点赞数 1

分类专栏： Android 文章标签： javascript android

本文链接：https://blog.csdn.net/J_zcxf/article/details/53543680

版权

Android 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

1: 现在在开发过程中对程序员的要求越来越高,要求的是综合发展,和混合式开发,单单的android和H5已经不能满足我们android的开发需要,所以我们应该在空闲的时间多充充电,学习一些新的知识下面我就讲一下Android与Js的交互.

2: 大家都知道Android在做一些页面UI效果的时候很复杂,甚至一个简单的页面也需要上百行的代码来实现,而且是相当的复杂,而现实起来也比较难,这对Android程序员是一件非常头疼的事情,但是H5实现UI效果却相对简单些,所以我们可以选择Android与JS的交互实现一些需求

3:具体的Demo
a> 布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.syc.androidwithjs.MainActivity">

    <Button android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="改变html页面内容"
            android:id="@+id/btn_calljs"/>

    <WebView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/wv"/>
</LinearLayout>

b> 首先创建一个资产目录,写一个HTML文件放在里面

<!DOCTYPE html>
 <html>

    <head>
        <meta charset="UTF-8">
        <title>标题</title>
        <style>
            /*标签选择器*/

            body {
                background: #469EFF;
            }

            p {
                color: #fff;
                font-size: 20px;
            }

            .tips {
                border: 1px #ff0 solid;
                padding: 10px;
            }

            div {
                color: #ff0;
                font-size: 20px;
                border: 2px green dashed;
                padding: 10px;
            }
        </style>

    </head>

    <body>
        <p class="tips">Android与JS交互实例</p>
        <!--p表示段落-->
        <p>功能一:点击Android里的按钮,改变以下的文字内容</p>

        <!--容器,里面可以放很多别的标签-->
        <div id="divChange">
            等待被改变的文字,啦啦啦
        </div>

        <p>功能二:在js里面调用Android里的无参方法</p>

        <div id="showToast">点我弹Toast</div>

        <p>功能三:在js里面调用Android里的有参方法</p>
        <div id="showToastWithParams">点我弹带参数的Toast</div>

        <script>
            /*在这里就可以进行js代码的书写了.*/
            function changeDivContent(){
                /*根据id找到某个标签*/
                var div=document.getElementById("divChange");
                div.innerHTML="哈哈,把你改变了...";
            }

            /*得到div标签*/
            var showToast=document.getElementById("showToast");
            /*处理div的点击事件*/
            showToast.onclick=function(){
                mAndroid.showToast();
            }

            var show2=document.getElementById("showToastWithParams");
            show2.onclick=function(){
                mAndroid.showToastWithParams("随便写的参数,啦啦啦");
            }
        </script>
    </body>

</html>

c> MainActivity

public class MainActivity extends AppCompatActivity {
//压制警告注解:
@SuppressLint(“AddJavascriptInterface”)
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

    Button btnCallJs = (Button) findViewById(R.id.btn_calljs);

    final WebView mWv = (WebView) findViewById(R.id.wv);

    WebSettings settings = mWv.getSettings();
    settings.setDefaultTextEncodingName("UTF-8");
    settings.setJavaScriptEnabled(true);

    mWv.loadUrl("file:///android_asset/index.html");

    //添加js的接口.mAndroid是随便写的,代表了当前这个Activity.
    mWv.addJavascriptInterface(this,"mAndroid");

    //实现Android调用js里的函数
    btnCallJs.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            //执行JavaScript里面的changeDivContent()函数.
            mWv.loadUrl("JavaScript:changeDivContent('" + "我是被改变的内容(传值内容)" + "')");
        }
    });
}

//java可以根据字节码进行反射.
//一旦添加JavascriptInterface注解后,就不能在js里面执行反射的功能了.
//供js调用的方法,必须添加JavascriptInterface注解.
@JavascriptInterface
public void showToast(){
    runOnUiThread(new Runnable() {
        @Override
        public void run() {
            Toast.makeText(MainActivity.this, "我是不带参数的Toast!", Toast.LENGTH_SHORT).show();
        }
    });
}

@JavascriptInterface
public void showToastWithParams(final String msg){
    runOnUiThread(new Runnable() {
        @Override
        public void run() {
            Toast.makeText(MainActivity.this, msg, Toast.LENGTH_SHORT).show();
        }
    });
}

}

再次相逢遇见你

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Android开发中webView的使用以及与js交互传值问题

1: 现在在开发过程中对程序员的要求越来越高,要求的是综合发展,和混合式开发,单单的android和H5已经不能满足我们android的开发需要,所以我们应该在空闲的时间多充充电,学习一些新的知识下面我就讲一下Android与Js的交互.2: 大家都知道Android在做一些页面UI效果的时候很复杂,甚至一个简单的页面也需要上百行的代码来实现,而且是相当的复杂,而现实起来也比较难,这对Andr...
复制链接

扫一扫