Android WebView 运用

最新推荐文章于 2021-04-08 10:41:25 发布

猪队友

最新推荐文章于 2021-04-08 10:41:25 发布

阅读量157

点赞数

本文链接：https://blog.csdn.net/qq_23062979/article/details/81294560

版权

1、webview 1.0版本 ---最简单的加载网页

 mWebView.loadUrl("http://blog.csdn.net/");

这样基本上是可以显示网页的，不过显示的内容可能和你想象的不大一样，因为没有配置各种setting。比如JS的使用，缩放，是否可以访问文件等等。

2、webview 1.1版本 -- 设置各种参数


        // HTML5支持的配置
        WebSettings webSettings = webView.getSettings();
      
        webSettings.setJavaScriptEnabled(true);
        webSettings.setDefaultTextEncodingName("utf-8");
        webSettings.setBuiltInZoomControls(true);
        webSettings.setSupportZoom(true);
        webSettings.setBuiltInZoomControls(true);
        webSettings.setAllowFileAccess(true);  //设置可以访问文件
        webSettings.setJavaScriptCanOpenWindowsAutomatically(true); //支持通过JS打开新窗口
        webSettings.setLoadsImagesAutomatically(true);  //支持自动加载图片
        webSettings.setUseWideViewPort(true);  //将图片调整到适合webview的大小
            webSettings.setUserAgentString("userAgent");
        // pc网页屏幕自动适配
        webSettings.setUseWideViewPort(true);
        webSettings.setLoadWithOverviewMode(true);
        //支持多窗口模式
        webSettings.supportMultipleWindows();
        //html的支持
        webSettings.setSavePassword(false);
        webSettings.setSaveFormData(false);
        // 启用数据库
        webSettings.setDatabaseEnabled(true);
        String dir = context.getApplicationContext()
                .getDir("database", Context.MODE_PRIVATE).getPath();
        // 设置数据库路径
        webSettings.setDatabasePath(dir);
        // 使用localStorage则必须打开
        webSettings.setDomStorageEnabled(true);
        // 启用地理定位
        webSettings.setGeolocationEnabled(true);
        // 设置定位的数据库路径
        webSettings.setGeolocationDatabasePath(dir);

根据我们的需求合理设置WebSettings。这样我们基本上可以打开自己想要的页面，也有了和页面相应的交互了。但是这个可能还满足不了工作上的需求。比如我要在Webview内部跳转，加上进度条，对某些链接进行特殊处理等等，而不是点击调到系统的浏览器里面。那么我们开始下一个版本。

3、webview 1.2版本
我们需要认识一下两个新朋友

WebViewClient类：处理各种通知 & 请求事件
WebChromeClient :辅助 WebView 处理 Javascript 的对话框,网站图标,网站标题等等。

全部方法.png

首先来看一下WebViewClient 中的shouldOverrideUrlLoading方法的描述

Give the host application a chance to take over the control when a new
     * url is about to be loaded in the current WebView. If WebViewClient is not
     * provided, by default WebView will ask Activity Manager to choose the
     * proper handler for the url. If WebViewClient is provided, return true
     * means the host application handles the url, while return false means the
     * current WebView handles the url.
     * This method is not called for requests using the POST "method".

中文意思大概是：当一个新的URL加载到这个WebView里的时候，主程序拥有一个接管控制权的机会，如歌这个类没有使用，默认是询问Activity Manager 选择一个恰当的处理程序给这个webview。如果我们使用这个WebViewClient，如果返回true，那么意味着交给主程序去处理这个URL，如果返回false，那么就是当前webview处理这个url。该方法不使用 POST的请求方式。翻译的很烂，英语好的可以替我翻译一下。

当我看到这个的时候也是一知半解，啥意思啊，主程序处理和webview的处理区别在哪里呢？那我们就做个demo来看一下吧。

  mWebView.setWebViewClient(new MyWebViewClient());

public class MyWebViewClient extends WebViewClient {
    @Override
    public boolean shouldOverrideUrlLoading(WebView view, String url) {
        boolean isOverride = super.shouldOverrideUrlLoading(view, url);
        Log.i("webview","url shouldOverrideUrlLoading:"+isOverride+"");
        return isOverride;
    }
}

如果我们设置了setWebViewClient，就说明以后的URL处理交给了这个webview，这个也是webviewclient的含义，然后我们来看返回值得区别。通过看源码或者英文描述，默认返回false，就是说明我们不会重写URl的loading，也就是说一切的点击都这在这个webview里面，相当于我们自己的浏览器。
如果返回true就说明你劫持了这个url，你想做什么自己决定，可以劫持这个url我们重新打开一个WebActivity。这样我们就可以对特定的url做处理了。
比如其他的onLoadResource、onReceivedHttpError、onPageStarted、onPageFinished就很简单了，根据名字就知道大概的功能了，就不一一讲解了。大家可以测试一下。
如果我们想要给我们的webview加上进度条又该怎么办呢？那就需要WebChromeClient大兄弟了。

 @Override
    public void onProgressChanged(WebView view, int newProgress) {
        super.onProgressChanged(view, newProgress);
    }

    @Override
    public void onReceivedTitle(WebView view, String title) {
        super.onReceivedTitle(view, title);
    }

    @Override
    public void onReceivedIcon(WebView view, Bitmap icon) {
        super.onReceivedIcon(view, icon);
    }

    @Override
    public boolean onJsAlert(WebView view, String url, String message, JsResult result) {
        return super.onJsAlert(view, url, message, result);
    }

    @Override
    public boolean onShowFileChooser(WebView webView, ValueCallback<Uri[]> filePathCallback, FileChooserParams fileChooserParams) {
        return super.onShowFileChooser(webView, filePathCallback, fileChooserParams);
    }

这几个是比较常用的方法。
onProgressChanged可以监听到打开页面的进度。
onReceivedTitle可以获取页面的title
onReceivedIcon可以获取页面的Icon
onShowFileChooser webview调用系统的文件系统
重点和难点是 webview如何如何能打开比如图库，摄像头等功能。
因为不同android版本的打开方法不一样所以我们要

   //For Android 3.0+
    public void openFileChooser(ValueCallback<Uri> uploadMsg, String acceptType) {
        mOpenFileChooserCallBack.openFileChooserCallBack(uploadMsg, acceptType);
    }


    // For Android < 3.0
    public void openFileChooser(ValueCallback<Uri> uploadMsg) {
        openFileChooser(uploadMsg, "");
    }


    // For Android  > 4.1.1
    public void openFileChooser(ValueCallback<Uri> uploadMsg, String acceptType, String capture) {
        openFileChooser(uploadMsg, acceptType);
    }


    // For Android > 5.0
    @Override
    public boolean onShowFileChooser(WebView webView, com.tencent.smtt.sdk.ValueCallback<Uri[]> valueCallback, FileChooserParams fileChooserParams) {
        mOpenFileChooserCallBack.openFileChooserCallBackAndroid5(valueCallback, "");
        return true;
    }

根据不同api来调用我们的处理函数。
既然js会调用这些方法中的一个，其实也就是分为5.0以上和以下两个回调方法。那么我们也相应的让activity回调webview的这个方法。

public interface OpenFileChooserCallBack {
        void openFileChooserCallBack(ValueCallback<Uri> uploadMsg, String acceptType);

        void openFileChooserCallBackAndroid5(ValueCallback<Uri[]> uploadMsg, String acceptType);
    }

然后就是打开图库或者摄像头

  @Override
    public void openFileChooserCallBack(ValueCallback<Uri> uploadMsg, String acceptType) {
        mValueCallback = uploadMsg;
        if (checkRights()) {
            showOptions();
        }
    }

    @Override
    public void openFileChooserCallBackAndroid5(ValueCallback<Uri[]> uploadMsg, String acceptType) {
        mValueCallbackAndroid5 = uploadMsg;
        if (checkRights()) {
            showOptions();
        }
    }
 //检车读写文件 拍照像个权限
    private boolean checkRights() {
        if (ActivityCompat.checkSelfPermission(MainActivity.this, Manifest.permission.WRITE_EXTERNAL_STORAGE)
                != PackageManager.PERMISSION_GRANTED
                || ActivityCompat.checkSelfPermission(MainActivity.this, Manifest.permission.CAMERA)
                != PackageManager.PERMISSION_GRANTED) {
            //申请WRITE_EXTERNAL_STORAGE权限
            ActivityCompat.requestPermissions(MainActivity.this, new String[]{Manifest.permission.WRITE_EXTERNAL_STORAGE, Manifest.permission.CAMERA},
                    WRITE_EXTERNAL_STORAGE_REQUEST_CODE);
            return false;
        }
        return true;
    }

    public void showOptions() {
        android.app.AlertDialog.Builder alertDialog = new android.app.AlertDialog.Builder(this);
        alertDialog.setOnCancelListener(new ReOnCancelListener());
        alertDialog.setTitle("选择图片");
        alertDialog.setItems(new String[]{"相机选取", "拍照", "取消"}, new DialogInterface.OnClickListener() {
                    @Override
                    public void onClick(DialogInterface dialog, int which) {
                        if (which == 0) {
                            mSourceIntent = ImageUtil.choosePicture();
                            startActivityForResult(mSourceIntent, REQUEST_CODE_PICK_IMAGE);
                            overridePendingTransition(R.anim.in_from_left, R.anim.out_to_right);
                        } else if (which == 1) {
                            mSourceIntent = ImageUtil.takeBigPicture();
                            startActivityForResult(mSourceIntent, REQUEST_CODE_IMAGE_CAPTURE);
                            overridePendingTransition(R.anim.in_from_left, R.anim.out_to_right);
                        } else {
                            dialog.dismiss();
                            dialog.cancel();
                        }
                    }
                }
        );
        alertDialog.show();
    }

那么怎么把图片的信息交给js呢？

 @Override
    public void onActivityResult(int requestCode, int resultCode, Intent data) {

        Log.i("webview", "onActivityResult");
        if (resultCode != Activity.RESULT_OK) {
            return;
        }
        switch (requestCode) {

            case REQUEST_CODE_IMAGE_CAPTURE:
            case REQUEST_CODE_PICK_IMAGE: {
                try {
                    if (mValueCallback == null && mValueCallbackAndroid5 == null) {
                        return;
                    }
                    String sourcePath = ImageUtil.retrievePath(this, mSourceIntent, data);
                    if (TextUtils.isEmpty(sourcePath) || !new File(sourcePath).exists()) {
                        Log.i("webview", "sourcePath empty or not exists.");
                        break;
                    }
                    Uri uri = Uri.fromFile(new File(sourcePath));
                    if (mValueCallback != null) {
                        mValueCallback.onReceiveValue(uri);
                        Log.i("webview", "   mValueCallback.onReceiveValue(uri)"+uri);
                    }

                    if (mValueCallbackAndroid5 != null) {
                        mValueCallbackAndroid5.onReceiveValue(new Uri[]{uri});
                        Log.i("webview", "   mValueCallbackAndroid5.onReceiveValue(uri)"+uri);
                    }

                    //通知更新图库
                    if (requestCode == REQUEST_CODE_IMAGE_CAPTURE) {
                        sendBroadcast(new Intent(Intent.ACTION_MEDIA_SCANNER_SCAN_FILE, uri));
                    }
                } catch (Exception e) {
                    e.printStackTrace();
                }
                break;
            }
        }
    }

我们回调方法里面ValueCallback<Uri> mValueCallback，ValueCallback<Uri[]> mValueCallbackAndroid5 负责把消息带给js，如果没有url那么记得 =null，不然下次回调方法不会调用。我猜测是因为有一个值得判断，如果为空才会相应，不为空就不相应。感兴趣的朋友可以看看源码，我的水平有限，希望各位朋友不吝指教。
对于交互http://blog.csdn.net/carson_ho/article/details/52693322大神写的很好，可以参考这个。