android之Java+html+javascript混合开发

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

本项目完整代码下载。

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

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

《React Native 精解与实战》书籍连载「Android 平台与 React Native 混合开发」
此文是我的出版书籍<React Native 精解与实战>连载分享,此书由机械工业出版社出版,书中详解了 React Native 框架底层原理.React Native 组件布局.组件与 ...
如何在android studio中cordova的混合开发
基于Android Studio 中Cordova的开发 cordova简介 Cordova的前身是PhoneGap 官网: (http://cordova.io) Cordova应是运行在客户端本地 ...
Android 中Java和JavaScript交互入门
如何实现JavaScript 和java 交互实现Java和js交互十分便捷.通常只需要以下几步. WebView开启JavaScript脚本执行 WebView设置供JavaScript调用的交互 ...
Android中Java和JavaScript交互
Android提供了一个很强大的WebView控件用来处理Web网页,而在网页中,JavaScript又是一个很举足轻重的脚本.本文将介绍如何实现Java代码和Javascript代码的相互调用. 如 ...
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 ...
Android中Java与JavaScript之间交互（转）
Android代码: package com.fyfeng.testjavascript; import android.app.Activity; import android.content.In ...
Android混合开发，html5自己主动更新爬过的坑
如今使用混合开发的公司越来越多,尽管出现了一些新技术,比方Facebook的react native.阿里的weex,但依旧阻挡不了一些公司採用h5的决心.当然,这也是从多方面考虑的选择. 在三年前就 ...
WebView上实现Java与JavaScript交互
在安卓开发上,考虑到开发效率和界面更新,有时使用WebView结合web页面技术,可以快速迭代地开发移动应用.WebView加载资源的速度并不慢,但是如果资源多了,就很慢.图片.css.js.html ...
Java和JavaScript之间的区别
1.简介通过优锐课核心java学习笔记中,我们可以看到,Java和JavaScript之间的区别.我们将在本文中比较Java语言和JavaScript语言.JavaScript由Netscape开发 ...

随机推荐

Stanford CoreNLP--Part of Speech
Stanford CoreNLP Part Of Speech简称POS,主要是对待分析的句子中的单词进行标记的功能,如标记名词.动词等,该组件是CoreNLP工程的一部分,详细内容可参考:CoreN ...
[topcoder]IncreasingSubsequences
http://community.topcoder.com/stat?c=problem_statement&pm=7753&rd=10672 http://community.top ...
android View 关于transient
今天来研究一下 ListView 的删除动画由于 ListView 卷动时会把画面上的 item 重用以显示不同数据这样会导致我们可能会删除到非正确的 item 或是出现显示上的问题(该 item ...
Android4.0 -- UI控件之 Menu 菜单的的使用(三)
上一讲 [Android 开发]:UI控件之 Menu 菜单的的使用(二) 我们讲解了创建上下文菜单的第一种使用方式:Creating a floating context menu [创建悬浮的上下 ...
IIS出现Server Error in '/' Application.CS0016的解决办法
这两天一直在弄IIS的事,全都是报错,网上找了好多资料,也尝试了很多,终于在几分钟之前把困扰了我一周的麻烦给解决了,现整理出来,希望对大家有用,闲话少说,直接上图了 Server Error in ' ...
如何实现批处理文件传参数给SQLPLUS
原文地址:http://www.cnblogs.com/HondaHsu/archive/2012/11/23/2784094.html 第一:批处理文件drop_table.bat 说明: 批处理中 ...
【单页应用】view与model相关梳理(转载)
[单页应用]view与model相关梳理前情回顾根据之前的学习,我们形成了一个view与一个messageCenterview这块来说又内建了一套mvc的东西,我们这里来理一下首先View一层由三 ...
rails第一次做项目
最近这几天一直都是在做rails的入门,也就是熟悉rails的增.删.改.查操作,做到rails的入门.这几天的熟悉,只是对于操作的熟悉,对于rails语言的机制还有很多不是很熟悉.昨天接手第一个真正 ...
HDOJ/HDU 2203 亲和串(简单的判断~Java的indexOf()方法秒)
Problem Description 人随着岁数的增长是越大越聪明还是越大越笨,这是一个值得全世界科学家思考的问题,同样的问题Eddy也一直在思考,因为他在很小的时候就知道亲和串如何判断了,但是发现 ...
Javascript 母羊生小羊问题，递归
农场买了一只小羊,这种羊在第一年是小羊,第二年的年底会生一只小羊,第三年不生小羊,第四年的年底还会再生下一只小羊,第五年就死掉了. 要计算N年时农场里有几只羊. [凡是碰到“一生二.二生三.三生万物” ...

android之Java+html+javascript混合开发

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

随机推荐

热门专题