Android開發方式之Java+html+javascript混合開發

Android開發方式之Java+html+javascript混合開發_Android

最後更新：2017-01-19 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

android開發，除了使用原生態的開發方式之外，還可以使用java+html+javascript混合開發的方式來開發，這樣可以節省大量的開發時間，同時還可以使不同裝置的使用者獲得相同的使用者體驗。好了，廢話不多說，先來看看今天要做什麼。
主要是實現一個簡單的註冊功能，先用jquery mobile的方式寫一個簡單的註冊頁面，點擊提交按鈕之後跳轉到一個新的activity中，同時把使用者的註冊資訊顯示出來，整體效果如下圖：

這個頁面完全用html+jquery寫成，它的最下面有一個提交按鈕，點擊提交按鈕之後該頁面的所有註冊資訊傳遞到下一個activity中。

這個介面是完全用android原生態的方式來開發。ok,下面一步一步來說。

建立一個名叫webViewTest的工程，在assets檔案夾中建立一個檔案叫做index.html,index.html檔案代碼如下：

<!doctype html><html><head><meta charset="utf-8"><title>無標題文檔</title><link href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" 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>標題</h1> </div> <div data-role="content"> <ul data-role="listview" data-inset="true">  <li data-role="list-divider">  註冊  </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>愛好</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">國籍:</label>   <select name="selectmenu" id="selectmenu">    <option value="China">中國</option>    <option value="America">美國</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的知識，前面三行是引用jquery和jquerymobile的js檔案以及jqueryMobile的css樣式檔案。當點擊button時，執行js代碼，js代碼擷取每一項的值，同時拼湊成一個json字串，然後執行register_js.register(result);方法，這是一個什麼方法呢？這是一會載入這個html的activity中的一個名叫register的方法，result是這個方法的參數，至於前面為什麼是register_js，我們一會再說。

再看看載入這個html的activity長什麼樣子，先看看它的布局檔案：

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

它的布局檔案中就一個控制項，webView.

再來看看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); }}

先拿到一個webview，然後wv.getSettings().setJavaScriptEnabled(true);表示允許執行js代碼，wv.loadUrl("file:///android_asset/index.html");表示把剛才的html檔案載入進來，注意檔案路徑，項目中是assets檔案夾，並不是android_assets，wv.addJavascriptInterface(this, "register_js");表示建立一個對象傳遞給webview，作為js對象，這裡把這個activity傳遞給webview，名稱叫做register_js，所以在js中執行這個activity中的方法時前面要加上register_js，當然，你可以傳遞任何一個類的執行個體作為js對象，這樣就可以在js中調用該類的方法了。public void register(String userInfo)方法就是點擊html中的提交按鈕時執行的方法了，該方法跳轉將執行跳轉到另一個activity中，並攜帶使用者註冊資料。

再來看看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="註冊成功，您的註冊資訊是："  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="愛好："   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="國籍："   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", "中國")     .replace("1", "美國").replace("2", "小日本"));   gender.setText(json.getString("gender").replace("0", "男")     .replace("1", "女"));  } catch (JSONException e) {   e.printStackTrace();  } }}

這些都是常規的android開發代碼，我就不多解釋了。
另外，還要在布局檔案中添加以下許可權：

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

關於混合開發這一塊涉及內容太多，我後面會陸續寫文介紹。

原文連結：http://blog.csdn.net/u012702547/article/details/45727329

源碼下載：http://xiazai.jb51.net/201606/yuanma/webViewTest(jb51.net).rar

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

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More