Android+Html5混合開發(fā)仿微信朋友圈

更新時間：2016年11月02日 14:31:00 作者：changer0

這篇文章主要為大家詳細介紹了Android+Html5混合開發(fā)仿微信朋友圈的相關資料,具有一定的參考價值，感興趣的小伙伴們可以參考一下

開發(fā)之前
大約從去年開始吧, 也可能是前年 Html5好像火得不得了, 不得了...總能從網上聽說到 XXX混合開發(fā), 為了緊跟潮流(雖然有點兒晚了), 咱們也看看Android+Html5混合開發(fā)是怎樣的!
今天帶來的案例是微信的朋友圈, 因為我覺得是微信把H5給"捧紅了". 不過丑話說在前頭, 咱們的仿朋友圈可是"低仿", 只是把混合開發(fā)的大致流程說說, 界面可能不堪入目...見諒..

開發(fā)環(huán)境
Android Studio 2.2.2
JDK1.7
API 24
Gradle 2.2.2
jQuery v3.1.1

相關知識點
webView的使用
Json的解析和生成(本案例使用GSON)
Html和js基礎(為方便, 本案例使用了jQuery)
Java和js的交互

我覺得上述Android方面知識點對大家應該不算困難. 在H5和js方面我了解的也不是特別深入, 會用用基本的就夠了。

開始開發(fā)
案例預覽
上面說了, 請原諒界面的不堪入目....

案例分析
說混合開發(fā), 其實就是在WebView上顯示本地的Html文件, 所以我們要解決的問題就是如何將Java的數據傳送到Html文件中并且通過JS進行動態(tài)的顯示.

本案例的思路是, 在Activity中生成Json數據(這些Json數據都是假數據, 在項目可以直接從網絡中獲取Json數據), Json數據通過與JS的交互, 在JS中接收到消息, 然后動態(tài)生成Html的Item顯示在WebView上! 并且每個item都有相應的點擊事件, 點擊后回調Android系統(tǒng)的Toast, 彈出當前點擊內容.

搭建布局

額..其實就是一個WebView

<?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>

實體類準備

本例中用于封裝json數據

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

  //getter和setter...
}

JS 支持類

這個類用于和JS進行交互.

/**
 * 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();
  }
}

@JavascriptInterface這個注解說明,該方法可以在js中調用.
上述代碼中的兩個方法, 在后面的Js可以通過window調用.
這個兩個方法剛好能夠演示了, Java向JS傳遞數據和JS回傳數據給Java代碼

WebView的準備
WebView的使用有很多需要注意的地方, 咱們分步來說:

step1: 在Activity中初始化WebView

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);

Note: assets文件的路徑大家先不用管后面會說.
上面的addJson()方法接下來會說

step2: addJson()方法, 生成Json數據傳給JsSupport類

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");
}

Note: Json數據傳到JsSupport類之后, 內部會有一個getJson()方法可被js調用, 完成數據傳遞

step3: 這一步算是一個小細節(jié), 對于咱們的案例沒啥大用處. 就是當你的網頁跳轉后, 用戶按返回鍵會返回到上一個頁面而不是退出整個Activity
重寫onBackPressed()方法

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

Html和js部分
這個地方算是今天一個重點了, 接下來分步驟來說如何在Android工程中創(chuàng)建Html和js文件

step1: 在src/main目錄下創(chuàng)建 assets 文件夾, 在創(chuàng)建好的文件夾中創(chuàng)建index.html文件(名字隨意), 接著可以創(chuàng)建你想要的文件或文件夾, 如圖所示

Note: js目錄下存放是jquery庫, 不要忘記添加.
在這里就可以解釋webView中path = "file:///android_asset/index.html"; 這是固定代碼格式, 官方文檔中有寫

step2: 完成index.html文件, 實現與Android系統(tǒng)數據交互

<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>

Note: 在這里我只列出了部分核心代碼, CSS樣式沒有放在上面.
其實該文件中主要是用js來實現動態(tài)添加item 并且給相應的item設置監(jiān)聽...

至此案例代碼梳理完畢.

完整代碼

代碼已經上傳到Github, 歡迎大家Clone.

總結

看到最后大家也許會想, 啥混合開發(fā)這不是so easy! 額..看上去是不難, 畢竟我這只是Demo, 簡單的數據傳遞. 希望能拋磚引玉, 得到大神的指導. 歡迎大家對本文進行指正和修改.

謝謝簡書作者的分享。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: