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混合开发的更多相关文章

  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. Spring 定时任务 quartz的配置

    环境:我用的是spring3.2,其中引入了quartz-1.5.2.jar 先写一个任务类: package com.hlcg.common.task; public class TestJob { ...

  2. Performance Test of List<T>, LinkedList<T>, Queue<T>, ConcurrentQueue<T>

    //Test Group 1 { var watch = Stopwatch.StartNew(); var list = new List<int>(); ; j < ; j++) ...

  3. 2016年如果还没有关注这些机器人公司,你就out了

    芯师爷语据 知名市场研究机构IDC发布报告称,预计到2019年,全球机器人及相关服务上的投入将达到1350亿美元,较2015年的710亿美元增长近一倍.报告称,机器人相关投资预计将以每年17%的速度增 ...

  4. 【Xamarin挖墙脚系列:Xamarin的核心】

    原文:[Xamarin挖墙脚系列:Xamarin的核心] Xamarin 包含两个商业产品 :Xamarin.IOS, Xamarin.Android.他们都是通过开源的基于.Net的Mono项目构建 ...

  5. 例说C#深拷贝与浅拷贝

    一开始,先对C#深拷贝与浅拷贝知识做个简单的总结. 无论是浅拷贝与深拷贝,C#都将源对象中的所有字段复制到新的对象中.不过,对于值类型字段,引用类型字段以及字符串类型字段的处理,两种拷贝方式存在一定的 ...

  6. mysql 区间锁 对于没有索引 非唯一索引 唯一索引 各种情况

    The locks are normally next-key locks that also block inserts into the "gap" immediately b ...

  7. POJ2676 Sudoku(dfs)

    题目链接. 题目大意: 就是数独游戏.横竖,每一个9宫方块,必须有1~9,且不重复. 分析: 直接DFS.一开始在原图上搜,会TLE.把要补全的空格,放入数组,这样就不用遍历整个图寻找要填的空格了. ...

  8. BZOJ_1497_[NOI2006]_最大获利_(最大流+最大权闭合图)

    描述 http://www.lydsy.com/JudgeOnline/problem.php?id=1497 共n个站点,给出建立每个站点所需要的花费.现在有m个客户需要开通服务,每个客户需要有两个 ...

  9. ☀【jQuery插件】DOM 延迟渲染

    test.html <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset=&q ...

  10. WCF简单教程

    WCF是DotNet体系中很重要的一项技术,但是组内很多组员通过书籍自学的时候 感觉涉及面太广.配置文件太复杂,新名词太多.抓不到头绪,有感于此,决定进行一次组内技术培训,顺便把培训讲义整理到blog ...