jQuery Mobile:为移动设备提供的高度统一的 UI 框架

    Jquery mobile构建于Jquery 以及 Jquery UI类库之上，为前端开发人员提供了一个兼容所有主流移动设备平台的统一UI接口系统。拥有出色的弹性，轻量化以及渐进增强特性与可访问性。jQuery Mobile框架可以轻松的帮助我们实现非常好看的、可跨设备的Web应用程序。其官网地址为：http://jquerymobile.com/。

第一个jQuery Mobile页面

jQuery Mobile 为我们提供了许多模板可以方便的创建页面。我们先创建一个最基本的页面，它包含一个标题栏和内容：

1:  <!DOCTYPE html>2:  <html>3:  <head>4:      <title>My Page</title>5:      <meta name="viewport" content="width=device-width, initial-scale=1">6:      <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />7:      <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>8:      <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>9:  </head>10:  <body>11:   12:  <div data-role="page">13:   14:      <div data-role="header">15:          <h1>My Title</h1>16:      </div><!-- /header -->17:   18:      <div data-role="content">19:          <p>Hello world</p>20:      </div><!-- /content -->21:   22:  </div><!-- /page -->23:   24:  </body>25:  </html>

 

将其保存为HTML格式，可以直接在浏览器中打开我们就可以看到第一个JQM的页面了。

     

jquery IOS组件 jquery mobile app_移动开发

 

    有没有一点安卓应用的意思？我们可以直接通过安卓手机浏览器来访问这个页面，当然JQM不仅仅这么简单，我们会逐步的学习和讨论的。

使用PhoneGap使web应用本地化

   大家也许会问，我们用jqm创建的只是一个页面，我只能用浏览器去访问它，能不能够使它离线情况我都能够访问、更甚者我可以可以让它变成一个安卓的应用？当然可以，PhoneGap就可以帮我完成这样的愿望。

    PhoneGap是一个用基于HTML，CSS和JavaScript的，创建移动跨平台移动应用程序的快速开发平台。它使开发者能够利用iPhone，Android，Palm，Symbian,WP7,Bada和Blackberry智能手机的核心功能——包括地理定位，加速器，联系人，声音和振动等，此外PhoneGap拥有丰富的插件，可以以此扩展无限的功能。PhoneGap是免费的，但是它需要特定平台提供的附加软件，例如iPhone的iPhone SDK，Android的Android SDK等，也可以和DW5.5配套开发。使用PhoneGap只比为每个平台分别建立应用程序好一点点，因为虽然基本代码是一样的，但是你仍然需要为每个平台分别编译应用程序。

官网为：http://phonegap.com/

准备工作

  • Eclipse 3.4+
  • Android开发神器 Eclipse Classic
  • Android开发必备 Android SDK
  • Android开发利器 ADT Plugin
  • 然后就是我们的PhoneGap的SDK，Download 在这里。

在Eclispse中建立第一个phonegap应用

1、新建一个安卓项目
  1.        这个很简单，不需要我多说什么。
2、引入cordova-2.3.0.jar
  1.       cordova是phonegap的核心包，只有先将其导入到工程中才能够使用phonegap的功能。
  2.    

    jquery IOS组件 jquery mobile app_移动开发_02

3、将jqm页面放置于assets/www/目录下
  1.       别忘了我们的初衷哦，可以把项目中的Activity删掉了，我们这次只是做点jqm页面罢了，用不到安卓原生应用。
  2.    

    jquery IOS组件 jquery mobile app_移动开发_03

4、新建一个继承DroidGap的类

1:  import org.apache.cordova.*;

2:  3: import com.devil.dropdowndemo.R;4:  5: public class Outer extends DroidGap6: {7: @Override8: public void onCreate(Bundle savedInstanceState)9: {10: super.onCreate(savedInstanceState);11: Log.d("DroidGap", "DroidGap --> Started ");12: super.setIntegerProperty("splashscreen", R.drawable.splash);13: super.loadUrl("file:///android_asset/www/index.html", 3000);14: }15: }

onCreate方法用于定义启动的主页面，其中 super.setIntegerProperty()用于定义启动之前的引导页面，可以不需要该行代码。

super.loadUrl()指定了主页面的位置为asset/www/目录下的index.html文件，第一次启动延时3秒。

5、修改AndroidManifest.xml，增加权限设置

1:   <activity2:              android:name="com.devil.Outer"3:              android:configChanges="orientation|keyboardHidden"4:              android:label="@string/app_name"5:               >6:              <intent-filter>7:                  <action android:name="android.intent.action.MAIN" />8:   9:                  <category android:name="android.intent.category.LAUNCHER" />10:              </intent-filter>11:          </activity>12:      </application>13:   14:      <supports-screens15:          android:anyDensity="true"16:          android:largeScreens="true"17:          android:normalScreens="true"18:          android:resizeable="true"19:          android:smallScreens="true"20:          android:xlargeScreens="true" />21:   22:      <uses-permission android:name="android.permission.CAMERA" />23:      <uses-permission android:name="android.permission.VIBRATE" />24:      <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />25:      <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />26:      <uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS" />27:      <uses-permission android:name="android.permission.INTERNET" />28:      <uses-permission android:name="android.permission.RECEIVE_SMS" />29:      <uses-permission android:name="android.permission.RECORD_AUDIO" />30:      <uses-permission android:name="android.permission.RECORD_VIDEO" />31:      <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />32:      <uses-permission android:name="android.permission.READ_CONTACTS" />33:      <uses-permission android:name="android.permission.WRITE_CONTACTS" />34:      <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />35:      <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />36:      <uses-permission android:name="android.permission.GET_ACCOUNTS" />37:      <uses-permission android:name="android.permission.BROADCAST_STICKY" />


OK，我们的jqm和phoneGap的第一个安卓应用就这么搭好了，来看看运行效果吧。


 

结语

    关于是安卓原生好还是用web好，这样的问题不是我们所要讨论的，正如B/S和C/S结构一样，每一种技术都有它存在的价值。用HTML5代替原生APP最近在逐渐的火起来，由于HTML5的“Write Once,Run Everywhere”的特性，它在电商领域替代许多的原生应用。对于我来说，这只是诸多路途中的一种，因为我需要用它来完成工作，所以需要以它作为起点然后一点一点的学习。不管是安卓原生还是web、java还是c#都是我们实现理想的手段，只有对程序哪永恒不变的热爱，才是我们最值的骄傲的。