安卓webview的详细使用详情，webview和js交互

最近用到了webview这个控件，在此和大家分享一下：

Webview（网络视图） 主要是在APP中嵌套网页的一个控件，不使用手机中下载的浏览器去访问网页，而是通过手机自带的系统浏览器去访问一个url，通俗说就是个浏览器。

WebView控件功能强大，除了具有一般View的属性和设置外，还可以对url请求、页面加载、渲染、页面交互进行强大的处理。

1、第一步，访问网络必须在清单文件中设置网络权限：

    <!-- 允许应用程序联网，以便向我们的服务器端发送数据 -->

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

2、在布局文件中添加webview控件：

    <WebView
        android:id="@+id/webview_main"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scrollbars="none"/>   //  设置其滚动条为none

3、设置webview的一些相关属性：

        //设置此属性，可任意比例缩放
        webview.getSettings().setUseWideViewPort(true);
        webview.getSettings().setLoadWithOverviewMode(true);
        // 设置自动加载图片
        webview.getSettings().setLoadsImagesAutomatically(true);
        //支持缩放
        webview.getSettings().setBuiltInZoomControls(true);
        //设置是否支持变焦
        webview.getSettings().setSupportZoom(true);
        // 设置允许访问文件数据
        webview.getSettings().setAllowFileAccess(true);
        //  这是webview保存表单数据
        webview.getSettings().setSaveFormData(false);
        //自适应屏幕
        webview.getSettings().setLayoutAlgorithm(LayoutAlgorithm.SINGLE_COLUMN);
        webview.getSettings().setLoadWithOverviewMode(true);

       //启用支持javascript
        webview.getSettings().setJavaScriptEnabled(true);

       // 调用JS交互的方法 重点

        webview.addJavascriptInterface(new JsInteration(), "demo");
        // 优先使用缓存
        webview.getSettings().setCacheMode(WebSettings.LOAD_NO_CACHE); //  不使用缓存 只从网络获取数据
       webview.getSettings().setAppCacheEnabled(false);

4、 去加载你所需要的网页的url

     //WebView加载web资源
        webview.loadUrl(webUrl);

5、webview的一些方法的使用：

如果页面中链接，如果希望点击链接继续在当前browser中响应，而不是新开Android的系统browser中响应该链接，必须覆盖webview的WebViewClient对象。

//覆盖WebView默认使用第三方或系统默认浏览器打开网页的行为，使网页用WebView打开
        webview.setWebViewClient(new WebViewClient(){
            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) {
               //  webview  每次都会加载， 不能放在下面的判断 ，如果加载一次  页面将无法进行点击
                //  返回true的时候  用webview打开，为false的时候用第三方浏览器打开
                view.loadUrl(url);
                return true;
            };

        // shouldOverrideUrlLoading表示当前webView中的一个新url需要加载时，如果没有重写此函数，webView请求ActivityManage选择合适的方式处理请求，就像弹出uc和互联网让用户选择浏览器一样。重写后return true表示让当前程序处理，return false表示让当前webView处理。

            //onPageStarted  方法是在页面加载开始时执行的方法，返回当前页面的url

            @Override
            public void onPageStarted(WebView view, String url, Bitmap favicon) {
                // TODO Auto-generated method stub
                super.onPageStarted(view, url, favicon);
                Log.i("GG","onPageFinished"+url);
            }
    
            //onPageFinished方法是在页面加载完成时执行的方法，返回页面的url
            @Override
            public void onPageFinished(WebView view, String url) {
                // TODO Auto-generated method stub
                // super.onPageFinished(view, url);
               //      finish();
            }
        });
        //  JavaScript
        webview.setWebChromeClient(new WebChromeClient(){
            @Override
            public boolean onJsAlert(WebView view, String url, String message, android.webkit.JsResult result) {
                return super.onJsAlert(view, url, message, result);
            };
        });

6、下面是JS交互的的方法 ，里面是和前端共同的方法，需要在前面时候进行定义，需要安卓和前端定义个标示（“demo”）,上面有定义的，这里在此强调一下：webview.addJavascriptInterface(new JsInteration(), "demo");

下面是JsInteration方法，里面覆写JS交互的方法，网页调用什么方法就写什么方法，下面是具体例子：

public class JsInteration {
        //网页调用什么方法就写什么方法
        @JavascriptInterface
        public void toastMessage(String message) {
            Toast.makeText(getApplicationContext(), message, Toast.LENGTH_LONG).show();
        }

        @JavascriptInterface
        public void onSumResult(int result) {
            Toast.makeText(getApplicationContext(), "onSumResult result=" + result, Toast.LENGTH_LONG).show();
        }
        //  js 交互  返回数据
        @JavascriptInterface
        public void clickOnAndroid(String orderId,String totalFee,String productInfo){
          //  这是JS交互的方法，此方法是安卓点击某个按钮出发JS事件，然后前端给安卓返回数据，然后安卓这边接收

          //  接收完数据记得刷新下页面

           // webview更新页面
            webview.reload();
        }
        @JavascriptInterface
        public void shareOnAndroid(String title,String desc,String link,String imgUrl){
            if(title == null && desc == null && link == null && imgUrl == null){
                Toast.makeText(MainActivity.this, "暂无数据数据", Toast.LENGTH_LONG);
            }else{
             //  需要执行的代码。。。
            }
}      
    }

7、点击返回键的onKeydown事件：

如果不做任何处理，浏览网页，点击系统“Back”键，整个Browser会调用finish()而结束自身，如果希望浏览的网页回退而不是推出浏览器，需要在当前Activity中处理并消费掉该Back事件。

@Override
    public boolean onKeyDown(int keyCode, KeyEvent event) {

if(keyCode == KeyEvent.KEYCODE_BACK){
            if(webview.canGoBack()){
                    webview.goBack();//返回上一页面
                    return true;
                else{
                        MainActivity.this.finish();//关闭页面
                }
            }
        }
        return super.onKeyDown(keyCode, event);
    }