Android与H5相互接口调用及Android端接口整理

 

近几年随着HTML5的功能越来越强大，H5页面的性能虽然稍差，单其灵活性很高，更新页面成本比原生小很多，一个页面可以被android和ios同时使用开发成本也比较低，所以移动端的开发已经不是单单的原生开发了，于是乎这就避免不了会进行Android和H5的交互。

一、H5调用android接口。

js 中调用Android的方法

    //H5中调用Android的方法
    function myOnclick(){
        //调用android本地方法 ，方法由Android提供 (具体对象名和方法待定，可变更)
        mobile.callAndroid("给Android传递的数据");
    }

 android给webView添加js接口

    //设置编码
    mWebView.getSettings().setDefaultTextEncodingName("utf-8");
    //支持js
    mWebView.getSettings().setJavaScriptEnabled(tr
    //设置本地调用对象及其接口
    //第一个参数为实例化自定义的接口对象  第二个参数为提供给JS端调用使用的对象名
    mWebView.addJavascriptInterface(new Contact
        @JavascriptInterface    //必须加的注解
        @Override
        public void openActivityByPath(String path) {//android给H5开的接口
                Intent intent = new Intent();
                intent.setClassName(mActivity, path);
                mActivity.startActivity(intent);
            }
    }, "mobile");

     //定义接口，提供给JS调用
    interface Contact {
        @JavascriptInterface
        void callAndroid(String phone);

    }

二、android调用H5接口。

js给android提供的接口

     //H5给Android提供的方法
    function callH5(data){
        document.getElementById("result").innerHTML="result success for Android to:"+data;
    }

android在点击事件中调用js接口 

findViewById(R.id.button).setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            //Android调用Js方法
            mWebView.loadUrl("javascript:callH5('Android给H5传递的参数')");
        }
    });

三、android接口简单整理。

如果js接口过多会导致对webView的配置过长，影响代码的可读性和维护性，可以把给h5提供的接口都提取到一个类里，在webView 的配置中这样代码就清晰了很多。

AndroidJsUtils mAndroidJsUtils = new AndroidJsUtils(DoWebViewActivity.this);
mWebView.addJavascriptInterface(mAndroidJsUtils, "mobile");

 接口类

public class AndroidJsUtils implements Serializable {

    private BaseActivity mActivity; //工程的baseActivity

    public AndroidJsUtils(BaseActivity activity) {
            this.mActivity = activity;
    }

    /**
     * 打开任意页面
     * @param path 页面的完整路径例如："com.xiaoxiao9575.demo.activity.DemoActivity"
     */
    @JavascriptInterface
    public void openActivityByPath(String path) {
        Intent intent = new Intent();
        intent.setClassName(mActivity, path);
        mActivity.startActivity(intent);
    }

}

四、WebView统一设置。

如果项目中有多个页面都用到了webView，各自配置维护起来就比较麻烦了，可以采用下面的方式统一配置。

/**
 * author: xiaoxiao9575
 * email:  xiaoxiao9575@126.com
 * csdn:   https://blog.csdn.net/weixin_40998254
 * createTime:  2019/4/11 10:09 AM
 */
public class MyBaseWebView extends WebView {

    private AndroidJsUtils mAndroidJsUtils;

    public MyBaseWebView(Context context) {
        super(context);
    }

    public MyBaseWebView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public MyBaseWebView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    @SuppressLint("SetJavaScriptEnabled")
    public void initWebViewSetting(Activity activity){
        final WebSettings mWebSettings = this.getSettings();
        mWebSettings.setJavaScriptEnabled(true);
        this.setOverScrollMode(View.OVER_SCROLL_NEVER);
        mWebSettings.setDefaultTextEncodingName("utf-8");
        mWebSettings.setUseWideViewPort(true);
        mWebSettings.setLoadWithOverviewMode(true);
        mWebSettings.setCacheMode(WebSettings.LOAD_NO_CACHE);
        mWebSettings.setDomStorageEnabled(true);
        mWebSettings.setJavaScriptCanOpenWindowsAutomatically(true);
        mWebSettings.setNeedInitialFocus(false);
        mWebSettings.setAllowFileAccess(true);
        mWebSettings.setAppCacheEnabled(true);
        mWebSettings.setAllowFileAccessFromFileURLs(true);
        mWebSettings.setDatabaseEnabled(true);
        String dbPath = activity.getDir("database", Context.MODE_PRIVATE).getPath();
        mWebSettings.setDatabasePath(dbPath);
        mWebSettings.setAppCachePath(dbPath);
        mWebSettings.setAppCacheMaxSize(5 * 1024 * 1024);
        mWebSettings.setGeolocationEnabled(true);
        mWebSettings.setGeolocationDatabasePath(dbPath);
        //不显示webview缩放按钮
        mWebSettings.setDisplayZoomControls(false);

        if (Build.VERSION.SDK_INT >= 21) {
            mWebSettings.setMixedContentMode(WebSettings.MIXED_CONTENT_ALWAYS_ALLOW);
        }

        mAndroidJsUtils = new AndroidJsUtils(activity);
        this.addJavascriptInterface(mAndroidJsUtils, "mobile");

    }

}