android 混合开发之与js交互

Android 与WebView与Js进行交互

1、优缺点：快速迭代，一套代码可以适配Android、IOS和Web前端，缺点是性能对比原生来说偏低。

2、完成网页加载，基本需要以下步骤：
（1）、webView相关配置
（2）、加载loading
（3）、android与js互调，涉及到android调用js方法和js调用android方法。
（4）、防止WebView内存泄露

3、各步骤实施如下：
（1）webview的配置，一般都是封装一个类，这样全局可以使用，减少代码量，代码如下：

public class X5WebView extends WebView {
TextView title;
private WebViewClient client = new WebViewClient() {
    /**
     * 防止加载网页时调起系统浏览器
     */
    public boolean shouldOverrideUrlLoading(WebView view, String url) {
        if( url.startsWith("http:") || url.startsWith("https:") ) {
            view.loadUrl(url);
            return true;
        } else
            return true;
    }
        //view.loadUrl(url);
        //return true;
};

@SuppressLint("SetJavaScriptEnabled")
public X5WebView(Context arg0, AttributeSet arg1) {
    super(arg0, arg1);
    this.setWebViewClient(client);
    // this.setWebChromeClient(chromeClient);
    // WebStorage webStorage = WebStorage.getInstance();
    initWebViewSettings();
    this.getView().setClickable(true);
}

private void initWebViewSettings() {
    WebSettings s = this.getSettings();
    s.setJavaScriptEnabled(true);
    s.setJavaScriptCanOpenWindowsAutomatically(true);
    s.setAllowFileAccess(true);
    s.setLayoutAlgorithm(LayoutAlgorithm.NARROW_COLUMNS);
    s.setSupportZoom(false);
    s.setBuiltInZoomControls(false);
    s.setUseWideViewPort(true);
    s.setSupportMultipleWindows(true);
    // s.setLoadWithOverviewMode(true);
    s.setAppCacheEnabled(true);
    // s.setDatabaseEnabled(true);
    s.setDomStorageEnabled(true);
    s.setGeolocationEnabled(true);
    s.setAppCacheMaxSize(Long.MAX_VALUE);
    // s.setPageCacheCapacity(IX5WebSettings.DEFAULT_CACHE_CAPACITY);
    s.setPluginState(WebSettings.PluginState.ON_DEMAND);
    // s.setRenderPriority(WebSettings.RenderPriority.HIGH);
    s.setCacheMode(WebSettings.LOAD_NO_CACHE);
    s.setLayoutAlgorithm(LayoutAlgorithm.NARROW_COLUMNS);
    s.setLoadWithOverviewMode(true);
    s.setSavePassword(true);
    s.setSaveFormData(true);
    s.setDomStorageEnabled(true);

    // this.getSettingsExtension().setPageCacheCapacity(IX5WebSettings.DEFAULT_CACHE_CAPACITY);//extension
    // settings 的设计
}
 }

2、加载loading，我们在布局中使用的控件是progressbar，根据需求设置在相应的位置，一般放置在webview的上面，加载进度条代码如下。

  /**
     * 给webview设置加载进度条
     */
    webView.setWebChromeClient(new WebChromeClient() {

        @Override
        public void onProgressChanged(WebView webView, int i) {
            super.onProgressChanged(webView, i);

            if (i == 100) {
                progressBar.setVisibility(View.GONE);

            } else {

                progressBar.setVisibility(View.VISIBLE);
                progressBar.setProgress(i);
            }
        }
    });

3、android 与js互调。
这里注意点：我们必须先加载网页，后面在互相调用（必须先有载体）。
加载本地的网页的代码如下：

 webView.loadUrl("file:///android_asset/web/index.html"); //加载网页

（1）js调用Android端，代码如下，WebFunction类是封装的所有js调用的方法：

 webView.addJavascriptInterface(new WebFunction(), "irootech")

WebFunction类中代码如下：

  /**
 * js调用android
 */
public class WebFunction {
    //这个是js调用android，给我传递参数。参数是相互定义好的
    @JavascriptInterface
    public void getData(String params, String isAnalyse) {
        //js返回的数据是sql的入参
        if (isAnalyse.equals("true")) {
            chartsActivityPresenter.getAnalyseChartsData(params);
        } else if (isAnalyse.equals("false")) {
            try {
                String result = new JSONObject(params).getString("query");
                JSONObject jsonObject = new JSONObject(result);
                chartsActivityPresenter.getSqlData(jsonObject);
            } catch (JSONException e) {
                e.printStackTrace();
            }
        }
    }
}

（2）Android 调用js中的方法

//这里android 调用js ，通过loadurl，调用js的createChart(),如果传参就定义好，如果不传就直接调用。
webView.loadUrl("javascript:createChart( “参数”)");

4、防止webView内存泄露方案：
核心：让onDetachedFromWindow先走，在主动调用destroy()之前，把webview从它的parent上面移除掉。
https://www.jianshu.com/p/3e8f7dbb0dc7