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

时间:2021-04-28 00:45:59

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

问题背景

安卓开发过程中,对于后台接口返回的富文本HTML段落(包含文字和图片img标签),安卓端要使用webview对h5片段进行加载,因为片段中图片URL获取需要cookie鉴权,之前的场景是不需要鉴权的,特对此进行总结。 (1)html片段如图所示: 安卓开发webview使用(1)——加载h5富文本片段 (2)直接使用postman对图片进行访问。 不设置cookie时,报错401,如图所示: 安卓开发webview使用(1)——加载h5富文本片段 设置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片段。特此总结,后续有需要持续更新。