4.混合开发必学的WebView

apk/源码下载地址

封面.png

1.基本使用

布局文件中使用 webview标签

添加联网权限

加载一个网址

public class _4_1_Activity extends BaseActivity {
    private WebView mWebView;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_4_webview);
        mWebView = (WebView) findViewById(R.id.webView);
        mWebView.loadUrl("http://m.youdao.com/");
    }
}

WebViewClient 页面加载过程中的事件通知控制

//自己控制Web加载 有些机型可能回自动调用系统浏览器
mWebView.setWebViewClient(new WebViewClient() {

    /**
     * 拦截新的url
     * 拦截对象：新的Url
     * 调用线程：UI线程
     * @return 控制范围：只能是yes或no
     */
    @Override
    public boolean shouldOverrideUrlLoading(WebView view, String url) {
        view.loadUrl(url);
        return true;
    }

    /**
     * 拦截资源请求
     * 拦截对象：WebResourceRequest
     * 调用线程：IO线程
     * @return 控制范围：模拟数据
     */
    @Override
    public WebResourceResponse shouldInterceptRequest(WebView view, WebResourceRequest request) {
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
            //拦截图片请求 用空数据替换 见下图
            if (request.getUrl().toString().contains(".png")) {
                return new WebResourceResponse(null, null,
                        new ByteArrayInputStream(new byte[0]));
            }
        }
        return super.shouldInterceptRequest(view, request);
    }

    /**
     * 拦截收到错误
     */
    @Override
    public void onReceivedError(WebView view, WebResourceRequest request,
                                WebResourceError error) {
        //这里自定义了一个错误页面
        String data = "404 not found";
        view.loadData(data, "text/html", null);
    }
});

WebSettings 其它设置

WebSettings settings = mWebView.getSettings();
//设置默认文本编码的名字
settings.setDefaultTextEncodingName("utf-8");
//禁止加载图片
settings.setLoadsImagesAutomatically(false);
//启用JavaScript
settings.setJavaScriptEnabled(true);
//设置布局算法 TEXT_AUTOSIZING
settings.setLayoutAlgorithm(WebSettings.LayoutAlgorithm.TEXT_AUTOSIZING);
//开启缩放
settings.setSupportZoom(true);
//扩大比例的缩放
settings.setUseWideViewPort(true);
settings.setBuiltInZoomControls(true);
//隐藏缩放控件
settings.setDisplayZoomControls(false);
//是否读取缓存模式
settings.setCacheMode(WebSettings.LOAD_DEFAULT);
//启用设置水平滚动条
mWebView.setHorizontalScrollBarEnabled(true);
//设置垂直滚动条启用
mWebView.setVerticalScrollBarEnabled(true);
// 安全考虑，防止密码泄漏，尤其是root过的手机
settings.setSavePassword(false);
//自适应屏幕
settings.setLayoutAlgorithm(WebSettings.LayoutAlgorithm.SINGLE_COLUMN);
settings.setLoadWithOverviewMode(true);
settings.setDatabaseEnabled(true);

返回键捕捉

@Override
public void onBackPressed() {
    //webview有上级页面
    if (mWebView.canGoBack()){
        //回退
        mWebView.goBack();
    }else{
        super.onBackPressed();
    }
}

2.与JS交互之 WebChromeClient

与JS交互之WebChromeClient.gif

项目中内置一个写好网页 main/assets/_4_2_javascript.html


    
    
    
        欢迎来到webview与js交互的内容
        


        点击弹出提醒

        点击弹出提示

java中代码

public class _4_2_Activity extends BaseActivity {

    private WebView mWebView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_4_webview);
        mWebView = (WebView) findViewById(R.id.webView);
        
        //启用JavaScript
        mWebView.getSettings().setJavaScriptEnabled(true);
        //不加载缓存
        mWebView.getSettings().setCacheMode(WebSettings.LOAD_NO_CACHE);
        mWebView.setWebViewClient(new WebViewClient(){
            /**
             * 页面加载成功后调用
             */
            @Override
            public void onPageFinished(WebView view, String url) {
                super.onPageFinished(view, url);
                //页面加载成功后 调用js中的代码
                mWebView.loadUrl("javascript:loadSuccess('页面加载成功android注入的内容')");
            }
        });
        mWebView.setWebChromeClient(new WebChromeClient(){

            //处理来自js的提醒
            @Override
            public boolean onJsAlert(WebView view, String url, String message, JsResult result) {
                Toast.makeText(_4_2_Activity.this, message, Toast.LENGTH_SHORT).show();
                //处理掉这个弹窗
                result.confirm();
                return true;
            }
            //处理来自js的提示
            @Override
            public boolean onJsPrompt(WebView view, String url, String message, String defaultValue, JsPromptResult result) {
                Toast.makeText(_4_2_Activity.this, message, Toast.LENGTH_SHORT).show();
                result.confirm("来自android的-莫慌");
                return true;
            }

        });
        mWebView.loadUrl("file:///android_asset/_4_2_javascript.html");
    }
}

3.与JS交互之 addJavascriptInterface

与JS交互之addJavascriptInterface.gif

项目中内置一个写好的main/assets/_4_3_add_interface.html

java中的全部代码

public class _4_3_Activity extends BaseActivity {

    private WebView mWebView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_4_webview);
        mWebView = (WebView) findViewById(R.id.webView);
        //注入Javascript接口 addJavascriptInterFace(注入对象实例,注入对象的名字)
        mWebView.addJavascriptInterface(new MyJavascriptInterface(),"MyJavascriptInterface");
        //开启javascript
        mWebView.getSettings().setJavaScriptEnabled(true);
        mWebView.loadUrl("file:///android_asset/_4_3_add_interface.html");
    }

    /**
     * 需要注入的类
     * 注入范围:
     *          api17一下注入所有Public Method
     *          api17以上 @JavascriptInterface注释的
     */
    private class MyJavascriptInterface {

        @JavascriptInterface
        public String initTitle(){
            return getTitle().toString();
        }
        @JavascriptInterface
        public int add(int x, int y) {
            return x + y;
        }
    }

    @Override
    public void onBackPressed() {
        //在按下返回键的时候java调用js
        mWebView.evaluateJavascript("androidCall()", new ValueCallback() {
            @Override
            public void onReceiveValue(String value) {
                Toast.makeText(_4_3_Activity.this, value, Toast.LENGTH_SHORT).show();
            }
        });
        super.onBackPressed();
    }
}

4.实战之浏览器

实战之浏览器.gif

布局文件activity_4_webview.xml

新建一个menu文件_4_4_menu.xml

java代码

public class _4_4_Activity extends AppCompatActivity {

    private Toolbar mToolbar;
    private WebView mWebView;
    private EditText mInputEdit;
    private ProgressBar mProgressBar;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_4_4);
        mToolbar = (Toolbar) findViewById(R.id.toolbar);
        //设置菜单
        mToolbar.inflateMenu(R.menu._4_4_menu);
        //设置菜单监听
        mToolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
            @Override
            public boolean onMenuItemClick(MenuItem item) {
                switch (item.getItemId()) {
                    case R.id.menu_go:
                        String url = mInputEdit.getText().toString().trim();
                        mWebView.loadUrl(url);
                        break;
                    case R.id.menu_refresh:
                        mWebView.reload();
                        break;
                    case R.id.back:
                        mWebView.goBack();
                        break;
                    case R.id.forward:
                        //goBackOrFprward 负数back 正数
                        mWebView.goForward();
                        break;
                }
                return true;
            }
        });
        //菜单设置回调函数
        mToolbar.setMenuCallbacks(new MenuPresenter.Callback() {
            @Override
            public void onCloseMenu(MenuBuilder menu, boolean allMenusAreClosing) {

            }

            @Override
            public boolean onOpenSubMenu(MenuBuilder subMenu) {
                //webView可以回退才显示回退
                mToolbar.getMenu().findItem(R.id.back).setEnabled(mWebView.canGoBack());
                //webView可以前进才显示前进
                mToolbar.getMenu().findItem(R.id.forward).setEnabled(mWebView.canGoForward());
                return false;
            }
        }, null);

        mWebView = (WebView) findViewById(R.id.webView);
        mInputEdit = (EditText) findViewById(R.id.etInput);
        mProgressBar = (ProgressBar) findViewById(R.id.progressBar);
        mWebView.setWebViewClient(new WebViewClient(){
            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) {
                Uri uri = Uri.parse(url);
                return !uri.getScheme().toLowerCase().startsWith("http");
            }

            //开始加载
            @Override
            public void onPageStarted(WebView view, String url, Bitmap favicon) {
                super.onPageStarted(view, url, favicon);
                //显示进度条
                mProgressBar.setVisibility(View.VISIBLE);
            }

            //加载结束
            @Override
            public void onPageFinished(WebView view, String url) {
                super.onPageFinished(view, url);
                //隐藏进度条
                mProgressBar.setVisibility(View.GONE);
            }
        });
        mWebView.setWebChromeClient(new WebChromeClient(){
            //加载中
            @Override
            public void onProgressChanged(WebView view, int newProgress) {
                super.onProgressChanged(view, newProgress);
                //显示进度
                mProgressBar.setProgress(newProgress);
            }
        });
        //设置下载监听
        mWebView.setDownloadListener(new DownloadListener() {
            @Override
            public void onDownloadStart(String url, String userAgent, String contentDisposition, String mimetype, long contentLength) {
                //交给系统去处理
                Intent intent = new Intent(Intent.ACTION_VIEW);
                intent.setData(Uri.parse(url));
                startActivity(intent);
            }
        });

        WebSettings settings = mWebView.getSettings();
        settings.setJavaScriptEnabled(true);
        settings.setUseWideViewPort(true);
        settings.setSupportZoom(true);
        settings.setBuiltInZoomControls(true);
        settings.setDisplayZoomControls(false);
        settings.setCacheMode(WebSettings.LOAD_DEFAULT);
        settings.setLoadWithOverviewMode(true);
        //cookie 服务器存储在终端的数据 这里不缓存cookie
        CookieManager cookieManager = CookieManager.getInstance();
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
            cookieManager.removeAllCookies(null);
        } else {
            cookieManager.removeAllCookie();
        }
    }

    @Override
    public void onBackPressed() {
        if (mWebView.canGoBack()) {
            mWebView.goBack();
        } else {
            super.onBackPressed();
        }
    }
}

该系列已经出来好几期，这一期开始将在原本枯燥的文字文章中加入gif图片的演示效果，不知道这种形式的文章需要的朋友们会不会喜欢这种风格的文章，或者有那些可以改良的地方，感谢提出。

apk下载地址

4.混合开发必学的WebView

目录

1.基本使用

2.与JS交互之 WebChromeClient

欢迎来到webview与js交互的内容

3.与JS交互之 addJavascriptInterface

4.实战之浏览器

该系列已经出来好几期，这一期开始将在原本枯燥的文字文章中加入gif图片的演示效果，不知道这种形式的文章需要的朋友们会不会喜欢这种风格的文章，或者有那些可以改良的地方，感谢提出。

你可能感兴趣的:(4.混合开发必学的WebView)

4.混合开发必学的WebView

目录

1.基本使用

2.与JS交互之 WebChromeClient

欢迎来到webview与js交互的内容

3.与JS交互之 addJavascriptInterface

4.实战之 浏览器

该系列已经出来好几期，这一期开始将在原本枯燥的文字文章中加入gif图片的演示效果，不知道这种形式的文章需要的朋友们会不会喜欢这种风格的文章，或者有那些可以改良的地方，感谢提出。

你可能感兴趣的:(4.混合开发必学的WebView)

4.实战之浏览器