Android的webView和h5+js交互

Android的webView和h5+js交互

现在开发越来越多的遇到Android本地代码和h5和js交互，于是写了个小demo记录一下，效果图如下：

上面图里里面的上面包括返回都是一个webView，底面的Android按钮是一个button。
布局文件如下：

mainactivitty代码如下：

public class MainActivity extends AppCompatActivity implements View.OnClickListener{

    private WebView mWebView;
    private Button mButton;
    private WebAppInterface mAppInterface;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mWebView = (WebView) findViewById(R.id.wb);
        mButton = (Button) findViewById(R.id.button);
        mButton.setOnClickListener(this);
        mAppInterface = new WebAppInterface(this);
        initWeb();
    }

    private void initWeb() {
        mWebView.loadUrl("file:///android_asset/index.html");//加载本地的html

        WebSettings settings = mWebView.getSettings();//获取WebSettings对象，利用WebSettings配置WebView

        settings.setJavaScriptEnabled(true);//设置允许执行JS脚本

        mWebView.addJavascriptInterface(mAppInterface,"app");//添加HTML与AAndroid的通讯接口

    }

    @Override
    public void onClick(View v) {
        if(v.getId() == R.id.button){
            mAppInterface.showName("测试成功");
        }
    }

    class WebAppInterface{
        private Context context;

        public WebAppInterface(Context context) {
            this.context = context;
        }

        //-----------下面是JS调用安卓的的方法

        @JavascriptInterface
        public void sayHello(String name){
            if (name.equals("")){
                Toast.makeText(context,"还没点本地按钮", Toast.LENGTH_SHORT).show();
            }else {
                Toast.makeText(context,name, Toast.LENGTH_SHORT).show();
            }

        }
        @JavascriptInterface
        public void back(){
            Toast.makeText(context,"点击了h5的返回按钮", Toast.LENGTH_SHORT).show();
        }

        //--------------下面是安卓调用js的的方法
        @JavascriptInterface
        public void showName(final String name){
            runOnUiThread(new Runnable() {//Android更新UI需要在主线程
                @Override
                public void run() {
                    mWebView.loadUrl("javascript:showName('"+name+"')");
                }
            });
        }

    }
}

上面的代码都有注释，总结一下就是：

1.注册一个和js交互的接口new WebAppInterface(this);

2.要设置webView的mWebView.getSettings()。settings.setJavaScriptEnabled(true)，允许加载js脚本。

3.mWebView.addJavascriptInterface(mAppInterface,”app”)，添加HTML与Android的通讯接口，app要和html里面调用的保持一致。

4.然后就可以在html写js方法调用或者在Android里面写方法调用js。

到现在为止我们就实现了Android和h5，js交互了 ##

下面是html，我放在了本地asset里面。

    
    
    
    

    

    




    
    
H5和js交互


    
    HTML按钮


  

Demo下载