Android+Html5混合開發仿微信朋友圈_Android

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

開發環境
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方面我瞭解的也不是特別深入, 會用用基本的就夠了。

開始開發
案例預覽
上面說了, 請原諒介面的不堪入目....

案例分析
說混合開發, 其實就是在WebView上顯示本地的Html檔案, 所以我們要解決的問題就是如何將Java的資料傳送到Html檔案中並且通過JS進行動態顯示.

本案例的思路是, 在Activity中產生Json資料(這些Json資料都是假資料, 在項目可以直接從網路中擷取Json資料), Json資料通過與JS的互動, 在JS中接收到訊息, 然後動態產生Html的Item顯示在WebView上! 並且每個item都有相應的點擊事件, 點擊後回調Android系統的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: 這一步算是一個小細節, 對於咱們的案例沒啥大用處. 就是當你的網頁跳轉後, 使用者按返回鍵會返回到上一個頁面而不是退出整個Activity
重寫onBackPressed()方法

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

Html和js部分
這個地方算是今天一個重點了, 接下來分步驟來說如何在Android工程中建立Html和js檔案

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

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

step2: 完成index.html檔案, 實現與Android系統資料互動

<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來實現動態添加item 並且 給相應的item設定監聽...

至此案例代碼梳理完畢.

完整代碼

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

總結

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

謝謝簡書作者的分享。

以上就是本文的全部內容，希望對大家的學習有所協助，也希望大家多多支援雲棲社區。