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

Android 与WebView与Js进行交互

更多相关文章

随机推荐