你的位置:首页 > 操作系统

[操作系统]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\      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).         <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();" >退出</a>