開發(fā)之前
大約從去年開始吧, 也可能是前年 Html5好像火得不得了, 不得了...總能從網(wǎng)上聽說到 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
相關(guān)知識點
webView的使用
Json的解析和生成(本案例使用GSON)
Html和js基礎(chǔ)(為方便, 本案例使用了jQuery)
Java和js的交互
我覺得上述Android方面知識點對大家應(yīng)該不算困難. 在H5和js方面我了解的也不是特別深入, 會用用基本的就夠了。
開始開發(fā)
案例預(yù)覽
上面說了, 請原諒界面的不堪入目....
案例分析
說混合開發(fā), 其實就是在WebView上顯示本地的Html文件, 所以我們要解決的問題就是如何將Java的數(shù)據(jù)傳送到Html文件中并且通過JS進行動態(tài)的顯示.
本案例的思路是, 在Activity中生成Json數(shù)據(jù)(這些Json數(shù)據(jù)都是假數(shù)據(jù), 在項目可以直接從網(wǎng)絡(luò)中獲取Json數(shù)據(jù)), Json數(shù)據(jù)通過與JS的交互, 在JS中接收到消息, 然后動態(tài)生成Html的Item顯示在WebView上! 并且每個item都有相應(yīng)的點擊事件, 點擊后回調(diào)Android系統(tǒng)的Toast, 彈出當(dāng)前點擊內(nèi)容.
搭建布局
額..其實就是一個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>
實體類準(zhǔn)備
本例中用于封裝json數(shù)據(jù)
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中調(diào)用.
上述代碼中的兩個方法, 在后面的Js可以通過window調(diào)用.
這個兩個方法剛好能夠演示了, Java向JS傳遞數(shù)據(jù)和JS回傳數(shù)據(jù)給Java代碼
WebView的準(zhǔn)備
WebView的使用有很多需要注意的地方, 咱們分步來說:
step1: 在Activity中初始化WebView
mWebView = (WebView) findViewById(R.id.main_web_view);//解決點擊鏈接跳轉(zhuǎn)瀏覽器問題mWebView.setWebViewClient(new WebViewClient());//js支持WebSettings settings = mWebView.getSettings();settings.setJavaScriptEnabled(true);//允許訪問assets目錄settings.setAllowFileAccess(true);//設(shè)置WebView排版算法, 實現(xiàn)單列顯示, 不允許橫向移動settings.setLayoutAlgorithm(WebSettings.LayoutAlgorithm.SINGLE_COLUMN);//assets文件路徑String path = "file:///android_asset/index.html";//添加Json數(shù)據(jù)addJson();//加載Html頁面mWebView.loadUrl(path);
Note: assets文件的路徑大家先不用管 后面會說.
上面的addJson()方法接下來會說
step2: addJson()方法, 生成Json數(shù)據(jù) 傳給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測試數(shù)據(jù), 這里是Html測試數(shù)據(jù), 這里是Html測試數(shù)據(jù)" + i)); } Gson gson = new Gson(); String json = gson.toJson(zones); Log.d(TAG, "addJson: json => " + json); jsSupport.setJson(json); //添加js交互接口, 并指明js中對象的調(diào)用名稱 mWebView.addJavascriptInterface(jsSupport, "weichat");}Note: Json數(shù)據(jù)傳到JsSupport類之后, 內(nèi)部會有一個getJson()方法可被js調(diào)用, 完成數(shù)據(jù)傳遞
step3: 這一步算是一個小細節(jié), 對于咱們的案例沒啥大用處. 就是當(dāng)你的網(wǎng)頁跳轉(zhuǎn)后, 用戶按返回鍵會返回到上一個頁面而不是退出整個Activity
重寫onBackPressed()方法
@Overridepublic 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文件, 實現(xiàn)與Android系統(tǒng)數(shù)據(jù)交互
<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樣式?jīng)]有放在上面.
其實該文件中主要是用js來實現(xiàn)動態(tài)添加item 并且 給相應(yīng)的item設(shè)置監(jiān)聽...
至此案例代碼梳理完畢.
完整代碼
代碼已經(jīng)上傳到Github, 歡迎大家Clone.
總結(jié)
看到最后大家也許會想, 啥混合開發(fā)這不是so easy! 額..看上去是不難, 畢竟我這只是Demo, 簡單的數(shù)據(jù)傳遞. 希望能拋磚引玉, 得到大神的指導(dǎo). 歡迎大家對本文進行指正和修改.
謝謝簡書作者的分享。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點
疑難解答
