前两章分别对开发环境和Jquery Mobile基础知识进行了介绍,本章介绍创建一个Android项目,并使用WebView控件显示HTML数据。

首先创建一个Android Application项目,这个在第一节已经讲过,不再赘述。

然后以图的形式介绍下Android项目几个关键文件的功能。

首先是AndroidManifest.xml文件,这个文件算是最重要的XML配置文件了, 比如该项目的名称,该项目要开通哪些权限,该项目用到了哪些核心Activity类型,哪个是默认启动项。

我的AndroidManifest.xml内容如下:

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <manifest xmlns:android="http://schemas.android.com/apk/res/android"
  3. package="com.bless.blesscrm"
  4. android:versionCode="1"
  5. android:versionName="1.0" >
  6. <!-- 开启网络访问权限 -->
  7. <uses-permission android:name="android.permission.INTERNET" >
  8. </uses-permission>
  9. <uses-sdk
  10. android:minSdkVersion="8"
  11. android:targetSdkVersion="8" />
  12. <application
  13. android:name="com.bless.blesscrm.AppContext"
  14. android:allowBackup="true"
  15. android:icon="@drawable/ic_launcher"
  16. android:label="@string/app_name"
  17. android:theme="@style/AppTheme" >
  18. <activity
  19. android:name="com.bless.blesscrm.MainActivity"
  20. android:label="@string/app_name"
  21. android:screenOrientation="portrait">
  22. <intent-filter>
  23. <action android:name="android.intent.action.MAIN" />
  24. <!-- 设置当前Activity为启动项 -->
  25. <category android:name="android.intent.category.LAUNCHER" />
  26. </intent-filter>
  27. </activity>
  28. </application>
  29. </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方法,所以页面布局、显示等初始化内容都要在这个方法中编写。

  1. protected void onCreate(Bundle savedInstanceState) {
  2. userManager = (UserManager) BeanFactory.getDBManager(UserManager.class, this);
  3. super.onCreate(savedInstanceState);
  4. app = (AppContext) super.getApplication();
  5. // 初始化当前用户
  6. app.setUser(userManager.getCurrentUser());
  7. setContentView(R.layout.activity_main);
  8. webView = (WebView) findViewById(R.id.webview);
  9. init();
  10. /** javascript与Java对象映射,页面可使用javascript:ajax.xx()来调用AjaxManager的方法 */
  11. webView.addJavascriptInterface(new JavascriptUser(MainActivity.this), "javascriptUser");
  12. webView.loadUrl("file:///android_asset/www/index.html");
  13. }

setContentView(R.layout.activity_main)用于设置Android屏幕显示什么内容,而R.layout.activity_main就是内容文件,这个是一个XML,在上图中的layout文件夹下,名称为activity_main.xml,这个文件只有很简单一个WebView标签:

  1. <WebView  xmlns:android="http://schemas.android.com/apk/res/android"
  2. android:id="@+id/webview"
  3. android:layout_width="fill_parent"
  4. android:layout_height="fill_parent"
  5. />

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的自定义配置,如下代码有详细注释,就不做解释了。

  1. private void init() {
  2. setting = webView.getSettings();
  3. setting.setSupportZoom(true);// 支持缩放
  4. setting.setDefaultZoom(WebSettings.ZoomDensity.FAR);// 设置初始化缩放大小
  5. setting.setJavaScriptEnabled(true); // 支持页面的javascript
  6. proDlg = new ProgressDialog(this);
  7. proDlg.setMessage("加载中,请稍后...");
  8. webView.setWebViewClient(new WebViewClient() {
  9. @Override
  10. public void onPageFinished(WebView view, String url) {
  11. // 加载页面完成
  12. proDlg.dismiss();
  13. }
  14. @Override
  15. public void onPageStarted(WebView view, String url, Bitmap favicon) {
  16. // 加载页面
  17. proDlg.show();
  18. }
  19. });
  20. webView.setWebChromeClient(new WebChromeClient() {
  21. @Override
  22. public void onProgressChanged(WebView view, int newProgress) {
  23. // 动态显示进度
  24. proDlg.setMessage("已经加载:" + newProgress + " %");
  25. }
  26. });
  27. }

最后是在assets文件夹中创建页面元素,所有的javascript、css、icon和html都放在这个下面,最好分文件存放,方便查找,别忘了放Jquery Mobile,我是将整个文件都拷贝到项目下的。


 index.html文件就不多说了,这个跟平常的html一样的,在第二章中有示例。

需要注意的是,在html的<head>标签内一定要添加下面这两句,第一句无疑问是设置编码的,第二个是表示让html占满整个移动设备屏幕,这个在网上搜搜,也有很多详细说明的!

  1. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  2. <meta name="viewport" content="width=device-width, initial-scale=1">

然后启动Android应用程序,调试看看是否能够显示正确的效果。

作为新手,很可能会遇到很多问题,千万不要气馁,我也是这么过来的,当初为了出这个html报了各种奇怪的错误,通过一点点排除问题,最终终于能在移动设备中显示了。

如果你感觉你的HTML写得不正确,你可以在PC上直接访问这个HTML,然后通过浏览器调试---在移动设备上调试确实太麻烦!

你可以引用第三方的Jar包到项目的lib目录下,最好一个个引用(因为有些Jar包Android不支持),然后跑一下Android看控制台是否报错。

对于Android开发,这里说得非常肤浅,个人建议新手下载一些Android视频来看,因为很多视频的讲师都很专业,他会给你很多建设性的意见,相反看书就比较枯燥,而且无法抓住重点!

Android+Jquery Mobile学习系列(3)-创建Android项目的更多相关文章

  1. Android+Jquery Mobile学习系列-目录

    最近在研究学习基于Android的移动应用开发,准备给家里人做一个应用程序用用.向公司手机移动团队咨询了下,觉得使用Android的WebView上手最快,因为WebView等于是一个内置浏览器,可以 ...

  2. Android+Jquery Mobile学习系列(7)-保险人信息

    [保险人管理]是这个APP最重要的功能,用于保存保险客户的数据,给后面的功能提供数据支撑. 简单说说[保险人管理]功能:主要就是增.删.改.查四个功能,在新增和修改的时候不仅可以保存保险人的姓名.身份 ...

  3. Android+Jquery Mobile学习系列(6)-个人信息设置

    本节开始,进行代码的实战练习.我的这个App是管理保险客户信息的,数据采用Sqlite存储在本地手机上,第一次使用需要先登记自己的个人信息,这个功能非常简单,也无关紧要,我是拿这个练手,方便做后面复杂 ...

  4. Android+Jquery Mobile学习系列(4)-页面跳转及参数传递

    关于页面转场,这个必须得专门列出来说明一下,因为Jquery Mobile与普通的Web发开有一些区别,这个对于新手如果不了解的话,就会钻到死胡同.撸主前段时间就是很急躁地上手开发程序,结果在页面转场 ...

  5. Android+Jquery Mobile学习系列(9)-总结和代码分享

    经过一个多月的边学习边练手,学会了Android基于Web开发的毛皮,其实开发过程中用Android原生API不是很多,更多的是HTML/Javascript/Css. 个人觉得基于WebView的J ...

  6. Android+Jquery Mobile学习系列(4)-页面转场及参数传递

    关于页面转场,这个必须得专门列出来说明一下,因为Jquery Mobile与普通的Web发开有一些区别,这个对于新手如果不了解的话,就会钻到死胡同.撸主前段时间就是很急躁地上手开发程序,结果在页面转场 ...

  7. Android+Jquery Mobile学习系列(2)-HTML5/Jquery Mobile基础

    本章介绍两个关键字[HTML5]和[Jquery Mobile],简单说这两者的关系是:HTML5作为主体,Jquery Mobile在HTML5的基础上对其进行了优化.装饰. HTML5 HTML5 ...

  8. Android+Jquery Mobile学习系列(8)-保单/生日提醒功能

    其实这个App基本功能早已做完,并且交给老婆试用去了.但由于最近项目要保证稳定,所以持续加班,没有时间写最后一点内容,本节也就简单截图做个说明,不详细叙述实现方式.我会把代码上传到最后一章中,有兴趣的 ...

  9. Android+Jquery Mobile学习系列(1)-开发环境

    开发环境是老生常谈的问题了,网上有很多关于Android环境安装的文章,我这里也就简单说明一下,不做过多分析. 想了解详细的安装说明,可以参见[百度经验] Java环境安装直接跳过,说一下Androi ...

随机推荐

  1. MariaDB常用命令手记

    创建用户命令 mysql>create user username@localhost identified by 'password'; 直接创建用户并授权的命令 mysql>grant ...

  2. CAD通过扩展记录实体向数据库读写用户自定义的全局数据(com接口VB语言)

    VB代码实现如下: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 ...

  3. Labview学习笔记(三)

    一.数据 1.数值控件 (1)数值控件 根据不同的模拟状态,放置不同控件 (2)显示格式 为了程序显示,需要设置数值型控件的表示法.数值范围.显示格式等属性. 一般来说,长度越长,则可以表示的数值范围 ...

  4. 使用jquery将表单自动封装成json对象 /json对象元素的添加删除和转换

    $.fn.serializeObject = function () { var o = {}; var a = this.serializeArray(); $.each(a, function ( ...

  5. How To: set udev rule for setting the disk permission on ASM disks when using multipath on Linux 6.x

    在RHEL6.4上安装11gR2的RAC时,使用了MULTIPATH来聚合绑定多路径的磁盘,并且修改磁盘的权限,赋予grid:asmadmin用户和组. 此时,在安装时可以发现磁盘,日志如下 INFO ...

  6. 57 和为S的数字

    题目一:和为S的两个数字 输入一个递增排序的数组和一个数字S,在数组中查找两个数,使得他们的和正好是S,如果有多对数字的和等于S,输出两个数的乘积最小的. 输出描述: 对应每个测试案例,输出两个数,小 ...

  7. [CodeForces] 274E Mirror Room

    题意翻译 有一个n*m的格子图,其中有一些是黑色的,另一些为白色. 从某个白色格子的中心点向左上(NW),左下(SW),右上(NE),右下(SE)四个方向中的一个发出一束光线,若光线碰到黑色格子或者墙 ...

  8. JavaSE 学习笔记之多态(七)

    多 态:函数本身就具备多态性,某一种事物有不同的具体的体现. 体现:父类引用或者接口的引用指向了自己的子类对象.//Animal a = new Cat(); 多态的好处:提高了程序的扩展性. 多态的 ...

  9. (38)Spring Boot分布式Session状态保存Redis【从零开始学Spring Boot】

    [本文章是否对你有用以及是否有好的建议,请留言] 在使用spring boot做负载均衡的时候,多个app之间的session要保持一致,这样负载到不同的app时候,在一个app登录之后,而访问到另外 ...

  10. 有用的生活有关的website

    1. 如何快速download mpa3 from youtube a. google "youtube download" 2. 打开https://y2mate.com 3. ...