android开发，除了使用原生态的开发方式之外，还可以使用java+html+javascript混合开发的方式来开发，这样可以节省大量的开发时间，同时还可以使不同设备的用户获得相同的用户体验。好了，废话不多说，先来看看今天要做什么。

主要是实现一个简单的注册功能，先用jquery mobile的方式写一个简单的注册页面，点击提交按钮之后跳转到一个新的activity中，同时把用户的注册信息显示出来，整体效果如下图：

这个页面完全用html+jquery写成，它的最下面有一个提交按钮，点击提交按钮之后该页面的所有注册信息传递到下一个activity中，

这个界面是完全用android原生态的方式来开发。ok,下面一步一步来说。

新建一个名叫webViewTest的工程，在assets文件夹中新建一个文件叫做index.html,index.html文件代码如下：

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>无标题文档</title>
  6. <link href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" rel="stylesheet" type="text/css">
  7. <script src="http://code.jquery.com/jquery-1.6.4.min.js" type="text/javascript"></script>
  8. <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js" type="text/javascript"></script>
  9. </head>
  11. <body>
  12. <script>
  13.     $(function(){
  14.         $("#commit").click(function(){
  15.             var result = "{";
  16.             result +="\"username\":\"";
  17.             result +=$("#username").val();
  19.             result +="\",\"password\":\"";
  20.             result +=$("#password").val();
  22.             result += "\",\"gender\":\"";
  23.             result += $('input[name="radio1"]:checked').val();
  25.             result += "\",\"interest\":\"";
  26.             $('input[name="checkbox1"]:checked').each(function() {
  27.                 result += $(this).val()+",";
  28.             });
  30.             result += "\",\"country\":\"";
  31.             result += $("#selectmenu option:selected").text()+"\"}";
  32.             register_js.register(result);
  33.             });
  35.         });
  36. </script>
  37. <div data-role="page" id="page">
  38.   <div data-role="header">
  39.     <h1>标题</h1>
  40.   </div>
  41.   <div data-role="content">
  42.     <ul data-role="listview" data-inset="true">
  43.         <li data-role="list-divider">
  44.         注册
  45.         </li>
  46.         <li>
  47.           <div data-role="fieldcontain">
  48.             <label for="username">用户名:</label>
  49.             <input type="text" name="textinput" id="username" value="张三"  />
  50.           </div></li><li>
  51.           <div data-role="fieldcontain">
  52.             <label for="password">密码:</label>
  53.             <input type="password" name="textinput" id="password" value="zhangsan"  />
  54.           </div></li><li>
  55.           <div data-role="fieldcontain">
  56.             <fieldset data-role="controlgroup" data-type="horizontal">
  57.               <legend>性别:</legend>
  58.               <input type="radio" name="radio1" id="man" value="0" />
  59.               <label for="man">男</label>
  60.               <input type="radio" name="radio1" id="woman" value="1" />
  61.               <label for="woman">女</label>
  62.             </fieldset>
  63.           </div></li><li>
  64.           <div data-role="fieldcontain">
  65.             <fieldset data-role="controlgroup" data-type="horizontal">
  66.               <legend>爱好</legend>
  67.               <input type="checkbox" name="checkbox1" id="football" class="custom" value="0" />
  68.               <label for="football">足球</label>
  69.               <input type="checkbox" name="checkbox1" id="basketball" class="custom" value="1" />
  70.               <label for="basketball">篮球</label>
  71.               <input type="checkbox" name="checkbox1" id="vollyball" class="custom" value="2" />
  72.               <label for="vollyball">排球</label>
  73.             </fieldset>
  74.           </div>
  75.        </li>
  76.        <li>
  77.          <div data-role="fieldcontain">
  78.            <label for="selectmenu" class="select">国籍:</label>
  79.            <select name="selectmenu" id="selectmenu">
  80.              <option value="China">中国</option>
  81.              <option value="America">美国</option>
  82.              <option value="Japan">小日本</option>
  83.            </select>
  84.          </div>
  86.        </li>
  87.        <li>
  88.          <button id="commit">提交</button>
  90.         </li>
  91.     </ul>
  92.   </div>
  93.   <div data-role="footer" data-position="fixed">
  94.     <h4>脚注</h4>
  95.   </div>
  96. </div>
  97. </body>
  98. </html>

这里全部都是jquerymobile的知识，前面三行是引用jquery和jquerymobile的js文件以及jqueryMobile的css样式文件。当点击button时，执行js代码，js代码获取每一项的值，同时拼凑成一个json字符串，然后执行register_js.register(result);方法，这是一个什么方法呢？这是一会加载这个html的activity中的一个名叫register的方法，result是这个方法的参数，至于前面为什么是register_js，我们一会再说。

再看看加载这个html的activity长什么样子，先看看它的布局文件：

  1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  2.     xmlns:tools="http://schemas.android.com/tools"
  3.     android:layout_width="match_parent"
  4.     android:layout_height="match_parent"
  5.     android:orientation="vertical"
  6.     tools:context="com.example.webviewtest.MainActivity" >
  8.     <WebView
  9.         android:id="@+id/wv1"
  10.         android:layout_width="match_parent"
  11.         android:layout_height="wrap_content"
  12.         />
  14. </LinearLayout>

它的布局文件中就一个控件，webView.

再来看看Java代码：

  1. package com.example.webviewtest;
  3. import android.app.Activity;
  4. import android.content.Intent;
  5. import android.os.Bundle;
  6. import android.webkit.WebView;
  8. public class MainActivity extends Activity {
  10.     private WebView wv;
  11.     @Override
  12.     protected void onCreate(Bundle savedInstanceState) {
  13.         super.onCreate(savedInstanceState);
  14.         setContentView(R.layout.activity_main);
  16.         wv = (WebView) this.findViewById(R.id.wv1);
  17.         wv.getSettings().setJavaScriptEnabled(true);
  18.         wv.loadUrl("file:///android_asset/index.html");
  19.         wv.addJavascriptInterface(this, "register_js");
  20.     }
  22.     public void register(String userInfo){
  23.         Intent intent = new Intent(MainActivity.this,RegisterActivity.class);
  24.         intent.putExtra("userinfo", userInfo);
  25.         this.startActivity(intent);
  26.     }
  27. }

先拿到一个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的布局文件：

  1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  2.     xmlns:tools="http://schemas.android.com/tools"
  3.     android:layout_width="match_parent"
  4.     android:layout_height="match_parent"
  5.     android:orientation="vertical"
  6.     tools:context="com.example.webviewtest.MainActivity" >
  8.     <TextView
  9.         android:layout_width="match_parent"
  10.         android:layout_height="wrap_content"
  11.         android:text="注册成功，您的注册信息是："
  12.         android:textSize="30dp"
  13.         />
  14.     <LinearLayout
  15.         android:layout_width="match_parent"
  16.         android:layout_height="wrap_content"
  17.         android:orientation="horizontal" >
  19.         <TextView
  20.             android:layout_width="wrap_content"
  21.             android:layout_height="wrap_content"
  22.             android:text="用户名："
  23.             android:textSize="25sp" />
  25.         <TextView
  26.             android:id="@+id/username"
  27.             android:layout_width="wrap_content"
  28.             android:layout_height="wrap_content"
  29.             android:textSize="25sp" />
  30.     </LinearLayout>
  32.     <LinearLayout
  33.         android:layout_width="match_parent"
  34.         android:layout_height="wrap_content"
  35.         android:orientation="horizontal" >
  37.         <TextView
  38.             android:layout_width="wrap_content"
  39.             android:layout_height="wrap_content"
  40.             android:text="密码："
  41.             android:textSize="25sp" />
  43.         <TextView
  44.             android:id="@+id/password"
  45.             android:layout_width="wrap_content"
  46.             android:layout_height="wrap_content"
  47.             android:textSize="25sp" />
  48.     </LinearLayout>
  50.     <LinearLayout
  51.         android:layout_width="match_parent"
  52.         android:layout_height="wrap_content"
  53.         android:orientation="horizontal" >
  55.         <TextView
  56.             android:layout_width="wrap_content"
  57.             android:layout_height="wrap_content"
  58.             android:text="性别："
  59.             android:textSize="25sp" />
  61.         <TextView
  62.             android:id="@+id/gender"
  63.             android:layout_width="wrap_content"
  64.             android:layout_height="wrap_content"
  65.             android:textSize="25sp" />
  66.     </LinearLayout>
  68.     <LinearLayout
  69.         android:layout_width="match_parent"
  70.         android:layout_height="wrap_content"
  71.         android:orientation="horizontal" >
  73.         <TextView
  74.             android:layout_width="wrap_content"
  75.             android:layout_height="wrap_content"
  76.             android:text="爱好："
  77.             android:textSize="25sp" />
  79.         <TextView
  80.             android:id="@+id/interest"
  81.             android:layout_width="wrap_content"
  82.             android:layout_height="wrap_content"
  83.             android:textSize="25sp" />
  84.     </LinearLayout>
  86.     <LinearLayout
  87.         android:layout_width="match_parent"
  88.         android:layout_height="wrap_content"
  89.         android:orientation="horizontal" >
  91.         <TextView
  92.             android:layout_width="wrap_content"
  93.             android:layout_height="wrap_content"
  94.             android:text="国籍："
  95.             android:textSize="25sp" />
  97.         <TextView
  98.             android:id="@+id/country"
  99.             android:layout_width="wrap_content"
  100.             android:layout_height="wrap_content"
  101.             android:textSize="25sp" />
  102.     </LinearLayout>
  103. </LinearLayout>

RegisterActivity的Java代码：

  1. package com.example.webviewtest;
  3. import org.json.JSONException;
  4. import org.json.JSONObject;
  6. import android.app.Activity;
  7. import android.os.Bundle;
  8. import android.widget.TextView;
  10. public class RegisterActivity extends Activity {
  12.     private TextView username, password, interest, country, gender;
  14.     @Override
  15.     protected void onCreate(Bundle savedInstanceState) {
  16.         super.onCreate(savedInstanceState);
  17.         this.setContentView(R.layout.register_activity);
  18.         this.username = (TextView) this.findViewById(R.id.username);
  19.         this.password = (TextView) this.findViewById(R.id.password);
  20.         this.interest = (TextView) this.findViewById(R.id.interest);
  21.         this.country = (TextView) this.findViewById(R.id.country);
  22.         this.gender = (TextView) this.findViewById(R.id.gender);
  23.         String userinfo = this.getIntent().getExtras().getString("userinfo");
  24.         try {
  25.             JSONObject json = new JSONObject(userinfo);
  26.             username.setText(json.getString("username"));
  27.             password.setText(json.getString("password"));
  28.             interest.setText(json.getString("interest").replace("0", "足球")
  29.                     .replace("1", "篮球").replace("2", "排球"));
  30.             country.setText(json.getString("country").replace("0", "中国")
  31.                     .replace("1", "美国").replace("2", "小日本"));
  32.             gender.setText(json.getString("gender").replace("0", "男")
  33.                     .replace("1", "女"));
  34.         } catch (JSONException e) {
  35.             e.printStackTrace();
  36.         }
  37.     }
  38. }

这些都是常规的android开发代码，我就不多解释了。

另外，还要在布局文件中添加以下权限：

  1. <uses-permission android:name="android.permission.CAMERA" />  
  3. <uses-permission android:name="android.permission.VIBRATE" />  
  5. <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />  
  7. <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />  
  9. <uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS" />  
  11. <uses-permission android:name="android.permission.READ_PHONE_STATE" />  
  13. <uses-permission android:name="android.permission.INTERNET" />  
  15. <uses-permission android:name="android.permission.RECEIVE_SMS" />  
  17. <uses-permission android:name="android.permission.RECORD_AUDIO" />  
  19. <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />  
  21. <uses-permission android:name="android.permission.READ_CONTACTS" />  
  23. <uses-permission android:name="android.permission.WRITE_CONTACTS" />  
  25. <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" /> 
  27. <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
  29. <uses-permission android:name="android.permission.GET_ACCOUNTS" />

本项目完整代码下载。

关于混合开发这一块涉及内容太多，我后面会陆续写文介绍。

android之Java+html+javascript混合开发的更多相关文章

  1. 《React Native 精解与实战》书籍连载「Android 平台与 React Native 混合开发」

    此文是我的出版书籍<React Native 精解与实战>连载分享,此书由机械工业出版社出版,书中详解了 React Native 框架底层原理.React Native 组件布局.组件与 ...

  2. 如何在android studio中cordova的混合开发

    基于Android Studio 中Cordova的开发 cordova简介 Cordova的前身是PhoneGap 官网: (http://cordova.io) Cordova应是运行在客户端本地 ...

  3. Android 中Java和JavaScript交互入门

    如何实现JavaScript 和java 交互 实现Java和js交互十分便捷.通常只需要以下几步. WebView开启JavaScript脚本执行 WebView设置供JavaScript调用的交互 ...

  4. Android中Java和JavaScript交互

    Android提供了一个很强大的WebView控件用来处理Web网页,而在网页中,JavaScript又是一个很举足轻重的脚本.本文将介绍如何实现Java代码和Javascript代码的相互调用. 如 ...

  5. android 平台 java和javascript 通信问题 A WebView method was called on thread 'JavaBridge'.

      java.lang.RuntimeException: java.lang.Throwable: A WebView method was called on thread 'JavaBridge ...

  6. Android中Java与JavaScript之间交互（转）

    Android代码: package com.fyfeng.testjavascript; import android.app.Activity; import android.content.In ...

  7. Android混合开发，html5自己主动更新爬过的坑

    如今使用混合开发的公司越来越多,尽管出现了一些新技术,比方Facebook的react native.阿里的weex,但依旧阻挡不了一些公司採用h5的决心.当然,这也是从多方面考虑的选择. 在三年前就 ...

  8. WebView上实现Java与JavaScript交互

    在安卓开发上,考虑到开发效率和界面更新,有时使用WebView结合web页面技术,可以快速迭代地开发移动应用.WebView加载资源的速度并不慢,但是如果资源多了,就很慢.图片.css.js.html ...

  9. Java和JavaScript之间的区别

    1.简介 通过优锐课核心java学习笔记中,我们可以看到,Java和JavaScript之间的区别.我们将在本文中比较Java语言和JavaScript语言.JavaScript由Netscape开发 ...

随机推荐

  1. 关于路由、AP、交换机的小总结

    整理自关于路由.AP.交换机的小总结 要将各种设备连成网络,一般运用网络中的两层,即第二层的数据链路层和第三层的网络层.而设备之间需要通信就需要各自的网络地址. 第二层设备有物理地址即MAC地址,这对 ...

  2. python邮件收发SAMPLE

    #!/usr/bin/env python # -*- encoding: utf-8 -*- import os, socket from time import localtime, strfti ...

  3. Android Environment 判断sd卡是否挂载 获取sd卡目录

    在将一个文件存储到sd卡上面的时候,一般需要判断sd是否已经挂载才进行操作. 那么如何判断sd卡已经挂载呢? 我们可以使用Android的Environment类,具体使用如下: if(Environ ...

  4. [wikioi]过河卒

    棋盘型动态规划.(PPT:http://wenku.baidu.com/view/56badad850e2524de5187ea3.html)该类动态规划有一个共性,那就是在一个矩阵中(一般是二维矩阵 ...

  5. Perl，Python，Ruby，Javascript 四种脚本语言比较

    Perl 为了选择一个合适的脚本语言学习,今天查了不少有关Perl,Python,Ruby,Javascript的东西,可是发现各大阵营的人都在吹捧自己喜欢的语言,不过最没有争议的应该是Javascr ...

  6. String.format 细节

    String.format(Locale.US, format, args); format 参数 如果有% 那么%后面必须跟一个合法的字符,否则崩溃, 因为在String.format中 %为特殊字 ...

  7. Net中的反射使用入门

    [转载] MSDN:ms-help://MS.VSCC.2003/MS.MSDNQTR.2003FEB.2052/cpguide/html/cpcondiscoveringtypeinformatio ...

  8. （转载）AS3.0实例学习 熟悉新的事件机制和addChild的运用

    (转载)http://www.jb51.net/article/13139.htm 首先声明:本人大菜鸟一个,刚接触AS3不久,许多理念还没来得及灌输,这些case都是从网上down的,但因为解说是英 ...

  9. （转载）C++:STL标准入门汇总

    (转载)http://www.cnblogs.com/shiyangxt/archive/2008/09/11/1289493.html 学无止境!!! 第一部分:(参考百度百科) 一.STL简介 S ...

  10. Windows游戏编程之从零开始d

    Windows游戏编程之从零开始d I'm back~~恩,几个月不见,大家还好吗? 这段时间真的好多童鞋在博客里留言说或者发邮件说浅墨你回来继续更新博客吧. woxiangnifrr童鞋说每天都在来 ...