安卓开发webview使用（1）——加载h5富文本片段

安卓开发webview使用(1)——加载h5富文本片段

问题背景

安卓开发过程中，对于后台接口返回的富文本HTML段落(包含文字和图片img标签)，安卓端要使用webview对h5片段进行加载，因为片段中图片URL获取需要cookie鉴权，之前的场景是不需要鉴权的，特对此进行总结。

(1)html片段如图所示： (2)直接使用postman对图片进行访问。 不设置cookie时，报错401，如图所示：

设置cookie后，可以正常访问，获取到图片，此时可根据postman的URL对应cookie信息，了解我们访问对应URL需要的cookie内容。

问题分析

同事提供的之前的方案。

(1)直接调用webview的loadDataWithBaseURL()方法加载，代码如下：

webview.loadDataWithBaseURL(BuildConfig.BASE_URL, info.getContent(),
                                "text/html","UTF-8",null);

(2)调用webview的loadData()方法，对h5片段中的img标签地址进行处理，代码如下：

String newContent = detail.getNewsContent()
                        .replaceAll("src=\"" + "/xx/xxxx", "src=\"" + BuildConfig.BASE_URL + "x/xxxx");
                String jsContent = newContent.replace("<p", "<p style='word-break: break-all'");
                jsContent = jsContent.replaceAll("color: #", "color: ");
                content.loadData(jsContent, "text/html; charset=UTF-8", null);

问题解决

(1)本次需求h5片段中图片URL访问需要cookie，webview加载html前，增加webview设置cookie的逻辑。代码如下：

public static void synchronousWebCookies(String url) {
        try {
            String token = null;
            CookieManager cookieManager = CookieManager.getInstance();
            List<Cookie> cookies = .....;// 项目中获取cookie的逻辑

            StringBuilder cookieString = new StringBuilder();
            for (Cookie cookie : cookies) {
                if ("token对应的key".equals(cookie.name()) && !TextUtils.isEmpty(cookie.value())) {
                    token = cookie.value();
                }
                cookieString.append(cookie.name()).append("=").append(cookie.value()).append(";");
            }

            cookieManager.setAcceptCookie(true);
            cookieManager.removeSessionCookie();
            cookieManager.removeAllCookie();

            cookieManager.setCookie(url, "Cookie1=" + ***);
            cookieManager.setCookie(url, "Cookie2=" + "***");
            // 关键cookie
            cookieManager.setCookie(url, "Cookie3-token=" + ***);
            cookieManager.setCookie(url, "Cookie4-Id=" + ***;

            cookieManager.flush();

        } catch (Exception e) {
            e.printStackTrace();
        }
    }

(2)加载的地方还是直接使用loadDataWithBaseURL即可，代码如下：

webview.loadDataWithBaseURL(BuildConfig.BASE_URL
                                    , HtmlFormat.getNewContent(noticeInfo.getContent())
                                    , "text/html", "UTF-8", null);

问题总结

本文主要介绍安卓开发中webview加载h5富文本，主要包括两部分，(1)h5中图片url访问需要cookie验证，所以在webview加载html前需要设置cookie。(2)使用webview原生的loadDataWithBaseURL方法直接加载h5片段。特此总结，后续有需要持续更新。