JQuery Mobile+cordova building an Android project

Source: Internet
Author: User
Tags install node

1. Install Android development environment installation, now mainly due to the inability to access the Google site, under Windows to add a corresponding 74.125.195.190 in the host file dl-ssl.google.com,dl-ssl.google.com the corresponding IP may change.   Search for the latest IP address when you use it.   Then update the site information with Eclipse or MyEclipse: Https://dl-ssl.google.com/android/eclipse.   Specific tutorials Online A lot, I prefer: http://jingyan.baidu.com/article/bea41d437a41b6b4c51be6c1.html2. Installing Cordova   Cordova is a framework for implementing JavaScript and background communication (Android Java), providing the ability of the Web front end to invoke the underlying functionality API of the mobile platform via the corresponding Cordova plugin.   Cordova through the Webchromeclient interception JS prompt content to achieve the front-end JS to the back-end program function calls.  In the beginning, I just downloaded the Cordova source, the relevant Java class (like only add source Java class, not hit into jar package, easy to modify) and JS to join the Android project, but need some system plug-in, it will be difficult to handle, had to reinstall Cordova. 1). Install node. js, after downloading the installation to the official website, add the installation path to path 2). Install NPM, if the latest node. JS is already with NPM, do not install it, or install it (3) Install Cordova, be sure to note your Android SDK version here      , to see how much, you should install the latest version by default, and the latest version requires a High SDK version, the Cordova Java source code requires a very different class. a). Install Cordova NPM install-g[email protected]b). Creating a Cordova project Cordova create Hello Com.example.hello HelloWorld c). Add Android platform to the Hello Engineering directory            Cordova Platform add Android D). Add related content to MyEclipse hello\platforms\android\cordovalib Java source class join SRC Hello\platforms\android\assets\www content added to Assets/www in Hello\platforms\android\res\xml\config.xml add res /xml e). Write mainactivity public class Mainactivity extends Cordovaactivity {

@Override

               public void oncreate (bundle savedinstancestate)  {                    super.oncreate (savedinstancestate);  &N Bsp                 Super.loadurl ("file:///android_asset/www/index.html");  & nbsp            }         }        f). Authorization   &NBS P          <uses-permission android:name= "Android.permission.CAMERA"/>            <uses-permission android:name= "Android.permission.VIBRATE"/>      & nbsp     <uses-permission android:name= "Android.permission.ACCESS_COARSE_LOCATION"/>            <uses-permission android:name= "Android.permission.ACCESS_FINE_LOCATION"/>            &LT;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"/>          & nbsp   <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). Start the program, you can see the Cordova Main Page 3. JQuery mobile        jquery Mobile is designed to create a set of UI frameworks for mobile platforms.         Specifically, JQuery Mobile is an ajax-loaded DIV element in all HTML markup data-role= "page", the first HTML page is generally fully loaded, including The HEAD and body are loaded into the DOM, and the other page content that is linked to is loaded when done. The second HTML page only the contents of the BODY are loaded into the HTML DOM of the header in an AJAX manner. and the contents of the BODY of the second HTML page are not all loaded, but only the first div with the data-role= "page" attribute is loaded, and the rest of the items are not allowed to go into page rendering         a). Download jquery mobile        b). Load CSS, JS, images into AndroID Project 4. First demo Project 5. Custom Plugins     The following plug-in implementation uses a button to end the application.     1). Plug-in definition         public class Exitplugin extends cordovaplugin{            private static final String exit = "Exit";            @Override    & nbsp         Public Boolean execute (String action, Jsonarray args, Callbackcontext callbackcontext) {                  if (Exit.equals (action)) {                     system.exit (0);                }&NBSP;&N Bsp               return true;           }   &nbsp ; }    2). XML configuration          <feature name= "Exit" >          &NB Sp   <param name= "Android-package" value= "com.tomsnail.webtest.ExitPlUgin "/>         </feature>    3). JS definition         var Exit = {& nbsp           exitsystem:function () {                  & nbsp  cordova.exec (function (data) { }, function (e) {}, "Exit", "Exit", ["]");           }       };     4). js Call         function Exitsystem () {            Exit.exitsystem ();       }        <a href= " Javascript:exitsystem (); "class=" ui-btn "> Exit </a>

JQuery Mobile+cordova Build an Android project

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.