目录导航
前两章分别对开发环境和Jquery Mobile基础知识进行了介绍,本章介绍创建一个Android项目,并使用WebView控件显示HTML数据。
首先创建一个Android Application项目,这个在第一节已经讲过,不再赘述。
然后以图的形式介绍下Android项目几个关键文件的功能。
首先是AndroidManifest.xml文件,这个文件算是最重要的XML配置文件了, 比如该项目的名称,该项目要开通哪些权限,该项目用到了哪些核心Activity类型,哪个是默认启动项。
我的AndroidManifest.xml内容如下:
<?xml version="1.0" encoding="utf-8"?> <manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.bless.blesscrm" android:versionCode="1" android:versionName="1.0" > <!-- 开启网络访问权限 --> <uses-permission android:name="android.permission.INTERNET" > </uses-permission> <uses-sdk android:minSdkVersion="8" android:targetSdkVersion="8" /> <application android:name="com.bless.blesscrm.AppContext" android:allowBackup="true" android:icon="@drawable/ic_launcher" android:label="@string/app_name" android:theme="@style/AppTheme" > <activity android:name="com.bless.blesscrm.MainActivity" android:label="@string/app_name" android:screenOrientation="portrait"> <intent-filter> <action android:name="android.intent.action.MAIN" /> <!-- 设置当前Activity为启动项 --> <category android:name="android.intent.category.LAUNCHER" /> </intent-filter> </activity> </application> </manifest>
设置中有开发网络访问权限,这样你就可以通过WebView访问外网地址信息了
com.bless.blesscrm.AppContext是一个全局类,类中的变量在任何地方都能访问
com.bless.blesscrm.MainActivity是默认启动的Activity,也就是说Android应用启动后会执行这个Activity的方法来生成对应的页面信息;
很多手机支持屏幕翻转,但是基于WebVeiw的Activity通常不要支持翻转,因为你一翻转就会重新调用Activity的onCreate方法,又回到首页了,所以在<activity>中增加一个属性android:screenOrientation="portrait"只允许竖屏显示(高度大于宽度的屏幕)
然后在src源代码目录下找到com.bless.blesscrm.MainActivity,应用启动后会执行MainActivity的onCreate方法,所以页面布局、显示等初始化内容都要在这个方法中编写。
protected void onCreate(Bundle savedInstanceState) { userManager = (UserManager) BeanFactory.getDBManager(UserManager.class, this); super.onCreate(savedInstanceState); app = (AppContext) super.getApplication(); // 初始化当前用户 app.setUser(userManager.getCurrentUser()); setContentView(R.layout.activity_main); webView = (WebView) findViewById(R.id.webview); init(); /** javascript与Java对象映射,页面可使用javascript:ajax.xx()来调用AjaxManager的方法 */ webView.addJavascriptInterface(new JavascriptUser(MainActivity.this), "javascriptUser"); webView.loadUrl("file:///android_asset/www/index.html"); }
setContentView(R.layout.activity_main)用于设置Android屏幕显示什么内容,而R.layout.activity_main就是内容文件,这个是一个XML,在上图中的layout文件夹下,名称为activity_main.xml,这个文件只有很简单一个WebView标签:
<WebView xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/webview" android:layout_width="fill_parent" android:layout_height="fill_parent" />
webView = (WebView) findViewById(R.id.webview)表示获取WebView对象,这个控件定义在activity_main.xml中。
webView.addJavascriptInterface(new JavascriptUser(MainActivity.this), "javascriptUser")用于给HTML页面的javascript提供一个接口支持,页面js可以通过javascriptUser.xxx()执行这个Java中的方法,这个就是页面与Android后台交互最重要的接口了!(具体怎么个调用法,在后面文章中说明)
webView.loadUrl("file:///android_asset/www/index.html");表示WebView控件初次加载哪个HTML文件,这个有个格式标准,如果以[file:///android_asset]为前缀,则可以访问Android项目下asset文件夹中的HTML文件。
init()方法定义了一些WebView的自定义配置,如下代码有详细注释,就不做解释了。
private void init() { setting = webView.getSettings(); setting.setSupportZoom(true);// 支持缩放 setting.setDefaultZoom(WebSettings.ZoomDensity.FAR);// 设置初始化缩放大小 setting.setJavaScriptEnabled(true); // 支持页面的javascript proDlg = new ProgressDialog(this); proDlg.setMessage("加载中,请稍后..."); webView.setWebViewClient(new WebViewClient() { @Override public void onPageFinished(WebView view, String url) { // 加载页面完成 proDlg.dismiss(); } @Override public void onPageStarted(WebView view, String url, Bitmap favicon) { // 加载页面 proDlg.show(); } }); webView.setWebChromeClient(new WebChromeClient() { @Override public void onProgressChanged(WebView view, int newProgress) { // 动态显示进度 proDlg.setMessage("已经加载:" + newProgress + " %"); } }); }
最后是在assets文件夹中创建页面元素,所有的javascript、css、icon和html都放在这个下面,最好分文件存放,方便查找,别忘了放Jquery Mobile,我是将整个文件都拷贝到项目下的。
index.html文件就不多说了,这个跟平常的html一样的,在第二章中有示例。
需要注意的是,在html的<head>标签内一定要添加下面这两句,第一句无疑问是设置编码的,第二个是表示让html占满整个移动设备屏幕,这个在网上搜搜,也有很多详细说明的!
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <meta name="viewport" content="width=device-width, initial-scale=1">
然后启动Android应用程序,调试看看是否能够显示正确的效果。
作为新手,很可能会遇到很多问题,千万不要气馁,我也是这么过来的,当初为了出这个html报了各种奇怪的错误,通过一点点排除问题,最终终于能在移动设备中显示了。
如果你感觉你的HTML写得不正确,你可以在PC上直接访问这个HTML,然后通过浏览器调试---在移动设备上调试确实太麻烦!
你可以引用第三方的Jar包到项目的lib目录下,最好一个个引用(因为有些Jar包Android不支持),然后跑一下Android看控制台是否报错。
对于Android开发,这里说得非常肤浅,个人建议新手下载一些Android视频来看,因为很多视频的讲师都很专业,他会给你很多建设性的意见,相反看书就比较枯燥,而且无法抓住重点!
相关推荐
读者将学习到如何利用HTML5的新特性创建富媒体内容,使用CSS3设计响应式布局,以及借助jQuery Mobile构建移动友好的交互界面。此外,书中可能还会涵盖如何调试和优化移动设备上的Web应用,以及如何进行性能测试和无...
这个项目标题揭示了一个使用三种技术栈构建的移动应用程序:Android、PhoneGap和jQuery Mobile。Android是Google主导的开源操作系统,主要用于智能手机和平板电脑;PhoneGap是一个开放源代码框架,允许开发者使用...
《手机模拟器与jQueryMobile深度教程》 在移动互联网飞速发展的今天,手机应用的开发变得日益重要。作为开发者,我们需要有效地测试和调试在不同设备上的应用表现,这就需要用到手机模拟器。同时,jQueryMobile作为...
用PhoneGap+jQueryMobile开发Android应用实例,很好的android开发学习教材。
PhoneGap+jQueryMobile开发Android应用实例,搭建开发环境
在开发列车时刻表的demo时,jQuery Mobile可以帮助快速构建界面布局,如使用数据属性和CSS类来创建可点击的时间表条目,同时实现触摸友好的交互效果,如滑动切换日期或查看详细信息。 在Android平台上,通过WebView...
结合Android的WebView和jQuery Mobile,开发者可以创建出具有高度互动性和良好用户体验的混合式移动应用。通过理解jQuery Mobile的类库和实例源代码,开发者不仅可以快速构建应用界面,还能进一步优化性能和定制功能...
在这个“phonegap+jqueryMobile例子”中,我们将深入探讨这两个工具如何协同工作,以及如何利用它们创建Android应用程序。 PhoneGap是一个开源框架,它允许开发者使用HTML、CSS和JavaScript来构建原生的移动应用。...
jQuery Mobile 的核心目标是简化跨平台的移动Web开发,通过一套统一的API和CSS样式,使得开发者能够创建一致的交互体验,无论是在iOS、Android还是其他移动平台上。1.4.5版进一步优化了性能和可定制性,以满足多样...
Android+Jquerymobile+PhoneGap的项目实例,包括 用这些 js UI实现的 滑屏、触摸、禁横屏、滚动特效。绝对经典,技术绝对齐全, 绝对适合你学习。想学手机软件开发的人,必须选择我的资源, 与我一起进步!!!
在这个"PhoneGap+jQuery Mobile汇率计算器"项目中,首先,我们需要创建一个基本的HTML结构,包含必要的页面元素,如输入框(用于输入金额)、下拉菜单(选择货币类型)、按钮(执行计算)以及显示结果的区域。...
在移动应用开发中,将HTML5、jQuery Mobile和Android结合可以构建出跨平台的轻量级应用程序,尤其适合快速原型开发或对原生功能的轻度集成。本教程将聚焦于如何利用jQuery Mobile和HTML5来访问并操作Android设备上的...
基于Java(Springboot+Mybatis+Mysql)+ JQueryMobile实现个人简介APP 设计这款 APP 是为了让使用者能更清楚清晰地全方面了解我这个人.从我的成长经历、人生阶段和我推荐的东西或物品等等.APP 中还留有我个人的联系...
3. **集成jQuery Mobile**:将jQuery Mobile库(包括jQuery核心库和jQuery Mobile CSS/JS文件)添加到项目的`www`目录下。你可以选择从官方CDN链接引入,或者下载到本地。 4. **设计界面**:在`www`目录下的HTML...
通过这样的整合,我们可以在Android应用中充分利用jQuery Mobile的强大功能,创建出具有出色用户体验的移动界面。同时,也可以通过JavaScript与Android的交互,实现更多定制化的功能。 本文主要介绍了如何在Android...
3. **组件库**:提供了一系列丰富的 UI 组件,如按钮、表单元素、滑动条等,这些组件具有高度可定制性,能够快速构建美观且功能完整的界面。 4. **触摸事件处理**:内置触摸事件处理器,使开发触摸友好的应用变得...
这个源码示例提供了完整的流程,包括PhoneGap应用结构、jQuery Mobile的Web页面、以及与ZXing交互的Java插件,可以帮助开发者快速理解和实践在Android PhoneGap应用中实现条码扫描功能。通过学习和研究这个例子,...
学习jQuery Mobile,你将了解到如何创建可滚动的列表(listviews),可滑动的面板(panels),可滑动的选项卡(tabs),可折叠的块(collapsible sets),以及各种表单组件的优化。它还支持动态页面加载,这意味着你...
`jquery.mobile-1.0.1.js`是原始的非压缩版本,代码可读性较高,方便开发者调试和学习。而`jquery.mobile-1.0.1.min.js`则是经过压缩和优化的版本,体积更小,加载速度更快,适合生产环境使用。 **jQuery.mobile-...
`jq-mobile`,全称为jQuery Mobile,是一款基于jQuery库开发的轻量级、跨平台的移动Web应用框架,专为触摸设备设计。它提供了丰富的UI组件和交互效果,便于开发者快速构建功能完善的、具有原生App体验的移动Web应用...