WebView遇到的用法

Author Avatar
Botasky 2月 12, 2017

这里总结一些项目中遇到的WebView的一些用法:)

1.CyberBlack项目中遇到的

1.1描述：CyberBlack是自己利用空闲时间做的App，里面调用了知乎的API，关于知乎API请看这篇文章：知乎日报API分析 。

项目里面用了http://news-at.zhihu.com/api/4/news/3892357这个接口，里面是拿到了html内容的css文件跟body，然后App端要用WebView做显示。

20170212148689169013360.png

对如何显示内容有一点迷惑。

1.2 解决：在网上查看资料找到这篇[知乎日报四]（http://krelve.com/android/127.html）看了一下，用了博主的方法，顺利显示内容：

做法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
protected void loadData() {
        HttpHelper httpHelper = new HttpHelper();
        httpHelper.setEnd_points(Urls.ZHI_HU_HOST);
        httpHelper.getService(ZhiHuDailyApi.class)
                .getNewsDetail(id)
                .subscribeOn(Schedulers.newThread())
                .observeOn(AndroidSchedulers.mainThread())
                .subscribe(dailyDetailResponse -> {
                    loadView(dailyDetailResponse);
                }, throwable -> {
                }, () -> {
                });
    }
	//这边是拿到了css路径跟html的body，然后用拼接起来放到html中，最后用webview显示。很简单。
    private void loadView(DailyDetailResponse dailyDetailResponse) {
        wvContent.getSettings().setJavaScriptEnabled(true);
        String css = "<link rel=\"stylesheet\" href=\"" + dailyDetailResponse.getCss().get(0) + "\" type=\"text/css\">";
        String html = "<html><head>" + css + "</head><body>" + dailyDetailResponse.getBody() + "</body></html>";
        html = html.replace("<div class=\"img-place-holder\">", "");
        wvContent.loadDataWithBaseURL("x-data://base", html, "text/html", "UTF-8", null);
    }

最后用了这个方法调试几次后成功让webview显示出来正确的格式内容。

2.Podoon项目的WebView

2.1描述

选鞋详细界面需要展示鞋子的详细信息，这个界面是用WebView展示的。但是里面包含了一些js的方法。

2.2用法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
mWebView.getSettings().setJavaScriptEnabled(true);
        mWebView.setWebViewClient(new WebViewClient() {
            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) {
                return true;
            }
            @Override
            public void onPageStarted(WebView view, String url, Bitmap favicon) {
                super.onPageStarted(view, url, favicon);
                ShoeRecordActivity.this.showDialog(null, "载入中,请稍后...");
                logger.info("onPageStarted() called with: " + "view = [" + view + "], url = [" + url + "], favicon = [" + favicon + "]");
            }
            @Override
            public void onPageFinished(WebView view, String url) {
              //这里放javaScript代码，webview加载
                String javaScript = "javascript:function annotationData(){" +
                        "var x=document.getElementById(\"accomTotalDistance\"); x.innerHTML=" + "'" + dis + "km" + "'" + ";" +
                        "var y=document.getElementById(\"accomPace\"); y.innerHTML=" + "'" + pace2 + "'" + ";" +
                        "var z=document.getElementById(\"accomRecordAccount\"); z.innerHTML=" + "'" + record + "'" + ";" +
                        "var a=document.getElementById(\"processDiv\"); a.style.width=" + "'" + progress + "%" + "'" + ";" +
                        "}";
                logger.error("onPageFinished() returned: " + javaScript);
                mWebView.loadUrl(javaScript);
                mWebView.loadUrl("javascript:annotationData()");
                super.onPageFinished(view, url);
                if (dialog.isShowing() && dialog != null) {
                    dialog.cancel();
                }
            }
            @Override
            public void onReceivedHttpAuthRequest(WebView view, HttpAuthHandler handler, String host, String realm) {
                super.onReceivedHttpAuthRequest(view, handler, host, realm);
            }
        });
        mWebView.loadUrl(mURL);