Android開(kāi)發(fā)方式之Java+html+javascript混合開(kāi)發(fā)
android開(kāi)發(fā),除了使用原生態(tài)的開(kāi)發(fā)方式之外,還可以使用java+html+javascript混合開(kāi)發(fā)的方式來(lái)開(kāi)發(fā),這樣可以節(jié)省大量的開(kāi)發(fā)時(shí)間,同時(shí)還可以使不同設(shè)備的用戶獲得相同的用戶體驗(yàn)。好了,廢話不多說(shuō),先來(lái)看看今天要做什么。
主要是實(shí)現(xiàn)一個(gè)簡(jiǎn)單的注冊(cè)功能,先用jquery mobile的方式寫一個(gè)簡(jiǎn)單的注冊(cè)頁(yè)面,點(diǎn)擊提交按鈕之后跳轉(zhuǎn)到一個(gè)新的activity中,同時(shí)把用戶的注冊(cè)信息顯示出來(lái),整體效果如下圖:
這個(gè)頁(yè)面完全用html+jquery寫成,它的最下面有一個(gè)提交按鈕,點(diǎn)擊提交按鈕之后該頁(yè)面的所有注冊(cè)信息傳遞到下一個(gè)activity中。
這個(gè)界面是完全用android原生態(tài)的方式來(lái)開(kāi)發(fā)。ok,下面一步一步來(lái)說(shuō)。
新建一個(gè)名叫webViewTest的工程,在assets文件夾中新建一個(gè)文件叫做index.html,index.html文件代碼如下:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>無(wú)標(biāo)題文檔</title> <link rel="stylesheet" type="text/css"> <script src="http://code.jquery.com/jquery-1.6.4.min.js" type="text/javascript"></script> <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js" type="text/javascript"></script> </head> <body> <script> $(function(){ $("#commit").click(function(){ var result = "{"; result +="\"username\":\""; result +=$("#username").val(); result +="\",\"password\":\""; result +=$("#password").val(); result += "\",\"gender\":\""; result += $('input[name="radio1"]:checked').val(); result += "\",\"interest\":\""; $('input[name="checkbox1"]:checked').each(function() { result += $(this).val()+","; }); result += "\",\"country\":\""; result += $("#selectmenu option:selected").text()+"\"}"; register_js.register(result); }); }); </script> <div data-role="page" id="page"> <div data-role="header"> <h1>標(biāo)題</h1> </div> <div data-role="content"> <ul data-role="listview" data-inset="true"> <li data-role="list-divider"> 注冊(cè) </li> <li> <div data-role="fieldcontain"> <label for="username">用戶名:</label> <input type="text" name="textinput" id="username" value="張三" /> </div></li><li> <div data-role="fieldcontain"> <label for="password">密碼:</label> <input type="password" name="textinput" id="password" value="zhangsan" /> </div></li><li> <div data-role="fieldcontain"> <fieldset data-role="controlgroup" data-type="horizontal"> <legend>性別:</legend> <input type="radio" name="radio1" id="man" value="0" /> <label for="man">男</label> <input type="radio" name="radio1" id="woman" value="1" /> <label for="woman">女</label> </fieldset> </div></li><li> <div data-role="fieldcontain"> <fieldset data-role="controlgroup" data-type="horizontal"> <legend>愛(ài)好</legend> <input type="checkbox" name="checkbox1" id="football" class="custom" value="0" /> <label for="football">足球</label> <input type="checkbox" name="checkbox1" id="basketball" class="custom" value="1" /> <label for="basketball">籃球</label> <input type="checkbox" name="checkbox1" id="vollyball" class="custom" value="2" /> <label for="vollyball">排球</label> </fieldset> </div> </li> <li> <div data-role="fieldcontain"> <label for="selectmenu" class="select">國(guó)籍:</label> <select name="selectmenu" id="selectmenu"> <option value="China">中國(guó)</option> <option value="America">美國(guó)</option> <option value="Japan">小日本</option> </select> </div> </li> <li> <button id="commit">提交</button> </li> </ul> </div> <div data-role="footer" data-position="fixed"> <h4>腳注</h4> </div> </div> </body> </html>
這里全部都是jquerymobile的知識(shí),前面三行是引用jquery和jquerymobile的js文件以及jqueryMobile的css樣式文件。當(dāng)點(diǎn)擊button時(shí),執(zhí)行js代碼,js代碼獲取每一項(xiàng)的值,同時(shí)拼湊成一個(gè)json字符串,然后執(zhí)行register_js.register(result);方法,這是一個(gè)什么方法呢?這是一會(huì)加載這個(gè)html的activity中的一個(gè)名叫register的方法,result是這個(gè)方法的參數(shù),至于前面為什么是register_js,我們一會(huì)再說(shuō)。
再看看加載這個(gè)html的activity長(zhǎng)什么樣子,先看看它的布局文件:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" tools:context="com.example.webviewtest.MainActivity" > <WebView android:id="@+id/wv1" android:layout_width="match_parent" android:layout_height="wrap_content" /> </LinearLayout>
它的布局文件中就一個(gè)控件,webView.
再來(lái)看看Java代碼:
package com.example.webviewtest; import android.app.Activity; import android.content.Intent; import android.os.Bundle; import android.webkit.WebView; public class MainActivity extends Activity { private WebView wv; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); wv = (WebView) this.findViewById(R.id.wv1); wv.getSettings().setJavaScriptEnabled(true); wv.loadUrl("file:///android_asset/index.html"); wv.addJavascriptInterface(this, "register_js"); } public void register(String userInfo){ Intent intent = new Intent(MainActivity.this,RegisterActivity.class); intent.putExtra("userinfo", userInfo); this.startActivity(intent); } }
先拿到一個(gè)webview,然后wv.getSettings().setJavaScriptEnabled(true);表示允許執(zhí)行js代碼,wv.loadUrl("file:///android_asset/index.html");表示把剛才的html文件加載進(jìn)來(lái),注意文件路徑,項(xiàng)目中是assets文件夾,并不是android_assets,wv.addJavascriptInterface(this, "register_js");表示創(chuàng)建一個(gè)對(duì)象傳遞給webview,作為js對(duì)象,這里把這個(gè)activity傳遞給webview,名稱叫做register_js,所以在js中執(zhí)行這個(gè)activity中的方法時(shí)前面要加上register_js,當(dāng)然,你可以傳遞任何一個(gè)類的實(shí)例作為js對(duì)象,這樣就可以在js中調(diào)用該類的方法了。public void register(String userInfo)方法就是點(diǎn)擊html中的提交按鈕時(shí)執(zhí)行的方法了,該方法跳轉(zhuǎn)將執(zhí)行跳轉(zhuǎn)到另一個(gè)activity中,并攜帶用戶注冊(cè)數(shù)據(jù)。
再來(lái)看看registerActivity的布局文件:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" tools:context="com.example.webviewtest.MainActivity" > <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:text="注冊(cè)成功,您的注冊(cè)信息是:" android:textSize="30dp" /> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal" > <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="用戶名:" android:textSize="25sp" /> <TextView android:id="@+id/username" android:layout_width="wrap_content" android:layout_height="wrap_content" android:textSize="25sp" /> </LinearLayout> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal" > <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="密碼:" android:textSize="25sp" /> <TextView android:id="@+id/password" android:layout_width="wrap_content" android:layout_height="wrap_content" android:textSize="25sp" /> </LinearLayout> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal" > <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="性別:" android:textSize="25sp" /> <TextView android:id="@+id/gender" android:layout_width="wrap_content" android:layout_height="wrap_content" android:textSize="25sp" /> </LinearLayout> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal" > <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="愛(ài)好:" android:textSize="25sp" /> <TextView android:id="@+id/interest" android:layout_width="wrap_content" android:layout_height="wrap_content" android:textSize="25sp" /> </LinearLayout> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal" > <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="國(guó)籍:" android:textSize="25sp" /> <TextView android:id="@+id/country" android:layout_width="wrap_content" android:layout_height="wrap_content" android:textSize="25sp" /> </LinearLayout> </LinearLayout>
RegisterActivity的Java代碼:
package com.example.webviewtest; import org.json.JSONException; import org.json.JSONObject; import android.app.Activity; import android.os.Bundle; import android.widget.TextView; public class RegisterActivity extends Activity { private TextView username, password, interest, country, gender; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); this.setContentView(R.layout.register_activity); this.username = (TextView) this.findViewById(R.id.username); this.password = (TextView) this.findViewById(R.id.password); this.interest = (TextView) this.findViewById(R.id.interest); this.country = (TextView) this.findViewById(R.id.country); this.gender = (TextView) this.findViewById(R.id.gender); String userinfo = this.getIntent().getExtras().getString("userinfo"); try { JSONObject json = new JSONObject(userinfo); username.setText(json.getString("username")); password.setText(json.getString("password")); interest.setText(json.getString("interest").replace("0", "足球") .replace("1", "籃球").replace("2", "排球")); country.setText(json.getString("country").replace("0", "中國(guó)") .replace("1", "美國(guó)").replace("2", "小日本")); gender.setText(json.getString("gender").replace("0", "男") .replace("1", "女")); } catch (JSONException e) { e.printStackTrace(); } } }
這些都是常規(guī)的android開(kāi)發(fā)代碼,我就不多解釋了。
另外,還要在布局文件中添加以下權(quán)限:
<uses-permission android:name="android.permission.CAMERA" /> <uses-permission android:name="android.permission.VIBRATE" /> <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" /> <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" /> <uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS" /> <uses-permission android:name="android.permission.READ_PHONE_STATE" /> <uses-permission android:name="android.permission.INTERNET" /> <uses-permission android:name="android.permission.RECEIVE_SMS" /> <uses-permission android:name="android.permission.RECORD_AUDIO" /> <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" /> <uses-permission android:name="android.permission.READ_CONTACTS" /> <uses-permission android:name="android.permission.WRITE_CONTACTS" /> <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" /> <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" /> <uses-permission android:name="android.permission.GET_ACCOUNTS" />
關(guān)于混合開(kāi)發(fā)這一塊涉及內(nèi)容太多,我后面會(huì)陸續(xù)寫文介紹。
原文鏈接:http://blog.csdn.net/u012702547/article/details/45727329
源碼下載:http://xiazai.jb51.net/201606/yuanma/webViewTest(jb51.net).rar
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- Android webview和js互相調(diào)用實(shí)現(xiàn)方法
- Android M(6.x)使用OkHttp包解析和發(fā)送JSON請(qǐng)求的教程
- Android通過(guò)json向MySQL中讀寫數(shù)據(jù)的方法詳解【讀取篇】
- Android通過(guò)json向MySQL中讀寫數(shù)據(jù)的方法詳解【寫入篇】
- Android讀取本地json文件的方法(解決顯示亂碼問(wèn)題)
- Android WebView使用方法詳解 附j(luò)s交互調(diào)用方法
- 原生javascript實(shí)現(xiàn)分享到朋友圈功能 支持ios和android
- 淺談Android程序與JavaScript腳本的交互
- Android開(kāi)發(fā)之利用jsoup解析HTML頁(yè)面的方法
- Android與JS之間跨平臺(tái)異步調(diào)用實(shí)例詳解
相關(guān)文章
Android開(kāi)發(fā)之React Navigation 導(dǎo)航欄樣式調(diào)整+底部角標(biāo)消息提示
這篇文章主要介紹了React Navigation 導(dǎo)航欄樣式調(diào)整+底部角標(biāo)消息提示的相關(guān)知識(shí),非常不錯(cuò),具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2019-05-05Android?Jetpack組件ViewModel基本用法詳解
這篇文章主要為大家介紹了Android?Jetpack組件ViewModel基本用法詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-01-01Android自定義Animation實(shí)現(xiàn)View搖擺效果
這篇文章主要為大家詳細(xì)介紹了Android自定義Animation實(shí)現(xiàn)View搖擺效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-01-01TabLayout關(guān)聯(lián)ViewPager后不顯示文字的解決方法
這篇文章主要為大家詳細(xì)介紹了TabLayout關(guān)聯(lián)ViewPager后不顯示文字的解決方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-11-11Android中正確使用字體圖標(biāo)(iconfont)的方法
IconFont字體不僅僅流行于Web開(kāi)發(fā),在移動(dòng)開(kāi)發(fā)中也漸漸的使用的范圍更廣泛。這篇文章主要介紹了在Android開(kāi)發(fā)中使用icon font的代碼和方法。對(duì)大家學(xué)習(xí)使用iconfont有一定的參考借鑒價(jià)值,有需要的朋友們下面來(lái)一起看看吧。2016-10-10