Android webview如何加载HTML,CSS等语言的示例

前言

这个题目可能取得不大好，想了很久没想出更合适的了。在android开发webview的时候，有的时候后台不一定给的就是一个url，而是把一些html，css，js语言代码给你，然后你自行组装出webview能够识别的语言，并加载到页面当中。

加载html无非有三种情况：一、存放在assets文件夹下的html文件；二、直接加载某个指定的网页。 三、从网络上解析得到的html代码，注意此处是代码，即字符串格式。

示例

/**
   * body : <div class="main-wrap content-wrap">...</div>
   * image_source : 《四月物语》
   * title : 我喜欢你，但你别喜欢我：*在单相思中的性单恋者
   * image : http://pic3.zhimg.com/4d37a2dff96d07f6a01e7b8aabd63032.jpg
   * share_url : http://daily.zhihu.com/story/9100667
   * js : []
   * ga_prefix : 122713
   * images : ["http://pic4.zhimg.com/a32e73507ebe9a963f48c3bcc9808773.jpg"]
   * type : 0
   * id : 9100667
   * css : ["http://news-at.zhihu.com/css/news_qa.auto.css?v=4b3e3"]
   */

假如后台给你一个url，而url实则是json数据对应的连接，并不能直接加载到webview当中，此时该如何解决。这个问题我可以说是一年前就遇到了，后来一是不知道怎么查，在网上没有找到相应的资料，二是身边没有前端的人来指导，今天问过了前端的同事，才明白了一二。

代码分析

在往常前端开发当中一般都是自己写html和css代码，然后显示在浏览器，也就android中的webview。对于android这种情况，只能拼接代码。后台提供相应代码，android开发自己拼接。其实没有那么想象中的那么难，因为说到底都是字符串，对字符串进行一定的格式化就能轻易达到效果。

代码实现

public class htmlutil {
  // css样式，隐藏header
  private static final string hide_header_style = "<style>div.headline{display:none;}</style>";

  // css style tag, 需要格式化
  private static final string needed_format_css_tag = "<link rel=\"stylesheet\" type=\"text/css\" href=\"%s\"/>";

  // js script tag, 需要格式化
  private static final string needed_format_js_tag = "<script src=\"%s\"></script>";

  public static final string mime_type = "text/html; charset=utf-8";

  public static final string encoding = "utf-8";

  public htmlutil() {
  }

  /**
   * 根据css链接生成link标签
   * @param url string
   * @return string
   */
  public static string createcsstag(string url) {
    return string.format(needed_format_css_tag, url);
  }

  /**
   * 根据多个css链接生成link标签
   * @param urls list<string>
   * @return string
   */
  public static string createcsstag(list<string> urls) {
    final stringbuilder sb = new stringbuilder();
    for (string url : urls) {
      sb.append(createcsstag(url));
    }
    return sb.tostring();
  }

  /**
   * 根据js链接生成script标签
   *
   * @param url string
   * @return string
   */
  public static string createjstag(string url) {

    return string.format(needed_format_js_tag, url);
  }

  /**
   * 根据多个js链接生成script标签
   *
   * @param urls list<string>
   * @return string
   */
  public static string createjstag(list<string> urls) {

    final stringbuilder sb = new stringbuilder();
    for (string url : urls) {
      sb.append(createjstag(url));
    }
    return sb.tostring();
  }

  /**
   * 根据样式标签,html字符串,js标签
   * 生成完整的html文档
   */
  public static string createhtmldata(string html, list<string> csslist, list<string> jslist) {
    final string css = htmlutil.createcsstag(csslist);
    final string js = htmlutil.createjstag(jslist);
    return css.concat(hide_header_style).concat(html).concat(js);
  }
}

这是个工具类，专门用于将html，css等语言连接成html。先来看我们使用的方法createhtmldata，返回的是string连接的一个字符串，concat方法如下：

css：将json中的css代码取出来，并加上前缀

hide_header_style：定义整体html的style

html：这个直接就是json数据当中的html代码

js:将json中的js代码取出来，并加上前缀。

加标签前缀就是利用string.format(needed_format_js_tag, url);方法，将前面格式中的%s，替换成后边的代码。

引用到webview

string htmldata = htmlutil.createhtmldata(entity.getbody(), entity.getcss(), entity.getjs());
webview.loaddata(htmldata, htmlutil.mime_type, htmlutil.encoding);

源代码引用：https://github.com/yiyibb/zhihu

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。