Android开发方式之Java+html+javascript混合开发

这篇文章主要为大家详细介绍了Android开发方式的其中一种Java+html+javascript混合开发,感兴趣的小伙伴们可以参考一下

android开发,除了使用原生态的开发方式之外,还可以使用java+html+javascript混合开发的方式来开发,这样可以节省大量的开发时间,同时还可以使不同设备的用户获得相同的用户体验。好了,废话不多说,先来看看今天要做什么。
主要是实现一个简单的注册功能,先用jquery mobile的方式写一个简单的注册页面,点击提交按钮之后跳转到一个新的activity中,同时把用户的注册信息显示出来,整体效果如下图:

这里写图片描述

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

这里写图片描述

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

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

   无标题文档 

标题

  • 注册
  • 性别:
  • 爱好

脚注

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

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

  

它的布局文件中就一个控件,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的布局文件:

       

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开发代码,我就不多解释了。
另外,还要在布局文件中添加以下权限:

 

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

原文链接:http://blog.csdn.net/u012702547/article/details/45727329

源码下载:http://xiazai.0133.cn/201606/yuanma/webViewTest(0133.cn).rar

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持html中文网。

以上就是Android开发方式之Java+html+javascript混合开发的详细内容,更多请关注0133技术站其它相关文章!

赞(0) 打赏
未经允许不得转载:0133技术站首页 » 移动