Android开发之WebView与js的数据传递-创新互联

在Android开发中不可避免的会出现，使用一个WebView来显示一个h6页面。如果仅仅只是显示h6页面,这不需要特殊的处理，但是很多情况下会出现，js和WebView的交互。比如：将html表单中的数据，传递到Activity中，在Activity中对数据校验，再上传到服务器。

成都创新互联是一家集网站建设,绿春企业网站建设,绿春品牌网站建设,网站定制,绿春网站建设报价,网络营销,网络优化,绿春网站推广为一体的创新建站企业，帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿，时刻以成就客户成长自我，坚持不断学习、思考、沉淀、净化自己，让我们为更多的企业打造出实用型网站。

那么js和WebView如何进行的交互的呢？

创建AndroidHtml项目。主要代码如下：

MainActivity.java:

    private WebView mWebView;
    public static final String URL_TEST="file:///android_asset/index.html";

    @SuppressLint("JavascriptInterface")
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mWebView = (WebView) findViewById(R.id.webView);
        WebSettings settings = mWebView.getSettings();
        settings.setJavaScriptEnabled(true);

        mWebView.loadUrl(URL_TEST);
        //addJavascriptInterface这个方法中有两个参数，第一个参数是添加一个对象，这个对象中封装了在js中要调用的native方法，第二个参数是告诉js对象的名称以便于调用native方法
        mWebView.addJavascriptInterface(this,"zzh");//
    }

    @JavascriptInterface//android 4.2之上的版本需要加上这个注解，表示将这个方法暴露给js调用
    public void callAndroidNativeMethod(String str){
        Log.d("MainActivity","---方法被执行了！！！-");
        Toast.makeText(this, "---"+str, Toast.LENGTH_LONG).show();
    }

注解@JavascriptInterface注解在Android版本4.2之上必须要加上。Google官方的解释是

Caution: If you've set your targetSdkVersion to 17 or higher, you must add the @JavascriptInterface annotation to any method that you want available to your JavaScript (the method must also be public). If you do not provide the annotation, the method is not accessible by your web page when running on Android 4.2 or higher.

index.html:

<!DOCTYPE html>
<HTML lang="zh-CN">
    <head>
        <meta charset="utf-8">
        <script type="text/javascript" language="javascript">
            function callAndroidNativeMethod(){
                window.zzh.callAndroidNativeMethod("js中的数据传递到了Android中了");
            }
        </script>
    </head>
    <body>
        <button onclick="callAndroidNativeMethod()">点击调用Java代码</button>
    </body>
</HTML>

activity_main.xml中的布局是：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    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"
    tools:context="com.zzh.androidhtml.MainActivity">
    <Button
        android:id="@+id/button"
        android:text="Java调用js方法"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>
    <WebView
        android:id="@+id/webView"
        android:layout_below="@+id/button"
        android:layout_width="match_parent"
        android:layout_height="match_parent"></WebView>
</RelativeLayout>

好了，上面就是js中如何调用Android Native方法。下面来说说Android Native中怎么调用js方法（要注意Native中调用js方法来处理Android中的业务逻辑的效率差，不建议使用此方式处理Android业务逻辑，但是也要知道如何使用）。

private WebView mWebView;
public static final String URL_TEST="file:///android_asset/index.html";

@SuppressLint("JavascriptInterface")
@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    mWebView = (WebView) findViewById(R.id.webView);
    WebSettings settings = mWebView.getSettings();
    settings.setJavaScriptEnabled(true);

    mWebView.loadUrl(URL_TEST);
    mWebView.addJavascriptInterface(this,"zzh");

    findViewById(R.id.button).setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View view) {
            mWebView.loadUrl("javascript:callJavaScriptMethod()");
        }
    });
}

@JavascriptInterface//android 4.2之上的版本需要加上这个注解，表示将这个方法暴露给js调用
public void callAndroidNativeMethod(String str){
    Log.d("MainActivity","---方法被执行了！！！-");
    Toast.makeText(this, "---"+str, Toast.LENGTH_LONG).show();
}

index.html文件比较简单

<!DOCTYPE html>
<HTML lang="zh-CN">
<head>
    <meta charset="utf-8">
    <script type="text/javascript" language="javascript">
            function callAndroidNativeMethod(){
                window.zzh.callAndroidNativeMethod("js中的数据传递到了Android中了");
            }
            function callJavaScriptMethod(){
                document.getElementById("content").innerHTML += "<br\>java调用了js函数";
            }
    </script>
</head>
<body>
<button onclick="callAndroidNativeMethod()">点击调用Java代码</button>
<div id="content"></div>
</body>
</HTML>

示例比较简单，注释也写的比较清楚不做过多的讲解，全凭自己领悟。

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

当前标题：Android开发之WebView与js的数据传递-创新互联
文章位置：https://www.cdcxhl.com/article0/dcgjoo.html

成都网站建设公司_创新互联，为您提供品牌网站设计、关键词优化、定制开发、网站建设、标签优化、响应式网站

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容