快捷導(dǎo)航

Android webview如何加載HTML,CSS等語(yǔ)言的示例

更新時(shí)間：2017年11月20日 09:58:57 作者：上官若楓

本篇文章主要介紹了Android webview如何加載HTML,CSS等語(yǔ)言的示例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧

前言

這個(gè)題目可能取得不大好，想了很久沒想出更合適的了。在android開發(fā)webview的時(shí)候，有的時(shí)候后臺(tái)不一定給的就是一個(gè)url，而是把一些HTML，css，js語(yǔ)言代碼給你，然后你自行組裝出webview能夠識(shí)別的語(yǔ)言，并加載到頁(yè)面當(dāng)中。

加載html無(wú)非有三種情況：一、存放在assets文件夾下的html文件；二、直接加載某個(gè)指定的網(wǎng)頁(yè)。三、從網(wǎng)絡(luò)上解析得到的html代碼，注意此處是代碼，即字符串格式。

示例

/**
   * body : <div class="main-wrap content-wrap">...</div>
   * image_source : 《四月物語(yǔ)》
   * 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"]
   */

假如后臺(tái)給你一個(gè)url，而url實(shí)則是json數(shù)據(jù)對(duì)應(yīng)的連接，并不能直接加載到webview當(dāng)中，此時(shí)該如何解決。這個(gè)問題我可以說是一年前就遇到了，后來(lái)一是不知道怎么查，在網(wǎng)上沒有找到相應(yīng)的資料，二是身邊沒有前端的人來(lái)指導(dǎo)，今天問過了前端的同事，才明白了一二。

代碼分析

在往常前端開發(fā)當(dāng)中一般都是自己寫HTML和CSS代碼，然后顯示在瀏覽器，也就android中的webview。對(duì)于android這種情況，只能拼接代碼。后臺(tái)提供相應(yīng)代碼，android開發(fā)自己拼接。其實(shí)沒有那么想象中的那么難，因?yàn)檎f到底都是字符串，對(duì)字符串進(jìn)行一定的格式化就能輕易達(dá)到效果。

代碼實(shí)現(xiàn)

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() {
  }

  /**
   * 根據(jù)css鏈接生成Link標(biāo)簽
   * @param url String
   * @return String
   */
  public static String createCssTag(String url) {
    return String.format(NEEDED_FORMAT_CSS_TAG, url);
  }

  /**
   * 根據(jù)多個(gè)css鏈接生成Link標(biāo)簽
   * @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();
  }

  /**
   * 根據(jù)js鏈接生成Script標(biāo)簽
   *
   * @param url String
   * @return String
   */
  public static String createJsTag(String url) {

    return String.format(NEEDED_FORMAT_JS_TAG, url);
  }

  /**
   * 根據(jù)多個(gè)js鏈接生成Script標(biāo)簽
   *
   * @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();
  }

  /**
   * 根據(jù)樣式標(biāo)簽,html字符串,js標(biāo)簽
   * 生成完整的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);
  }
}

這是個(gè)工具類，專門用于將HTML，CSS等語(yǔ)言連接成HTML。先來(lái)看我們使用的方法createHtmlData，返回的是string連接的一個(gè)字符串，concat方法如下：

css：將json中的css代碼取出來(lái)，并加上前綴

HIDE_HEADER_STYLE：定義整體HTML的style

html：這個(gè)直接就是json數(shù)據(jù)當(dāng)中的html代碼

js:將json中的js代碼取出來(lái)，并加上前綴。

加標(biāo)簽前綴就是利用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

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: