【Android】Android中WebView实现Java与JS交互

现在混合式开发是大趋势，H5不断蚕食移动互联网的份额，有的公司甚至只用H5就搞了一个APP，我们搞Android的不说会点H5，至少要懂怎么和H5（和JavaScript）交互，费话不多说。

一、先看效果：

二、此效果图实现了以下4个功能：

1. Java调用JS中的无参函数；
2. Java调用JS中的有参函数，参数是从Java中传入的；
3. JS调用Java的无参函数；
4. JS调用Java中的有参函数，参数是从JS中传入的；

三、说几个重点的地方：

1、调用本地html的方法（html放在assets文件夹中，当然实战中会是一个网址，html一般是H5开发人员来写）

//打开从本地assets中的html文件
mWebView.loadUrl("file:///android_asset/androidAndJs.html");

2、在Android中声明一个接口名字，供JS调用（ addJavascriptInterface()的第二个参数 ）

//提供给js的接口名称
mWebView.addJavascriptInterface(mContext, "android");

3、调用WebView的addJavascriptInterface()，需要在Activity的onCreate()方法上加上注解：@SuppressLint("JavascriptInterface")

@SuppressLint("JavascriptInterface")
@Override
public void onCreate(Bundle savedInstanceState) {
    //省略
}

4、供JS调用的方法要加上注解：@JavascriptInterface

    //供JS调用的方法
    @JavascriptInterface
    public void jsCallJava(){
        runOnUiThread(new Runnable() {
            @Override
            public void run() {
                Toast.makeText(mContext, "js调用java的代码", Toast.LENGTH_SHORT).show();
            }
        });
    }

5、Java调用JS代码

__5.1 调用JS无参函数

mWebView.loadUrl("javascript:javaCallJs()");

__5.2 如果要传参数，字符串用单引号包裹！

mWebView.loadUrl("javascript:javaCallJsWithArgs('我是从java过来的参数')");

6、不要忘记网络权限

四、接下来是完整代码：

布局文件：

MainActivity代码：

package com.clipperl.androidjsdemo2;

import android.annotation.SuppressLint;
import android.content.Context;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.webkit.JavascriptInterface;
import android.webkit.WebView;
import android.widget.Button;
import android.widget.TextView;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

    private Context mContext = this;

    private WebView mWebView;
    private TextView mTvShow;
    private Button mBtnNoArgs, mBtnWithArgs;

    @SuppressLint("JavascriptInterface")
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        initView();

        //支持javascript
        mWebView.getSettings().setJavaScriptEnabled(true);
        //打开从本地assets中的html文件
        mWebView.loadUrl("file:///android_asset/androidAndJs.html");
        //提供给js的接口名称
        mWebView.addJavascriptInterface(mContext, "android");

    }

    private void initView() {
        mWebView = (WebView) findViewById(R.id.webview);
        mTvShow = (TextView) findViewById(R.id.tv_show);
        mBtnNoArgs = (Button) findViewById(R.id.btn_no_args);
        mBtnWithArgs = (Button) findViewById(R.id.btn_with_args);

        mBtnNoArgs.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                mWebView.loadUrl("javascript:javaCallJs()");
            }
        });

        mBtnWithArgs.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                mWebView.loadUrl("javascript:javaCallJsWithArgs('我是从java过来的参数')");
            }
        });
    }
    //供JS调用的方法
    @JavascriptInterface
    public void jsCallJava(){
        runOnUiThread(new Runnable() {
            @Override
            public void run() {
                Toast.makeText(mContext, "js调用java的代码", Toast.LENGTH_SHORT).show();
            }
        });
    }
    //供JS调用的方法
    @JavascriptInterface
    public void jsCallJavaWithArgs(final String args){
        runOnUiThread(new Runnable() {
            @Override
            public void run() {
                Toast.makeText(mContext, "js调用了java的代码,并传入以下参数：\n" + args, Toast.LENGTH_SHORT).show();
            }
        });
    }
}

最后是html文件：

    
        
        
        
    
    
        html网页