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>