JQuery Mobile+cordova构建一个Android项目

1.安装Android开发环境

    Android开发环境的安装,现在主要是由于不能访问谷歌站点,在windows下在host文件中添加一个对应的74.125.195.190 dl-ssl.google.com，dl-ssl.google.com对应的ip可能改变。用的时候搜索最新的IP地址就行了。

   然后用eclipse或者myeclipse更新站点信息：https://dl-ssl.google.com/android/eclipse。

   具体教程网上很多,我比较喜欢的是：http://jingyan.baidu.com/article/bea41d437a41b6b4c51be6c1.html

2.安装cordova

   cordova是一个实现JavaScript和后台通信（Android的Java）的框架，通过相应的cordova插件,提供给Web前端调用移动平台底层功能API的能力。

   cordova通过WebChromeClient拦截js的prompt的内容来实现前端js对后端程序功能的调用。

   在最开始的时候，我只是下载了cordova的源码,把相关java类(喜欢只加入源java类，没有打成jar包，便于修改)和js加入android工程，但是需要一些系统插件时,会很难处理,只好重新安装cordova。

  1).安装node.js,去官网上下载安装后，把安装路径加入path

  2).安装npm,如果是最新的node.js已经带了npm了不用安装，否则就要安装一下

  3)安装cordova,这里一定要注意你的android sdk版本,查看一下是多少,应为默认安装最新的版本，而最新的版本需要的sdk版本很高，加入的cordova的java源代码需要的类有很大不同。

      a).安装cordova

            npm install -g cordova@3.6.0-0.2

      b).创建一个cordova工程

            cordova create hello com.example.hello HelloWorld

      c).添加android平台

           进入hello工程目录

           cordova platform add android

      d).将相关内容加入myeclipse

            hello\platforms\android\CordovaLib的java源类加入src中

            hello\platforms\android\assets\www中内容加入assets/www中

            hello\platforms\android\res\xml\config.xml中内容加入res/xml中

      e).编写MainActivity

          public class MainActivity extends CordovaActivity {

@Override

               public void onCreate(Bundle savedInstanceState) {

                    super.onCreate(savedInstanceState);

                    super.loadUrl("file:///android_asset/www/index.html");

                }

         }

        f).授权

             <uses-permission android:name="android.permission.CAMERA" />

            <uses-permission android:name="android.permission.VIBRATE" />

            <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />

            <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />

            <uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS" />

            <uses-permission android:name="android.permission.INTERNET" />

            <uses-permission android:name="android.permission.RECEIVE_SMS" />

            <uses-permission android:name="android.permission.RECORD_AUDIO" />

            <uses-permission android:name="android.permission.RECORD_VIDEO"/>

            <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />

            <uses-permission android:name="android.permission.READ_CONTACTS" />

            <uses-permission android:name="android.permission.WRITE_CONTACTS" />  

            <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />  

            <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

            <uses-permission android:name="android.permission.GET_ACCOUNTS" />

            <uses-permission android:name="android.permission.BROADCAST_STICKY" />

            <uses-permission android:name="android.permission.SEND_SMS" />

        g).启动程序，就能看见cordova主页面了

3.JQuery Mobile

        JQuery Mobile是专门为移动平台创建一组UI框架。

        特别注意的是，JQuery Mobile是用Ajax的方式加载所有HTML中的标记data-role="page"的DIV元素中，第一个HTML页面一般都是完全加载，包括 HEAD 和BODY 都会被加载到DOM中，完成后便是链接到的其他页面内容的加载。 第二个HTML页面只有 BODY 中的内容会被以Ajax的方式加载到头一个HTML的 DOM中。 并且第二HTML页面的 BODY 中的内容也并非全部加载，而仅仅是其中的第一个带data-role="page"属性的DIV会被加载进去，其余的东西则无缘进入页面渲染

        a).下载JQuery Mobile

        b).将css、js、images装入android工程

4.第一个演示项目

5.自定义插件

    下面这个插件实现通过一个按钮结束应用程序。

    1).插件定义

        public class ExitPlugin extends CordovaPlugin{

            private static final String EXIT = "exit";

            @Override 

            public boolean execute(String action, JSONArray args, CallbackContext callbackContext) { 

                if (EXIT.equals(action)) { 

                    System.exit(0); 

                } 

                return true;

            } 

    }

    2).xml配置

         <feature name="Exit">

              <param name="android-package" value="com.tomsnail.webtest.ExitPlugin"/>

         </feature>

    3).js定义

        var Exit = {

            exitSystem: function(){

                     cordova.exec(function(data){ }, function(e){}, "Exit", "exit", [""]);

            }

        }; 

    4).js调用

        function exitSystem(){

            Exit.exitSystem();

        }

        <a href="javascript:exitSystem();" class="ui-btn">退出</a>