目录导航
前两章分别对开发环境和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视频来看,因为很多视频的讲师都很专业,他会给你很多建设性的意见,相反看书就比较枯燥,而且无法抓住重点!
相关推荐
该源码是使用phonegap加jquery mobile开发基于html5 css3的应用的项目例子。可以很好的来学校jquery mobile。
示例中用html5+jquery mobile 开发了一个列车时刻表的demo
用PhoneGap+jQueryMobile开发Android应用实例,很好的android开发学习教材。
PhoneGap+jQueryMobile开发Android应用实例,搭建开发环境
Android+Jquerymobile+PhoneGap的项目实例,包括 用这些 js UI实现的 滑屏、触摸、禁横屏、滚动特效。绝对经典,技术绝对齐全, 绝对适合你学习。想学手机软件开发的人,必须选择我的资源, 与我一起进步!!!
基于Java(Springboot+Mybatis+Mysql)+ JQueryMobile实现个人简介APP 设计这款 APP 是为了让使用者能更清楚清晰地全方面了解我这个人.从我的成长经历、人生阶段和我推荐的东西或物品等等.APP 中还留有我个人的联系...
使用jquery-mobile+html5实现android本地通讯录
android phonegao jquery mobile 条码扫描,需导入zxing工程做为lib,此例子是调用服务端页面进行条码扫描,jquerymobile web需放入web工程下
通过本书的学习,读者将会获悉jQuery Mobile的核心特性,以及如何创建可主题化的设计,还会掌握jQuery Mobile的API,以及如何使用PhoneGap来扩展jQuery Mobile。 《jQuery Mobile快速入门》适合想要掌握jQuery ...
“JQuery Mobile学习助手”包含了对JQuery Mobile中的所有组件、接口的详细介绍。对于JQuery Mobile的初学者,可以从中学习JQuery Mobile的所有接口与组件的功能,同时通过范例进行练习;对于JQuery Mobile开发人员...
android下的Jquery源代码实例和类库!希望对你有所帮助!
以 HTML5 为主体,搭配JQuery制作网页,再搭配JQueryMobile制作MobileAPP,第4个实例教用户如何将写好的网页打包成Android APP,最后两个实例搭配Web Storage和Web SQL数据库,制作完成后用户能立即将成果打包并放在...
搞这个jquery mobile定位 总的算来也花了我半个月时间了 但现在还是只能在android上才能够精确定位 如果只是jmobile定位 把www文件夹下面的文件放到哪个项目上都可以 没办法 能力有限啊 项目是android+phonegap+...
You will learn how to build websites and apps for touch devices such as iPhone, iPad, Android, and BlackBerry with the recently developed jQuery Mobile library through sample applications of ...
没分下载东西了,只好卖我的经典代码了,以下是我通过html5做的多个跨平台应用的demo框架:使用 phonegap 开发android应用框架结构 前台页面用jquery mobile开发,后台用axis2开发实现webservice,前后台用js发送...
jQuery Mobile 1.0现已支持当前大部分的主流桌面、智能手机、平板设备及电子阅读平台,包括iOS、Android、WP7、Blackberry、Plam WebOS、Meego、Kindle 3和Fire等,而且还支持一些功能手机和早些版本的浏览器。...
使用Jquery Mobile设计Android通讯录.pdf
其次JQuery Mobile通过HTML5的标记与CSS规范来配置与美化页面,对已经学习过这些课程的我们来说,架构清晰,又易于学习. 该APP后端采用了Springboot+Mybatis+Mysql整合框架.传统的Spring去做Java EE开发中,大量的XML...
jQuery Mobile音乐播放代码 为什么使用 jQuery Mobile? 通过使用jQuery Mobile 可以 "写更少的代码,做更多的事情" : 它可以通过一个灵活及简单的方式来布局网页,且兼容所有移动设备。 lamp 不同设备使用了...
Android jquerymobile 的简单配置