Android Hybrid混合开发(Webview+JSBridge)简介

导论:
WebView是一个基于webkit引擎、展现web页面的android控件,由于H5的快速发展,现在Hybrid混合开发已经成为中庸选择.本篇主要介绍webview及开源框架JSBridge.

原生Webview知识:

1:注册相关权限

<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION"/>

2:webview常见方法

goBack() //后退 
goForward() //前进 
goBackOrForward(intsteps) //以当前的index为起始点前进或者后退到历史记录中指定的steps，如果steps为负数则为后退，正数则为前进 
canGoForward() //是否可以前进 
canGoBack() //是否可以后退

//清除缓存 
clearCache(true) //清除网页访问留下的缓存，由于内核缓存是全局的因此这个方法不仅仅针对webview而是针对整个应用程序. 
clearHistory() //清除当前webview访问的历史记录，只会webview访问历史记录里的所有记录除了当前访问记录. 
clearFormData() //清除自动完成填充的表单数据，不会清除WebView存储到本地的数据。

//状态 
onResume() //激活WebView为活跃状态，能正常执行网页的响应 
onPause() //WebView处于暂停状态，onPause动作通知内核暂停所有的动作，比如DOM的解析、plugin的执行、JavaScript执行。 
pauseTimers() //暂停所有webview的layout，parsing，javascripttimer。降低CPU功耗。 
resumeTimers() //恢复pauseTimers时的动作。 
destroy() //销毁，关闭了Activity时，音乐或视频，还在播放。就必须销毁。

//重新加载网页 
reload()

//加载本地资源
webView.loadUrl("file:///android_asset/example.html");

//加载网络资源
webView.loadUrl("www.xxx.com/index.html");

//加载手机本地的一个html页面的方法 
webView.loadUrl(“content://com.android.htmlfileprovider/sdcard/test.html”); 

//可以加载html片段
String data = " Html 数据";
webView.loadDataWithBaseURL(null,data, "text/html", "utf-8",null);

//关闭硬件加速
webView.setLayerType(View.LAYER_TYPE_SOFTWARE, null);

//判断WebView滚动到顶端还是低端
// 已经处于底端
if (webView.getContentHeight() * webView.getScale() == (webView.getHeight() + webView.getScrollY())) {
}
// 处于顶端
if(webView.getScrollY() == 0){
}

//设置手机返回按键监听
public boolean onKeyDown(int keyCode, KeyEvent event) {
    if (keyCode == KeyEvent.KEYCODE_BACK && webView.canGoBack()) {
        webView.goBack();
        return true;
    }
    finish();
    return super.onKeyDown(keyCode, event);


//Activity退出销毁WebView 
protected void onDestroy() {
    if (webView != null) {
        webView.loadDataWithBaseURL(null, "", "text/html", "utf-8", null);
        webView.clearHistory();

        ((ViewGroup) webView.getParent()).removeView(webView);
        webView.destroy();
        webView = null;
    }
    super.onDestroy();
}

3:WebSettings –webview常规设置

WebSettings webSettings = webView.getSettings();

webSettings.setJavaScriptEnabled(true);//设置支持JavaScript
webSettings.setDefaultTextEncodingName("utf-8");//设置编码格式
webSettings.setTextSize(TextSize.SMALLER);//设定字体大小：
webSettings.setPluginsEnabled(true); //支持插件
webSettings.setSupportZoom(true);  //支持缩放
webSettings.setLayoutAlgorithm(WebSettings.LayoutAlgorithm.SINGLE_COLUMN); //支持内容重新布局
webSettings.supportMultipleWindows();  //多窗口
webSettings.setAllowFileAccess(true);  //设置可以访问文件
webSettings.setNeedInitialFocus(true); //当webview调用requestFocus时为webview设置节点
webSettings.setBuiltInZoomControls(true); //是否支持内置按钮缩放和手势“捏”缩放，如果设为false则webview不支持缩放功
webSettings.setJavaScriptCanOpenWindowsAutomatically(true); //支持通过JS打开新窗口
webSettings.setLoadsImagesAutomatically(true);  //支持自动加载图片
webSettings.setDisplayZoomControls(false);      //是否隐藏原生的缩放控件
webSettings.setDomStorageEnabled(true);//开启 DOM storage API 功能
webSettings.setDatabaseEnabled(true);//开启 database storage API 功能
webSettings.setAppCacheEnabled(true); //开启 Application Caches 功能


String cacheDirPath = getFilesDir().getAbsolutePath() + APP_CACAHE_DIRNAME;
webSettings.setAppCachePath(cacheDirPath); //设置  Application Caches 缓存目录

WebView屏幕自适应
webSettings.setUseWideViewPort(true);
webSettings.setLoadWithOverviewMode(true);

缓存设置
if (NetStatusUtil.isConnected(getApplicationContext())) {
    webSettings.setCacheMode(WebSettings.LOAD_DEFAULT);//有网，根据cache-control决定是否从网络上取数据。
} else {
    webSettings.setCacheMode(WebSettings.LOAD_CACHE_ELSE_NETWORK); //没网，则从本地获取，即离线加载
}
String appCachePath = getApplicationContext().getCacheDir().getAbsolutePath();
webSettings.setAppCachePath(appCachePath);//设置缓存数据目录

4:WebViewClient–处理各种通知、请求事件

WebViewClient webViewClient = new WebViewClient(){

    //超链接加载,打开网页时不调用系统浏览器，而是在本WebView中显示。也可捕获超链接url,做相关操作
    public boolean shouldOverrideUrlLoading(WebView view, String url) {
        view.loadUrl(url);
        return true;    //返回true表示在当前浏览器中加载
    }

    //网页开始加载
    public void onPageStarted(WebView view, String url, Bitmap favicon) {
        super.onPageStarted(view, url, favicon);
    }

    //网页加载结束
    public void onPageFinished(WebView view, String url) {
        super.onPageFinished(view, url);
    }

    //网页加载失败
    public void onReceivedError(WebView view, WebResourceRequest request, WebResourceError error) {
        super.onReceivedError(view, request, error);
    }

    //对Https的支持
    public void onReceivedSslError(WebView view, SslErrorHandler handler, SslError error) {
        handler.proceed();
    }

    //针对页面中每一个资源都会调用一次，用于捕获页面资源
    public void onLoadResource(WebView view, String url) {
        super.onLoadResource(view, url);
    }
};
webView.setWebViewClient(webViewClient);

5:WebChromeClient–处理Javascript的对话框，网站图标，网站title，加载进度等

WebChromeClient webChromeClient = new WebChromeClient(){
    //获取网页加载进度
    public void onProgressChanged(WebView view, int newProgress) {
        if (newProgress < 100) {
            String progress = newProgress + "%";
        } else {
        }
        super.onProgressChanged(view, newProgress);
    }

    //获取标题
    public void onReceivedTitle(WebView view, String title) {
        super.onReceivedTitle(view, title);
        titleview.setText(title)；
    }

    //获取标题ICON
    public void onReceivedIcon(WebView view, Bitmap icon) {
        super.onReceivedIcon(view, icon);
    }

    //警告框
    public boolean onJsAlert(WebView view, String url, String message, JsResult result) {
        if(message!=null){
            //TODO
            //捕获网页中弹框信息
            Toast.makeText(getApplicationContext(), message, Toast.LENGTH_LONG).show();
        }
        result.cancel();   //
        return true;       //表示确认进行捕获
    }

    //确认框，通过这个值可判断点击时是确定还是取消，确定为true，取消为false
    public boolean onJsConfirm(WebView view, String url, String message, JsResult result) {
        return super.onJsConfirm(view, url, message, result);
    }

    //输入框，会返回输入框中的值，点击取消返回null
    public boolean onJsPrompt(WebView view, String url, String message, String defaultValue, JsPromptResult result) {
        return super.onJsPrompt(view, url, message, defaultValue, result);
    }
    //定位
    public void onGeolocationPermissionsHidePrompt() {
        super.onGeolocationPermissionsHidePrompt();
    }
    //定位
    public void onGeolocationPermissionsShowPrompt(final String origin, final GeolocationPermissions.Callback callback) {
        callback.invoke(origin, true, false);  //注意个函数，第二个参数就是是否同意定位权限，第三个是是否希望内核记住
        super.onGeolocationPermissionsShowPrompt(origin, callback);
    }

    //WebSettings要支持多窗口
    public boolean onCreateWindow(WebView view, boolean isDialog, boolean isUserGesture, Message resultMsg) {
        WebView.WebViewTransport transport = (WebView.WebViewTransport) resultMsg.obj;
        transport.setWebView(webView);
        resultMsg.sendToTarget();
        return true;
    }

    public void onCloseWindow(WebView window) {
        super.onCloseWindow(window);
    }
};

webView.setWebChromeClient(webChromeClient);

6:支持文件下载

DownloadListener downloadListener = new DownloadListener() {
    public void onDownloadStart(String url, String userAgent, String contentDisposition, String mimetype, long contentLength) {
        Uri uri = Uri.parse(url);
        Intent intent = new Intent(Intent.ACTION_VIEW, uri);
        startActivity(intent);
    }
};

webView.setDownloadListener(downloadListener);

JSBridge框架简介:
JS和native通信的桥梁,是一个很好的开源框架,用它比原生函数调用方便和安全很多,更低的开发成本, 这是链接:
https://github.com/firewolf-ljw/WebViewJSBridge
1:添加依赖

dependencies {
    compile 'com.github.lzyzsd:jsbridge:1.0.4'
}

2:在layout xml使用BridgeWebView代替原生webview

 <com.github.lzyzsd.jsbridge.BridgeWebView
        android:id="@+id/webView"
        android:layout_width="match_parent"
        android:layout_height="match_parent" >
    </com.github.lzyzsd.jsbridge.BridgeWebView>

3:JS和android传递数据关键代码示例

//js传递数据给android
//js端关键代码(html):
function testClick1() {
            var str1 = document.getElementById("text1").value;
            var str2 = document.getElementById("text2").value;
            window.WebViewJavascriptBridge.callHandler(
                'submitFromWeb'
                , {'Data': 'json数据传给Android端'}  //该类型是任意类型
                , function(responseData) {
                    document.getElementById("show").innerHTML = "Android端: =" + responseData
                }
            );
        }
//android端关键代码(activity):
bridgeWebView.registerHandler("submitFromWeb", new BridgeHandler() {
            public void handler(String data, CallBackFunction function) {
                Toast.makeText(MainActivity.this, "RegisterHandler来自js的数据:"+ data, Toast.LENGTH_LONG).show();
                function.onCallBack("android端RegisterHandler收到js的数据,回传数据给你");
            }
        });

//android传递数据给js(注册事件监听)
//android端关键代码(activity):
User user = new User(100, "aile");
        bridgeWebView.callHandler("functionJs", new Gson().toJson(user), new CallBackFunction() {
            public void onCallBack(String data) {
                Toast.makeText(MainActivity.this, "来自js的回传数据:" + data, Toast.LENGTH_LONG).show();
            }
        });
//js端关键代码(html):
         //注册事件监听
        function connectWebViewJavascriptBridge(callback) {
            if (window.WebViewJavascriptBridge) {
                callback(WebViewJavascriptBridge)
            } else {
                document.addEventListener(
                    'WebViewJavascriptBridgeReady'
                    , function() {
                        callback(WebViewJavascriptBridge)
                    },
                    false
                );
            }
        }

        connectWebViewJavascriptBridge(function(bridge) {
            bridge.init(function(message, responseCallback) {
                var data = {
                    'json': 'JS返回任意数据!'
                };
                 document.getElementById("init").innerHTML = "data = " + message;
                responseCallback(data);
            });
            //这里接收Android端发来的数据并回传数据
            bridge.registerHandler("functionJs", function(data, responseCallback) {
                document.getElementById("show").innerHTML = ("Android端: = " + data);
                var responseData = "Javascript回传数据";
                responseCallback(responseData);
            });
        })

好了,结束.