<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
  android:orientation="vertical"
  xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:tools="http://schemas.android.com/tools"
  android:id="@+id/activity_main"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  tools:context="com.lulu.weichatfriends.MainActivity">
  <WebView
    android:id="@+id/main_web_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"/>
</LinearLayout>

public class FriendsZone {
  private String name;
  private String icon;
  private String content;

  //getter和setter...
}

/**
 * Created by Lulu on 2016/10/27.
 * JS支持类
 */
public class JsSupport {
  private Context mContext;
  private String json;

  public JsSupport(Context context) {
    mContext = context;
  }
  public void setJson(String json) {
    this.json = json;
  }

  @JavascriptInterface
  public String getJson(){
    return json;
  }

  @JavascriptInterface
  public void showToast(String str) {
    Toast.makeText(mContext, str, Toast.LENGTH_SHORT).show();
  }
}

mWebView = (WebView) findViewById(R.id.main_web_view);
//解决点击链接跳转浏览器问题
mWebView.setWebViewClient(new WebViewClient());
//js支持
WebSettings settings = mWebView.getSettings();
settings.setJavaScriptEnabled(true);
//允许访问assets目录
settings.setAllowFileAccess(true);
//设置WebView排版算法, 实现单列显示, 不允许横向移动
settings.setLayoutAlgorithm(WebSettings.LayoutAlgorithm.SINGLE_COLUMN);
//assets文件路径
String path = "file:///android_asset/index.html";
//添加Json数据
addJson();
//加载Html页面
mWebView.loadUrl(path);

private void addJson() {
  JsSupport jsSupport = new JsSupport(this);
  List<FriendsZone> zones = new ArrayList<>();
  for (int i = 0; i < 100; i++) {
    zones.add(new FriendsZone("鹿鹿" + i, "images/icon.png", "这里是Html测试数据, 这里是Html测试数据, 这里是Html测试数据" + i));
  }
  Gson gson = new Gson();
  String json = gson.toJson(zones);
  Log.d(TAG, "addJson: json => " + json);
  jsSupport.setJson(json);
  //添加js交互接口, 并指明js中对象的调用名称
  mWebView.addJavascriptInterface(jsSupport, "weichat");
}

@Override
public void onBackPressed() {
  if (mWebView.canGoBack()) {
    mWebView.goBack();
  } else {
    super.onBackPressed();
  }
}

<img id="head_background" src="images/background.jpg" />
<script>
  var json = window.weichat.getJson();
  var infos = eval(json);
  for(var i = 0; i < infos.length; i++) {
    info = infos[i];
    var img = info.icon;
    var userName = info.name;
    var content = info.content;
    $("#head_background").after("<div ><div id='nav'><img src=" + img + " /></div><div id='info'><div id='userName'>" + userName + "</div><p id='content'>" + content + "</p></div></div>");
    $("#userName").click(
      function() {
        var str = $(this).text();
        window.weichat.showToast(str);
      }
    )
    $("#content").click(
      function() {
        var str = $(this).text();
        window.weichat.showToast(str);
      }
    )
  }
</script>